不能得到flexigrid工作在jquery工具選項卡

Question

即時通訊相當新的jQuery和Im使用jquery tools for tabs。我想要在其中一個選項卡中顯示flexigrid，但是當我嘗試執行此操作時，flexigrid不顯示，它只是空白。如果我在選項卡外部的獨立頁面中安裝flexigrid，它工作得很好。下面是沒有工作的代碼。再一次新的，所以請容易！

<ul class="css-tabs"> 
     <li><a href="#details">Account Details</a></li> 
     <li><a href="#accounts">Sub Accounts</a></li> 
     <li><a href="#groups">Groups</a></li> 
     <li><a href="#support">Tickets</a></li> 
    </ul> 

    <div class="css-panes"> 
     <div>Tab 1</div> 
     <div><table id="flex1" style="display:none"></table></div> 
     <div>Tab 3</div> 
     <div>Tab 4</div> 
    </div> 

    <script> 
$(function() { 
$("ul.css-tabs").tabs("div.css-panes > div").history(); 
}); 

$('.flexme1').flexigrid(); 
$('.flexme2').flexigrid({height:'auto',striped:false}); 

$("#flex1").flexigrid 
(
{ 
url: '/accounts_list.php', 
dataType: 'json', 
colModel : [ 
{display: 'ID', name : 'id', width : 45, sortable : true, align: 'center'}, 
{display: 'Username', name : 'username', width : 120, sortable : true, align: 'left'}, 
{display: 'Display Name', name : 'displayname', width : 150, sortable : true, align: 'left'}, 
{display: 'Limit', name : 'accounts', width : 50, sortable : true, align: 'center'}, 
{display: 'Rate', name : 'charge', width : 50, sortable : true, align: 'center'}, 
{display: 'Subs', name : 'subcount', width : 50, sortable : true, align: 'center'} 
], 
searchitems : [ 
{display: 'ID', name : 'id'}, 
{display: 'Username', name : 'username', isdefault: true}, 
{display: 'Display Name', name : 'displayname'} 
], 
sortname: "id", 
sortorder: "desc", 
usepager: true, 
singleSelect: true, 
title: 'Test', 
useRp: true, 
rp: 20, 
showTableToggleBtn: false, 
width: 500, 
height: 250 
}); 
    </script> 

Answer 1

我在使用它們時都沒有發現任何問題。

<!-- Here are the tabs --> 
<ul class="css-tabs"> 
    <li><a href="#details">Account Details</a></li> 
    <li><a href="#accounts">Sub Accounts</a></li> 
    <li><a href="#groups">Groups</a></li> 
    <li><a href="#support">Tickets</a></li> 
</ul> 

<!-- Here is the tab's content --> 
<div class="css-tabs"> 
    <div>Tab 1</div> 
    <div><table id="flex1" style="display:none"></table></div> 
    <div>Tab 3</div> 
    <div>Tab 4</div> 
</div> 

<script type="text/javascript"> 
    // On DOM ready, 
    $(function() { 
     // Setup the tabs. 
     $("ul.css-tabs").tabs("div.css-panes > div").history(); 

     //Setup the Table 
     $("#flex1").flexigrid({ 
     // Make sure, you are pointing to the right page. NO 404. 
     url: '/accounts_list.php', 
     dataType: 'json', 
     colModel : [ 
      {display: 'ID', name : 'id', width : 45, sortable : true, align: 'center'}, 
      {display: 'Username', name : 'username', width : 120, sortable : true, align: 'left'}, 
      {display: 'Display Name', name : 'displayname', width : 150, sortable : true, align: 'left'}, 
      {display: 'Limit', name : 'accounts', width : 50, sortable : true, align: 'center'}, 
      {display: 'Rate', name : 'charge', width : 50, sortable : true, align: 'center'}, 
      {display: 'Subs', name : 'subcount', width : 50, sortable : true, align: 'center'} 
     ], 
     searchitems : [ 
      {display: 'ID', name : 'id'}, 
      {display: 'Username', name : 'username', isdefault: true}, 
      {display: 'Display Name', name : 'displayname'} 
     ], 
     sortname: "id", 
     sortorder: "desc", 
     usepager: true, 
     singleSelect: true, 
     title: 'Test', 
     useRp: true, 
     rp: 20, 
     showTableToggleBtn: false, 
     width: 500, 
     height: 250 
     }); 

    // You can setup all the tables you need here. 

    }); 

</script>