Не могу заставить Flexigrid работать во вкладке Jquery Tools - PullRequest
Новая
       21

Не могу заставить Flexigrid работать во вкладке Jquery Tools

1 голос
/ 21 февраля 2010

Я довольно новичок в jquery и использую инструменты jquery для вкладок . Я хочу, чтобы на одной из вкладок отображалась 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>

1 Ответ

0 голосов
/ 21 февраля 2010

Я не нашел никаких проблем при использовании их обоих. 

<!-- 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>
...