aquí en JQUERY para jqGrid carga

Question

estoy haciendo cuadrícula utilizando jqGrid

quiero crear pestañas en mi Al hacer clic en la aplicación en una ficha debe abrir una cuadrícula y el nombre de la pestaña debe aparecer en la parte superior de la página y cuando hago clic en otra pestaña debe cargar la otra grilla ... las grillas deben cargarse en la misma página y las pestañas también deben aparecer todo el tiempo en la página ya he creado las grillas solo quiero integrarlas con las pestañas ... por favor ayúdenme gracias de antemano .....

Answer 1

Bien follo ala será el código para ti. Estoy usando los mismos datos para ambas (emp, manager) las pestañas que puedes cambiar más adelante.

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%' 
      }); 
      } 
     }); 

lo tanto, aquí mi por pestaña predeterminada seleccionada se emp y su índice será 0, por lo que estoy comprobando para ello inicialmente y luego en el evento tabselect, estoy buscando índice otra vez. Para el índice emp es 0 y el índice del gerente es 1. basado en que estoy cambiando la cuadrícula y el valor del localizador, puede cambiar sus datos aquí. Esto funcionará para ti. No sé mucho sobre las pestañas de la UI. Lo estudiaré más a fondo. Pero por ahora esto funcionará para ti.

Answer 2

Piyush,

gran respuesta, pero hay un pequeño problema en su código que no es compatible con la última versión de la interfaz de usuario jQuery. Si está utilizando jqueryUI 1.10.xy superior, deberá usar la opción "activa" Nombre en lugar de "seleccionada", según este cambio: http://jqueryui.com/upgrade-guide/1.10/#removed-selected-option-use-active

También el modelo de evento ha cambiado también. Actualicé el código a continuación y lo probé y funciona bien en 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); 
       } 


      } 
     });