Tabs in JQUERY zum Laden jqGrid

Question

i Gitter mit jqGrid machen bin

ich will Tabs schaffen, in meiner Anwendung Klicken auf einen Tab sollte ein Gitter und den Namen der Registerkarte öffnen sollte oben auf der Seite angezeigt werden und wenn ich auf einen anderen Tab klicke, sollte es das andere Gitter laden. die Gitter sollten auf der gleichen Seite geladen werden und die Tabs sollten auch die ganze Zeit auf der Seite erscheinen Ich habe bereits die Grids erstellt nur wollen sie zu integrieren die tabs ... plzz hilfe mich danke im voraus .....

Answer 1

Okay follo Flügel wird der Code für Sie sein. Ich verwende die gleichen Daten für beide (emp, Manager) die Registerkarten, die Sie später ändern können.

HTML

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1" id="tab1">emp</a></li> 
     <li><a href="#tabs-2" td="tab2">manager</a></li> 

    </ul> 
    <div id="tabs-1"> 
     <table id="list"><tr><td/></tr></table> 
       <div id="pager"></div> 
    </div> 
    <div id="tabs-2"> 
     <table id="list1"><tr><td/></tr></table> 
     <div id="pager1"></div> 
     </div> 

</div> 

JavaScript

$(function() { 
      'use strict'; 
      var $tabs=$('#tabs').tabs(); 

      var selected = $tabs.tabs('option', 'selected'); 

      if(selected==0){ 

       var mydata = [ 
        {id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"} 

       ], 
       $grid = $("#list"),$pager = $("#pager"); 
       callMe($grid,mydata,$pager); 


      } 
      $('#tabs').bind('tabsselect', function(event, ui) { 

    selected=ui.index; 

    if(selected==0) 
    { 
    var mydata = [ 
        {id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"} 

       ], 
       $grid = $("#list"),$pager = $("#pager"); 
       callMe($grid,mydata,$pager); 
    } 

    if(selected==1) 
    { 
    var mydata = [ 
        {id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"} 

       ], 
       $grid = $("#list1"),$pager = $("#pager1"); 
       callMe($grid,mydata,$pager); 
    } 

     }); 
      function callMe(grid,mydata,pager){ 
      grid.jqGrid({ 
       datatype: 'local', 
       data: mydata, 
       colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'], 
       colModel: [ 
        {name: 'invdate', index: 'invdate', width: 90, align: 'center', sorttype: 'date', 
         formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}, 
        {name: 'name', index: 'name', width: 100}, 
        {name: 'amount', index: 'amount', width: 105, formatter: 'number', sorttype: 'number', align: 'right'}, 
        {name: 'tax', index: 'tax', width: 95, formatter: 'number', sorttype: 'number', align: 'right', hidden: true}, 
        {name: 'total', index: 'total', width: 90, formatter: 'number', sorttype: 'number', align: 'right'}, 
        {name: 'closed', index: 'closed', width: 95, align: 'center', formatter: 'checkbox', 
         edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}}, 
        {name: 'ship_via', index: 'ship_via', width: 130, align: 'center', formatter: 'select', 
         edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}}, 
        {name: 'note', index: 'note', width: 90} 
       ], 
       rowNum: 10, 
       rowList: [5, 10, 20], 
       pager: pager, 
       gridview: true, 
       rownumbers: true, 
       sortname: 'invdate', 
       viewrecords: true, 
       sortorder: 'desc', 
       caption: 'Buttons in the column headers', 
       height: '100%' 
      }); 
      } 
     }); 

Also hier, meine standardmäßig ausgewählte Registerkarte wird emp und seinen Index 0 sein wird, so dass ich für sie zunächst überprüft und dann auf Tabselect-Ereignis, ich überprüfe wieder den Index. Für emp-Index ist 0 und Manager-Index ist 1. basierend darauf, dass ich den Raster-und Pager-Wert ändern, können Sie Ihre Daten hier ändern. Dies wird für Sie arbeiten. Ich weiß nicht viel über UI Tabs, die ich weiter studieren werde. Aber für jetzt wird dies für Sie arbeiten.

Answer 2

Piyush,

Große Antwort, aber es gibt ein kleines Problem in Ihrem Code, die nicht kompatibel mit der neuesten Version von jQuery UI ist. Wenn Sie jqueryUI 1.10.x und höher verwenden, müssen Sie die Option "active" anstelle von "selected" verwenden: http://jqueryui.com/upgrade-guide/1.10/#removed-selected-option-use-active

Auch das Ereignismodell hat sich geändert. Ich aktualisierte den unten stehenden Code und es getestet und es funktioniert gut in jQuery UI 1.10.3:

<script > 
    $(function() { 
     'use strict'; 
     var $tabs = $('#tabs').tabs(); 

     var selected = $tabs.tabs('option', 'active'); 

     alert(selected); 
     if (selected == 0) { 

      var mydata = [ 
       { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" } 

      ], 
      $grid = $("#list"), $pager = $("#pager"); 
      callMe($grid, mydata, $pager); 


     } 

     $("#tabs").tabs({ 
      activate: function (event, ui) { 

       selected = ui.newTab.context.id; 
       alert(selected); 
       if (selected == "tab1") { 
        var mydata = [ 
            { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" } 

        ], 
           $grid = $("#list"), $pager = $("#pager"); 
        callMe($grid, mydata, $pager); 
       } 

       if (selected == "tab2") { 
        var mydata = [ 
            { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" } 

        ], 
           $grid = $("#list1"), $pager = $("#pager1"); 
        callMe($grid, mydata, $pager); 
       } 


      } 
     });