JQUERY中用于加载JQGRID的选项卡

前端之家收集整理的这篇文章主要介绍了JQUERY中用于加载JQGRID的选项卡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用jqgrid制作网格

我想在我的应用程序中创建选项卡
单击选项卡应打开网格,选项卡的名称显示页面顶部
当我点击另一个标签时,它应该加载另一个网格..
网格应该加载在同一页面上,标签也应该一直出现在页面
我已经创建了网格,只是想将它们与标签集成…
plzz帮助我
提前致谢…..

最佳答案
好的以下将是您的代码.我正在为(emp,manager)使用相同的数据,您可以在以后更改它.

HTML

 

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",$pager);
    }

    if(selected==1)
    {
     var mydata = [
                    {id: "1",$grid = $("#list1"),$pager = $("#pager1");
                callMe($grid,$pager);
    }

        });
            function callMe(grid,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,align: 'right',hidden: true},{name: 'total',index: 'total',{name: 'closed',index: 'closed',formatter: 'checkBox',edittype: 'checkBox',editoptions: {value: 'Yes:No',defaultValue: 'Yes'}},{name: 'ship_via',index: 'ship_via',width: 130,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标签我将进一步研究它.但是现在这对你有用.

猜你在找的jQuery相关文章