这里演示的只是我在项目中遇到的,根据自己的实际情况,自己修改。
html中只写了个class为easyui-tabs的div
当页面加载的时候根据自己的情况进行动态的加载tab页面;
//其中的addTabw为添加tab的方法
function initTableTabs(){
$.post('../../../BaseMessage/PUSH/XSJHService.ashx?m=SelectFDMBByCXHDBH', { "CXHDBH": C_CXHDBH }, function (res) {
var _Data = JSON.parse(res);
var _RowsFD = _Data.INFOFD;
var _RowsRQ = _Data.INFORQ;
if (_RowsFD != null) {
for (var k in _RowsFD) {
addTabw(_RowsFD[k].FDMC, 'DGY_Detail_Mode_dg_' + _RowsFD[k].FDBH);
window["FDRQData_"+ _RowsFD[k].FDBH]=[];
if (_RowsRQ != null) {
for (var i in _RowsRQ) {
if( _RowsRQ[i].FDBH == _RowsFD[k].FDBH){
window["FDRQData_"+ _RowsFD[k].FDBH].push(_RowsRQ[i]);
}
}
}
//在这里给datagrid赋值
$("#DGY_Detail_Mode_dg_" + _RowsFD[k].FDBH).datagrid('loadData', window["FDRQData_" + _RowsFD[k].FDBH]);
}
}
}
});
}
//添加tab,初始化tab,给tab上的table赋值
//选中一个tab,输入title
function selectTabw(title) {
if ($('#tabs_D').tabs('exists', title)) {
$('#tabs_D').tabs('select', title);//如果存在当前页面,则跳转到页面
}
}
//添加tab,tab的content为一个table,且tab为不可关闭,如果要改为可关闭的,false改为true,
//其实这两个为一个方法,要先判断是否存在这个页面,存在则不用再加入了,不过,我这里调用时,肯定传入的title不同,所以没有加判断
function addTabw(title, table_id) {
var content = '
';
$('#tabs_D').tabs('add', {//不存在,则添加一个
title: title,
content: content,
closable: false
});
tableToInit(table_id);
}
//初始化tableById
function tableToInit(table_id) {
$("#"+table_id).datagrid({
title: '',
loadMsg: '正在加载数据...',
rownumbers: true,
singleSelect: true,
multiSort: false,
remoteSort: true,
columns: [[
{ title: '销售计划ID', field: 'CXHDBH', align: 'center', sortable: true, wdith: 120 },
{ title: '分店名称', field: 'FDMC', align: 'center', sortable: true, wdith: 200 },
{ title: '日期', field: 'RQ', align: 'center', sortable: true, wdith: 200 },
{
title: '目标(万元)', field: 'XSMB', align: 'center', width: 100, sortable: true,
formatter: function (value, row, index) {
return value == null ? '' : value;
}
},
{ title: '登记人', field: 'DJRMC', align: 'center', width: 100, sortable: true },
{
title: '登记时间', field: 'DJSJ', align: 'center', width: 120, sortable: true,
formatter: function (value, row, index) {
return value != null ? value.replace("T", " ") : "";
}
}
]],
pageSize: 1000
});
}