当前位置:网站首页>动态添加多tab,并初始化每个tab页面
动态添加多tab,并初始化每个tab页面
2022-07-25 09:17:00 【zk_Kang】
这里演示的只是我在项目中遇到的,根据自己的实际情况,自己修改。
html中只写了个class为easyui-tabs的div
<div id="center" data-options="region:'center'">
<!--这个定义div的id,后面需要用到-->
<div id="tabs_D" class="easyui-tabs" >
</div>
</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 = '<table id='+table_id+'></table>';
$('#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
});
}
边栏推荐
- 一文搞懂为什么要同时重写equals方法和hashCode方法+实例分析
- ActiveMQ -- persistent mechanism
- 【线程知识点】-- 自旋锁
- A picture to quickly understand envoyfilter in istio
- uni-app - Refused to display ‘xxx‘ in a frame because an ancestor violates the following Content Sec
- ActiveMQ -- AMQ of persistent mechanism
- Asp. Net core CMD common instructions
- API parsing of JDBC
- How to write the code of wechat applet implementation tab
- activemq--可持久化机制
猜你喜欢

The operation cannot be completed because a folder or file in it is already open in another program

2022-7-14 JMeter pressure test

The simplest sklearn environment configuration tutorial in the whole network (100% success)

使用nexus3发布yum私服(离线-内网)

Activemq-- delayed delivery and scheduled delivery

【Nacos】NacosClient在服务注册时做了什么

What version of Oracle10g single instance database is better to upgrade to? Ask for suggestions

Common tool classes under JUC package

Labview--- signal generator

Wechat applet obtains the data of ---- onenet and controls the on-board LED of STM32
随机推荐
[learn rust together] a preliminary understanding of rust package management tool cargo
Leetcode组合总和+剪枝
Uniapp intercepts route jumps through addinterceptor to control whether the page needs to log in
JDBC quick start
Opencv realizes simple face tracking
Collection of common algorithm questions in test post interview
Composition of the interview must ask items
[stl]stack & queue simulation implementation
The simplest sklearn environment configuration tutorial in the whole network (100% success)
实现简单的RESTful API服务器
ActiveMQ -- leveldb of persistence mechanism
学习周刊-总第 63 期-一款开源的本地代码片段管理工具
Live broadcast preview | how to build an enterprise cloud management platform in the cloudy era?
Guangzhou has carried out in-depth "100 day action" to check the safety of self built commercial houses, and more than 2 million houses have been checked in two months
Labview--- signal generator
JDBC快速入门
Comparison between symmetric encryption and asymmetric encryption
什么是单机、集群与分布式?
leetcode-238.除自身以外数组的乘积
Rich text style word image processing