टैब्स

Question

मैं

jqgrid का उपयोग कर ग्रिड बनाने रहा हूँ मैं एक टैब एक ग्रिड और टैब के नाम खुलना चाहिए पर अपने आवेदन क्लिक करने में टैब बनाने के लिए पेज के शीर्ष पर दिखाई देनी चाहिए चाहते हैं और जब मैं किसी अन्य टैब पर क्लिक करता हूं तो उसे अन्य ग्रिड लोड करना चाहिए .. ग्रिड को उसी पृष्ठ पर लोड किया जाना चाहिए और टैब पर भी हर समय दिखाई देना चाहिए, मैंने पहले ही ग्रिड बनाए हैं, बस उन्हें एकीकृत करना चाहते हैं टैब ... plzz मुझे मदद करें अग्रिम धन्यवाद .....

Answer 1

ठीक है follo विंग आपके लिए कोड होगा। मैं उन दोनों टैबों (एएमपी, मैनेजर) के लिए एक ही डेटा का उपयोग कर रहा हूं जिन्हें आप बाद में बदल सकते हैं।

एचटीएमएल

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

जावास्क्रिप्ट

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

तो, यहाँ मेरा डिफ़ॉल्ट चयनित टैब द्वारा रोजगार हो जाएगा और अपने सूचकांक 0 हो जाएगा, तो मैं शुरू में इसके लिए जाँच कर रहा हूँ और उसके बाद टैबसीलेक्ट ईवेंट पर, मैं फिर से इंडेक्स की जांच कर रहा हूं। रोजगार सूचकांक के लिए 0 और प्रबंधक सूचकांक 1. के आधार पर है कि मैं ग्रिड और पेजर, मान परिवर्तित कर रहा हूँ, आप यहाँ अपने डेटा बदल सकता है। यह आपके लिए काम करेगा। मैं यूई टैब के बारे में ज्यादा नहीं जानता हूं, इसके लिए मैं आगे पढ़ूंगा। लेकिन अभी के लिए यह आपके लिए काम करेगा।

Answer 2

पीयूष,

महान जवाब लेकिन वहाँ है कि jQuery यूआई के नवीनतम संस्करण के साथ संगत नहीं है अपने कोड में एक मामूली समस्या है। यदि आप jqueryUI 1.10.x और ऊपर का उपयोग कर रहे हैं, तो आपको "चयनित" विकल्प के बजाय "चयनित" विकल्प का उपयोग करना होगा, इस परिवर्तन के अनुसार: http://jqueryui.com/upgrade-guide/1.10/#removed-selected-option-use-active

इसके अलावा ईवेंट मॉडल भी बदल गया है। मैंने नीचे दिए गए कोड को अपडेट किया और इसका परीक्षण किया और यह jQuery यूआई में ठीक काम करता है 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); 
       } 


      } 
     });