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", 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: 'dM-Y'}, datefmt: 'dM-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标签我将进一步研究它。 但是现在这对你有用。
PIYUSH，
很好的答案，但您的代码中存在一些与最新版本的jquery UI不兼容的问题。 如果您使用的是jqueryUI 1.10.x及更高版本，则根据此更改，您必须使用“active”optionName而不是“selected”： http ： //jqueryui.com/upgrade-guide/1.10/#removed-selected-选择使用的活性
事件模型也发生了变化。 我更新了下面的代码并进行了测试，它在jQuery UI 1.10.3中运行良好：