я делаю сетку с помощью jqgrid
Я хочу создать вкладки в своем приложении. При нажатии на вкладку должна открываться сетка, и имя вкладки должно отображаться в верхней части страницы, а когда я нажимаю на другую вкладку, она должна загружать другую сетку. сетки должны быть загружены на одна и та же страница, и вкладки также должны постоянно появляться на странице, я уже создал сетки, просто хочу интегрировать их с вкладками ... пожалуйста, помогите мне заранее, спасибо .....
Хорошо, ниже будет код для вас. Я использую одни и те же данные для обеих вкладок (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, поэтому я сначала проверяю ее, а затем в событии выбора вкладки снова проверяю индекс. Индекс emp равен 0, а индекс менеджера равен 1. На основании того, что я меняю значение сетки и пейджера, вы можете изменить свои данные здесь. Это сработает для вас. Я мало что знаю о вкладках пользовательского интерфейса, я буду учиться дальше. Но пока это будет работать для вас.
Пиюш,
Отличный ответ, но в вашем коде есть небольшая проблема, которая несовместима с последней версией пользовательского интерфейса 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);
}
}
});
