jquery - JQGRIDをロードするためのJQUERYのタブ

Question

jqgridを使用してグリッドを作成しています

アプリケーションでタブを作成したいタブをクリックするとグリッドが開き、タブの名前がページの上部に表示され、別のタブをクリックすると他のグリッドが読み込まれます。グリッドが読み込まれる必要があります同じページとタブは、私がすでに作成したページにも常に表示されるはずです。グリッドをタブと統合したいだけです...plzzは事前に感謝します.....

Answer 1

さて、以下はあなたのためのコードになります。後で変更できる両方のタブ（emp、manager）に同じデータを使用しています。

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

したがって、ここでは、デフォルトで選択されたタブがempになり、そのインデックスが0になるので、最初にチェックしてから、tabselectイベントで再度インデックスをチェックします。empインデックスが0で、managerインデックスが1の場合、グリッドとページャーの値を変更していることに基づいて、ここでデータを変更できます。これはあなたのために働くでしょう。私はそれについてさらに研究するUIタブについてあまり知りません。しかし今のところ、これはあなたのために働くでしょう。

Answer 2

ピユッシュ、

すばらしい答えですが、コードにわずかな問題があり、最新バージョンのjqueryUIと互換性がありません。jqueryUI 1.10.x以降を使用している場合は、次の変更により、「selected」ではなく「active」optionNameを使用する必要があります。http：//jqueryui.com/upgrade-guide/1.10/#re​​moved- selected- option-use-active

また、イベントモデルも変更されました。以下のコードを更新してテストしたところ、jQueryUI1.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);
                }


            }
        });