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 ...
随机推荐
- BZOJ 3195 DP
http://www.cnblogs.com/CXCXCXC/p/5093584.html //By SiriusRen #include <cstdio> using namespace ...
- C++头文件一览
C++头文件一览 C.传统 C++ #include <assert.h> 设定插入点#include <ctype.h> 字符处理#include <errno.h&g ...
- SQL Server死锁排查
1. 死锁原理 根据操作系统中的定义:死锁是指在一组进程中的各个进程均占有不会释放的资源,但因互相申请被其他进程所站用不会释放的资源而处于的一种永久等待状态. 死锁的四个必要条件:互斥条件(Mutua ...
- 。net内存优化
1.尽量减少和避免不必要的对象 2.优化算法和数据结构 3.采用非托管代码或者模块编写数据处理逻辑 4.NET应用程序的内存一定程度上受垃圾回收的影响.并指出,一些数据结构如List,系统会分配多余的 ...
- luoguP2742 【模板】二维凸包 / [USACO5.1]圈奶牛 二维凸包
我们知道,纵坐标最小的点一定在凸包上(如果有多个,那它们都会被取到) 随便找一个纵坐标最小的点,将其他所有点按照这个点为原点极角排序,我们发现极角大的会在极角小的后面加入(感性认知一下) 考虑新(加入 ...
- css——导航栏
导航栏一般用无序列表制作 但出来的导航栏有黑点,还有一些边距 去除黑点我们可以用:list-style-type: none;/*去掉ul前面的点*/ 因为有些标签之间会有默认的边距,所以可以先将边踞 ...
- （2）RDD的基本操作
一.map操作,map(Transform) 二.collect操作,collect(Action) 三.使用PairRDD来做计算,类似key-value结构 采用groupByKey来.将资料按照 ...
- Python IDE和编辑器
1.什么是IDE? IDE也就是集成开发环境,较常用的有PyCharm 2.编辑器 (1)Sublime Text Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,Pytho ...
- 四则运算2（最终版）java+jps+sqlServer
1,设计思想 (1)在java Resources里建立包和类 (2)在类里面写入方法,其中包括生成算式create()和删除算式delete()用来更新数据库中的题目 (3)Show()方法用来随机 ...
- 为什么要清除BSS段
如题,看到uboot里有清除BSS段的代码,想知道这样做的目的是什么啊,BSS段默认值本来就是0了啊,希望大哥大姐们能详细的解说下,谢谢了 bss 段描述了未初始化的全局变量和静态变量的大小等信息,但 ...