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 ...
随机推荐
- 分布式memcache
使用多台memchache服务器,形成memchache集群.目的是为了提升memchache所能使用的硬件资源数量.多台memcached服务器之间不相互通讯.分布式算法由客户端实现,(php来说, ...
- vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听
在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...
- 自动刷github提交记录
前言 进入自己github主页会看到自己的提交记录,如果某天没有提交记录,那天的小方框就显示灰色.强迫症的我,每次进来看着就感觉不爽, 想着自己每天记得提交点东西,争取像阮一峰大神一样,每天都有提交记 ...
- deploy sql clr
1, create strong signed key file 2, create asymmetric key
- iOS UIImage的解码时机
在看博客 UITableView优化技巧 时想到列表的优化主要还是对图片的优化处理. 博文中介绍了按需加载.快速滑动时不加载.异步刷新等等技巧. 这里有个问题, 当我们实例化一个UIImage对象并为 ...
- 第十一章 Python之异常处理
异常 异常时程序运行时发生错误的信号(在程序错误时,则会产生一个异常,若程序没有处理,则会抛出该异常,程序的运行也随之终止) 常见的异常类型AttributeError 试图访问一个对象没有的树形,比 ...
- 常用的GNOME Shell 扩展
GNOME Shell(即GNOME 3)桌面环境最初进军Linux世界时,众多批评人士指出其灵活性有所欠缺.当初外观有所突破的GNOME确实会给生产效率带来一些影响,然而它多年来一直默默通过多种方式 ...
- js 时间戳 中国标准时间 年月日 日期之间的转换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- sklearn学习9----LDA（discriminat_analysis）
1.导入模块 http://scikit-learn.org/stable/modules/generated/sklearn.discriminant_analysis.LinearDiscrimi ...
- cf掉分记——Avito Code Challenge 2018
再次作死的打了一次cf的修仙比赛感觉有点迷.. 还好掉的分不多(原本就太低没法掉了QAQ) 把会做的前三道水题记录在这.. A: Antipalindrome emmmm...直接暴力枚举 code: ...