Cant get flexigrid to work in Jquery Tools Tab
Im fairly new to jquery and Im using jquery tools for tabs. I am wanti开发者_如何学Gong in one of the tabs to show flexigrid, but when I try to do this flexigrid does not show up, its just blank. If I setup flexigrid in a stand alone page outside the tab it works just fine. Below is the code that isnt working. Again Im new so please go easy!
<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>
I didn't find any trouble when using them both.
<!-- 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>
精彩评论