Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
by:授客 QQ:1033553122
测试环境
jquery-easyui-1.5.3
需求描述
如上图,
1、点击左侧树,叶子节点,打开不同的tab页,加载与节点对应的表数据
2、在上述打开页面中,进行新增,编辑,复制等操作,确保新增、复制等操作生成的数据只在该页面可见。
涉及思路与关键代码
1、单击左侧树时,叶子节点时,新增、激活一个tab页,打开、激活之前,设置tab页id属性值为树节点的ID,设置title属性为节点名称
// 请求用例树
$('#tree').tree({
url:'nodeTree?treeType=APICaseTree&projectID=' + projectID,
onClick: function(node){
var rootNodeId = $(this).tree('getRoot').id; //方法 getRoot 获取根节点,返回节点对象
if (node.id != rootNodeId) { // 非根节点
// 取消上次延时未执行的方法
clearTimeout(id_of_settimeout);
//执行延时
id_of_settimeout = setTimeout(function(){
// 方法:isLeaf target 判断指定的节点是否为叶节点,target 参数表示节点的 DOM 对象。
// 如果为叶节点,即无子节点,则为该节点添加对应的tab页,tab标题命名为节点名称,tabID则设置为 项目ID-节点ID
if ($(this).tree('isLeaf', node.target)) {
var tabID = node.id;
addTab(node.text, tabID);
}
}, 300);
}
}
});
// 点击用例树,叶节点,打开对应tab页的函数实现
function addTab(title, tabID){
var url = '/action/APICaseTreeNodePage';
if($('#tabs').tabs('exists', title)){ // 如果tab已存在,则选中、激活tab
$('#tabs').tabs('select', title);
} else{ //否则,添加tab
var iframe='<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tabs').tabs('add',{
id: tabID,
title: title,
content: iframe,
closable: true
});
}
}
2、定义datagrid时,不设置url,或者设置url为'',然后表格加载数据之前,修改请求数据的url(主要是修改请求参数,请求参数设计为节点ID,通过父子页面关系,获取tab ID来获取,后台服务器根据传递的url参数进行数据的筛选并返回)
<table class="easyui-datagrid" rownumbers="true" pagination="true" id="API_test_case_step"
data-options="border:false,
method: 'get',
onEndEdit:onEndEdit,
onBeforeLoad:onBeforeLoad,
……
">
<thead>
……
</thead>
</table>
// 加载数据之前修改url值,以保持页面数据和用例的对应关系
function onBeforeLoad(param){
// 获取当前页面所在父页面(tab页)的ID,即用例树节点ID
var currentTab = window.parent.$('#tabs').tabs('getSelected');
var tabID = currentTab.panel('options').id;
var nodeID = tabID;
$('#API_test_case_step').datagrid('options').url = '/action/loadAPICaseSteps?nodeID=' + nodeID;
}
到这一步已经实现了树节点和请求页面数据的对应关系。
3、新增,复制数据时也可以按上述第2点的设计思路来进行,先通过父子页面关系获取相关id,然后和其它数据一起发送给服务器
作者:授客
微信/QQ:1033553122
全国软件测试QQ交流群:7156436
Git地址:https://gitee.com/ishouke
友情提示:限于时间仓促,文中可能存在错误,欢迎指正、评论!
作者五行缺钱,如果觉得文章对您有帮助,请扫描下边的二维码打赏作者,金额随意,您的支持将是我继续创作的源动力,打赏后如有任何疑问,请联系我!!!
微信打赏
支付宝打赏 全国软件测试交流QQ群
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库