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且管理器索引为1.基于我正在更改网格和寻呼机值，您可以在此处更改数据。这对你有用。我不太了解ui标签我将进一步研究它。但是现在这对你有用。

Answer 2

Piyush，

很好的答案，但您的代码中存在一些与最新版本的jquery UI不兼容的问题。如果您使用的是jqueryUI 1.10.x及更高版本，则根据此更改，您必须使用“active”optionName而不是“selected”：http://jqueryui.com/upgrade-guide/1.10/#removed-selected-option-use-active

事件模型也发生了变化。我更新了下面的代码并进行了测试，它在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);
                }


            }
        });

JQUERY中用于加载JQGRID的选项卡

2 个答案: