jqGrid多级表格的实现
原博主链接：http://blog.csdn.net/dreamstar613/article/details/54616503
jqGrid多级表格（可N级）
主要用的方法：
subGridRowExpanded ：当点击“+”(我的是向右的箭头)展开子表格时，将触发此选项定义的事件方法；这时会自动创建一个div,在这个方法中可以获取到这个div的id和表格中该行的id
subGridRowColapsed ：当点击“-”(我的是向下的箭头)收起子表格时，将触发此选项定义的事件方法；
在点击“-”时，子表格的div自动清除
在点击”+”时，也可以不去添加子表格，而去做别的自己需要的操作
html代码：
<div class="gridPanel">
<table id="gridList"></table>
<div id="gridPager"></div>
</div>
第一个js代码：主要就是设置subGrid:true和subGridRowExpanded
function gridList() {
var $gridList = $("#gridList");
$gridList.dataGrid({
url: "/PPR/BasicInformation/GetPPRModels",
height: $(window).height() - 128,
colModel: [
{ label: '主键', name: 'Id', hidden: true },
{ label: '工艺编码', name: 'Code', width: 80, align: 'left' },
{ label: '工艺名称', name: 'Name', width: 120, align: 'left' },
{ label: '产品编码', name: 'MMCode', width: 80, align: 'left' },
{ label: '产品名称', name: 'MMName', width: 80, align: 'left' },
{ label: '版本号', name: 'Version', width: 80, align: 'left' },
{ label: 'status', name: 'Status', hidden: true },
{ label: '状态', name: 'StatusName', width: 80, align: 'left' },
{ label: '描述', name: 'Describe', width: 80, align: 'left' }
],
pager: "#gridPager",
sortname: 'CreationTime desc',
viewrecords: true,
subGrid: true,//开启子表格支持
//子表格的id；当子表格展开的时候，在主表格中会创建一个div元素用来容纳子表格，subgrid_id就是这个div的id
subGridRowExpanded: function (subgrid_id, row_id) {//子表格容器的id和需要展开子表格的行id
bindSubGrid(subgrid_id, row_id);
}, onCellSelect: function (rowid, index, contents, event) {
onCell();//是一个控制按钮显示隐藏的方法
}
});
$("#btn_search").click(function () {
$gridList.jqGrid('setGridParam', {
postData: { PPRCode: $("#PPRCode").val() }
}).trigger('reloadGrid');
});
}
第二个js代码:是第一个js代码中bindSubGrid()方法的具体内容
function bindSubGrid(subgrid_id, collectLineId) {
onCell();
var PPRCode = $("#gridList").jqGrid('getRowData', collectLineId).Code;
var status = $("#gridList").jqGrid('getRowData', collectLineId).StatusName;
subgrid_table_id = subgrid_id + "_t";//最终子表格的div的id是加了"_t"的 subgrid_table_id是全局变量：var subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");//这里是添加子表格div,id为subgrid_table_id
$("#" + subgrid_table_id).jqGrid(
{
url: "/PPR/BasicInformation/GetPSModels?PPRCode=" + PPRCode,
datatype: "json",
height: "auto",
colModel: [
{ label: '主键', name: 'Id', hidden: true },
{ label: '工艺编码', name: 'PPRCode', hidden: true },
{ label: '工序编码', name: 'Code', width: 80, align: 'left' },
{ label: '工序名称', name: 'Name', width: 80, align: 'left' },
{ label: '是否剔除', name: 'IsRemoved', width: 80, align: 'left', editable: true, edittype: "checkbox", editoptions: { value: "是:否" } },
{ label: '序列号', name: 'OrderIndex', width: 80, align: 'left', editable: true, editrules: { edithidden: true, required: true, number: true } },
{ label: '备注', name: 'Describe', width: 200, align: 'left' }
],
rowNum: 200,
mtype: "post",
viewrecord: true,
subGrid: true,//开启子表格支持
//子表格的id；当子表格展开的时候，在主表格中会创建一个div元素用来容纳子表格，subgrid_id就是这个div的id
subGridRowExpanded: function (subgrid_id, row_id) {//子表格容器的id和需要展开子表格的行id
bindSubGrid2(subgrid_id, row_id);
},
onCellSelect: function (rowid, index, contents, event) {
$("#gridList").jqGrid('setSelection', collectLineId);//该工序的工艺选中
subgrid_table_id = subgrid_id + "_t";
$(".operate").animate({ "left": 0 }, 200);
$("#NF-edit").hide();
$("#NF-delete").hide();
$("#NF-start").hide();
$("#NF-stop").hide();
$("#NF-process").hide();
$("#NF-copy").hide();
$("#NF-step").show();
$("#NF-material").hide();
$("#NF-measure").hide();
setTimeout(function () {
if (status == "新建") {
$("#NF-step").attr("onclick", "btn_step();");
$("#NF-step").css("color", "#333333 ");
} else {
$("#NF-step").removeAttr("onclick");
$("#NF-step").css("color", "#CFCFCF ");
}
}, 30);
}
});
}
若要再添加子表格只需要在bindSubGrid中继续设置subGrid:true和subGridRowExpanded（上面第二个js代码中有）
我项目中共4级，其余的js代码如下：
第三个js代码：
function bindSubGrid2(subgrid_id, collectLineId) {
listId = subgrid_id.substring(0, 12);
var listRootId = subgrid_id.substring(9, 10);
var PSCode = $("#" + listId).jqGrid('getRowData', collectLineId).Code;
var PPRCode = $("#" + listId).jqGrid('getRowData', collectLineId).PPRCode;
var status = $("#gridList").jqGrid('getRowData', listRootId).StatusName;
subgrid_table_id = subgrid_id + "_t";
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
$("#" + subgrid_table_id).jqGrid(
{
url: "/PPR/BasicInformation/GetStepModels?PPRCode=" + PPRCode + "&PSCode=" + PSCode,
datatype: "json",
height: "auto",
colModel: [
{ label: '主键', name: 'Id', hidden: true },
{ label: '工艺编码', name: 'PPRCode', hidden: true },
{ label: '工序编码', name: 'PSCode', hidden: true },
{ label: '工步编码', name: 'Code', width: 80, align: 'left' },
{ label: '工步名称', name: 'Name', width: 80, align: 'left' },
{ label: '工步类型', name: 'TypeName', width: 80, align: 'left' },
{ label: '最大测量次数', name: 'MaxCycles', width: 80, align: 'left' },
{ label: '程序编码', name: 'ProgNum', width: 80, align: 'left' },
{ label: '序列号', name: 'OrderIndex', width: 80, align: 'left', editable: true },
{ label: '备注', name: 'Describe', width: 200, align: 'left' }
],
rowNum: 200,
mtype: "post",
viewrecord: true,
subGrid: true,//开启子表格支持
//子表格的id；当子表格展开的时候，在主表格中会创建一个div元素用来容纳子表格，subgrid_id就是这个div的id
subGridRowExpanded: function (subgrid_id, row_id) {//子表格容器的id和需要展开子表格的行id
bindSubGrid3(subgrid_id, row_id);
},
onCellSelect: function (rowid, index, contents, event) {
listId = subgrid_id.substring(0, 12);//gridlist_3_t_1
gridListRowId = subgrid_id.substring(9, 10);//
$("#gridList").jqGrid('setSelection', gridListRowId);//该工序的工艺选中
$("#" + listId).jqGrid('setSelection', collectLineId);//该工步的工序选中
MMCode = $("#gridList").jqGrid('getRowData', gridListRowId).MMCode;//该工艺的物料编码
$(".operate").animate({ "left": 0 }, 200);
$("#NF-edit").hide();
$("#NF-delete").hide();
$("#NF-start").hide();
$("#NF-stop").hide();
$("#NF-process").hide();
$("#NF-copy").hide();
$("#NF-step").hide();
$("#NF-material").show();
$("#NF-measure").show();
setTimeout(function () {
var type = $("#" + subgrid_table_id).jqGridRowValue().TypeName;
if (status == "新建") {
if (type == "装配") {
$("#NF-material").attr("onclick", "btn_material();");
$("#NF-material").css("color", "#333333 ");
$("#NF-measure").removeAttr("onclick");
$("#NF-measure").css("color", "#CFCFCF ");
} else {
$("#NF-material").removeAttr("onclick");
$("#NF-material").css("color", "#CFCFCF ");
$("#NF-measure").attr("onclick", "btn_measure();");
$("#NF-measure").css("color", "#333333 ");
}
} else {
$("#NF-material").removeAttr("onclick");
$("#NF-material").css("color", "#CFCFCF ");
$("#NF-measure").removeAttr("onclick");
$("#NF-measure").css("color", "#CFCFCF ");
}
}, 30);
}
});
}
第四个js代码：下面if...else...中的内容实际需不一样的，自己写需要做的处理即可
function bindSubGrid3(subgrid_id, collectLineId) {
//alert(subgrid_id + " : " + collectLineId);
listId = subgrid_id.substring(0, 16);
//alert(listId);
var listRootId = subgrid_id.substring(9, 10);
var StepCode = $("#" + listId).jqGrid('getRowData', collectLineId).Code;
var PPRCode = $("#" + listId).jqGrid('getRowData', collectLineId).PPRCode;
var PSCode = $("#" + listId).jqGrid('getRowData', collectLineId).PSCode;
var TypeName = $("#" + listId).jqGrid('getRowData', collectLineId).TypeName;
var status = $("#gridList").jqGrid('getRowData', listRootId).StatusName;
//alert(StepCode + " " + PPRCode + " " + PSCode + " " + TypeName + " " + status);
subgrid_table_id = subgrid_id + "_t";
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
if (TypeName == "装配") {
$("#" + subgrid_table_id).jqGrid(
{
url: "/PPR/BasicInformation/GetMaterialModels?pPRCode=" + PPRCode + "&pSCode=" + PSCode + "&stepCode=" + StepCode,
datatype: "json",
height: "auto",
colModel: [
{ label: '主键', name: 'Id', hidden: true },
{ label: '工艺编码', name: 'PPRCode', hidden: true },
{ label: '工序编码', name: 'PSCode', hidden: true },
{ label: '工步编码', name: 'STEPCode', hidden: true },
{ label: '物料编码', name: 'MMCode', width: 80, align: 'left' },
{ label: '物料名称', name: 'MMName', width: 80, align: 'center' },
{ label: '数量', name: 'Quantity', width: 60, align: 'center' },
{ label: '型号', name: 'ModelNumber', width: 80, align: 'center' },
{ label: '类型', name: 'TypeNameCN', width: 60, align: 'center' },
{ label: '单位', name: 'Uom', width: 60, align: 'center' },
{ label: '备注', name: 'Describe', width: 80, align: 'left' }
],
rowNum: 200,
mtype: "post",
viewrecord: true,
onCellSelect: function (rowid, index, contents, event) {
PPRRowId = subgrid_id.substring(9, 10);//gridList为工艺所在Id，gridList_2后面的2为第几个工艺，也就是行号
$("#gridList").jqGrid('setSelection', PPRRowId);//工艺选中
PSGridListId = subgrid_id.substring(0, 12);//gridList_2_t为工序所在Id,gridList_2_t_1后面的1为第几个工序，也就是行号
PSRowId = subgrid_id.substring(13, 14);//
$("#" + PSGridListId).jqGrid('setSelection', PSRowId);//工序选中
StepGridListId = subgrid_id.substring(0, 16);//gridList_2_t_1_t为工步所在Id,gridList_2_t_1_t_2后面的2为第几个工步，也就是行号
StepRowId = subgrid_id.substring(17, 18);//
$("#" + StepGridListId).jqGrid('setSelection', StepRowId);//工步选中
//MMCode = $("#gridList").jqGrid('getRowData', PPRRowId).MMCode;//该工艺的物料编码
//$(".operate").animate({ "left": '-100.1%' }, 200);
//$(".operate").animate({ "left": 0 }, 200);
$("#NF-edit").hide();
$("#NF-delete").hide();
$("#NF-start").hide();
$("#NF-stop").hide();
$("#NF-process").hide();
$("#NF-copy").hide();
$("#NF-step").hide();
$("#NF-material").hide();
$("#NF-measure").hide();
}
});
} else if (TypeName == "控制测量") {
$("#" + subgrid_table_id).jqGrid(
{
url: "/PPR/BasicInformation/GetMaterialModels?pPRCode=" + PPRCode + "&pSCode=" + PSCode + "&stepCode=" + StepCode,
datatype: "json",
height: "auto",
colModel: [
{ label: '主键', name: 'Id', hidden: true },
{ label: '工艺编码', name: 'PPRCode', hidden: true },
{ label: '工序编码', name: 'PSCode', hidden: true },
{ label: '工步编码', name: 'STEPCode', hidden: true },
{ label: '物料编码', name: 'MMCode', width: 80, align: 'left' },
{ label: '物料名称', name: 'MMName', width: 80, align: 'center' },
{ label: '数量', name: 'Quantity', width: 60, align: 'center' },
{ label: '型号', name: 'ModelNumber', width: 80, align: 'center' },
{ label: '类型', name: 'TypeNameCN', width: 60, align: 'center' },
{ label: '单位', name: 'Uom', width: 60, align: 'center' },
{ label: '备注', name: 'Describe', width: 80, align: 'left' }
],
rowNum: 200,
mtype: "post",
viewrecord: true,
onCellSelect: function (rowid, index, contents, event) {
PPRRowId = subgrid_id.substring(9, 10);//gridList为工艺所在Id，gridList_2后面的2为第几个工艺，也就是行号
$("#gridList").jqGrid('setSelection', PPRRowId);//工艺选中
PSGridListId = subgrid_id.substring(0, 12);//gridList_2_t为工序所在Id,gridList_2_t_1后面的1为第几个工序，也就是行号
PSRowId = subgrid_id.substring(13, 14);//
$("#" + PSGridListId).jqGrid('setSelection', PSRowId);//工序选中
StepGridListId = subgrid_id.substring(0, 16);//gridList_2_t_1_t为工步所在Id,gridList_2_t_1_t_2后面的2为第几个工步，也就是行号
StepRowId = subgrid_id.substring(17, 18);//
$("#" + StepGridListId).jqGrid('setSelection', StepRowId);//工步选中
//MMCode = $("#gridList").jqGrid('getRowData', PPRRowId).MMCode;//该工艺的物料编码
//$(".operate").animate({ "left": '-100.1%' }, 200);
//$(".operate").animate({ "left": 0 }, 200);
$("#NF-edit").hide();
$("#NF-delete").hide();
$("#NF-start").hide();
$("#NF-stop").hide();
$("#NF-process").hide();
$("#NF-copy").hide();
$("#NF-step").hide();
$("#NF-material").hide();
$("#NF-measure").hide();
}
});
} else {
$("#" + subgrid_table_id).jqGrid(
{
url: "/PPR/BasicInformation/GetMaterialModels?pPRCode=" + PPRCode + "&pSCode=" + PSCode + "&stepCode=" + StepCode,
datatype: "json",
height: "auto",
colModel: [
{ label: '主键', name: 'Id', hidden: true },
{ label: '工艺编码', name: 'PPRCode', hidden: true },
{ label: '工序编码', name: 'PSCode', hidden: true },
{ label: '工步编码', name: 'STEPCode', hidden: true },
{ label: '物料编码', name: 'MMCode', width: 80, align: 'left' },
{ label: '物料名称', name: 'MMName', width: 80, align: 'center' },
{ label: '数量', name: 'Quantity', width: 60, align: 'center' },
{ label: '型号', name: 'ModelNumber', width: 80, align: 'center' },
{ label: '类型', name: 'TypeNameCN', width: 60, align: 'center' },
{ label: '单位', name: 'Uom', width: 60, align: 'center' },
{ label: '备注', name: 'Describe', width: 80, align: 'left' }
],
rowNum: 200,
mtype: "post",
viewrecord: true,
onCellSelect: function (rowid, index, contents, event) {
PPRRowId = subgrid_id.substring(9, 10);//gridList为工艺所在Id，gridList_2后面的2为第几个工艺，也就是行号
$("#gridList").jqGrid('setSelection', PPRRowId);//工艺选中
PSGridListId = subgrid_id.substring(0, 12);//gridList_2_t为工序所在Id,gridList_2_t_1后面的1为第几个工序，也就是行号
PSRowId = subgrid_id.substring(13, 14);//
$("#" + PSGridListId).jqGrid('setSelection', PSRowId);//工序选中
StepGridListId = subgrid_id.substring(0, 16);//gridList_2_t_1_t为工步所在Id,gridList_2_t_1_t_2后面的2为第几个工步，也就是行号
StepRowId = subgrid_id.substring(17, 18);//
$("#" + StepGridListId).jqGrid('setSelection', StepRowId);//工步选中
//MMCode = $("#gridList").jqGrid('getRowData', PPRRowId).MMCode;//该工艺的物料编码
//$(".operate").animate({ "left": '-100.1%' }, 200);
//$(".operate").animate({ "left": 0 }, 200);
$("#NF-edit").hide();
$("#NF-delete").hide();
$("#NF-start").hide();
$("#NF-stop").hide();
$("#NF-process").hide();
$("#NF-copy").hide();
$("#NF-step").hide();
$("#NF-material").hide();
$("#NF-measure").hide();
}
});
}
}
用多级表格遇到的问题：
因为项目中不是简单的多级显示内容，还有当选中某一级中某一行数据后，还要做些其他的操作，比如选中某一工艺需要对其做配置工序的操作，选中某一工序需要对其做配置工步的操作；工步是分类型的，有装配类型，控制测量类型，非控制测量类型三种类型，选中某一工步需要对其配置投料或者配置测量参数；最后一层也就是最深的一层只有展开显示的功能，选中某一工步按类型展示不同内容。
下图是我项目的一个展示页面：
jqGrid多级表格的实现的更多相关文章
- iOS：二叉树多级表格的使用，使用三方库TreeTableView-master实现对json解析数据的递归遍历整理成树状结构
在项目中,我们有时需要使用二叉树来实现多级表格的递归遍历查询,如果对二叉树比较懂,那么写起来其实也不费事,为了节省开发时间,下面介绍一下第三方库TreeTableView-master,这个三方库上给 ...
- jqGrid数据表格
方式一: <!DOCTYPE html><html><head><meta charset="utf-8" /><title& ...
- JqGrid 显示表格
JqGrid 是前台的表格显示库,使用起来相当方便. 这里分享下本人使用过程中遇到的问题及解决方案 ** 一.rowNum属性 ** 1.如果不设置,默认显示数是20,也就是说超过20以后的数据.不再 ...
- jqgrid子表格
.前台 <%-- builed by manage.aspx.cmt [ver:] at // :: --%> <%@ Page Language="C#" Au ...
- jqgrid 在表格底部添加自定义按钮
往往我们需要在jqgrid底部的分页行中添加一些自定义按钮,效果如下: 上图中,三个按钮均是自定义添加上的. 1.要新增自定义按钮在表格底部,仍离不开分页div,需要给jqgrid绑定分页方法 2.由 ...
- jqgrid 实现表格随select框内容改变而刷新
要实现的功能如下:当选择框选择数据源由原始数据切换到组合后数据时,界面左侧jqgrid表格随之改变.效果如下: 实现代码: 界面顶部select选择框:要点是用localStory将选择框的选择信息记 ...
- 关于jqGrid组件表格无法自适应宽度问题
今天生成了一个4列的表格,但是无法自适应宽度,使用 $(window).resize(function(){ $(window).unbind("onresize"); $(&qu ...
- jqgrid 编辑表格（包含下拉框）
.1在jqgrid 按钮 <asp:JQGridColumn TextAlign=" DataField="act" Visible="True" ...
- jqGrid清空表格
$("#jqGrid").jqGrid("setGridParam",{ datatype:'local', data : [], page:1 }).trig ...
随机推荐
- SPFA(Shortest Path Faster Algorithm)
特别说明 本文转载自三金(frinemore)的博客: 点这 前言 1.关于SPFA,它没死. 2.接下来的所有代码,都是自己手写的(未检查正确性,补充的代码有检查过,是对的),有错误请帮忙指出. S ...
- ubuntu下谷歌浏览器字体模糊解决方案
一般来说,这种问题应该是缺少字体造成的,因此重新安装字体就可以解决问题. 1.双系统下,查找Windows C盘下:Windows/font/???? ???可在3中查找相应字体 2.分别双击安装那两 ...
- day09-1 列表，元祖的内置方法
目录 列表类型的内置方法 作用 定义方式 方法 优先掌握 需要掌握 储存一个值or多个值 有序or无序?(有序:有索引, 无序:无索引) 可变or不可变(可变:值变id不变,不可变:值变id也变) 元 ...
- Java学习进阶—高级编程
当你已经熟练的掌握了面向对象中的各种概念后,是否会对这些知识是如何使用的产生浓厚的兴趣?本课程主要针对于已经掌握了JAVA核心开发技术的读者准备,讲解了JAVA多线程.常用类库.IO编程.网络编程.类 ...
- Link Cut Tree 动态树 小结
动态树有些类似 树链剖分+并查集 的思想,是用splay维护的 lct的根是动态的,"轻重链"也是动态的,所以并没有真正的轻重链 动态树的操作核心是把你要把 修改/询问/... 等 ...
- HDU 6125 Free from square (状压DP+分组背包)
题目大意:让你在1~n中选择不多于k个数(n,k<=500),保证它们的乘积不能被平方数整除.求选择的方案数 因为质数的平方在500以内的只有8个,所以我们考虑状压 先找出在n以内所有平方数小于 ...
- [luogu2579 ZJOI2005] 沼泽鳄鱼(矩阵快速幂)
传送门 题目描述 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客. 为了让游玩更有情趣,人们在池塘的中央建设了几座石 ...
- NOIP2018提高组省一冲奖班模测训练（二）
比赛链接 NOIP2018提高组省一冲奖班模测训练(二) 今天发挥正常,昨天不在状态…… 花了很久A了第一题 第二题打了30分暴力 第三题投机取巧输出test1答案(连暴力都不知道怎么打,太弱了) 2 ...
- （转载）springboot集成httpinvoker的客户端
原文:https://blog.csdn.net/geanwan/article/details/51505679 由于新项目采用了springboot,需要调用之前远程服务(之前项目用的spring ...
- url中jsessionid的理解
(1) 这是一个保险措施 因为Session默认是需要Cookie支持的 但有些客户浏览器是关闭Cookie的 这个时候就需要在URL中指定服务器上的session标识,也就是5F4771183629 ...