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 ...
随机推荐
- maven 项目加载本地JAR
将jar安装到本地的maven仓库 1.首先确定本地有maven环境. 2.安装本地jar 模板: mvn install:install-file -Dfile=<path-to-file& ...
- ROS-动态参数
前言:在节点外部改变参数的方式有:参数服务器.服务.主题以及动态参数. 1.新建cfg文件 在chapter2_tutorials包下新建cfg文件夹,在cfg文件夹下新建chapter2.cfg文件 ...
- Android开发：ImageView阴影和图层效果
import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import ...
- Windows下获取Dump文件以及进程下各线程调用栈的方法总结（转）
1. Dump文件的用途 Dump文件, 主要用于诊断一个进程的运行状态,尤其是碰到崩溃(Crash)或者挂起(hang)不响应时,需要分析它的工作状态. 除了平时常见的attach到这个进程, 分 ...
- Ztree自动触发第一个节点的点击事件
1.代码 $(function () { var setting = { //check属性放在data属性之后,复选框不起作用 //check: { // enable: true //}, dat ...
- Java基础——类和对象的初始化过程
本节把类和对象的初始化所涉及到的所有代码块阐述一边. 示例代码: public class Demo { private static String name; private String age; ...
- ZBrush中标准笔刷介绍
ZBrush最实用.精彩的部分便是雕刻了,笔刷又有时雕刻时必不可少的工具,ZBrush中给我们提供了很多种笔刷,那么,最基础.最常用的笔刷是什么呢,本文内容向大家介绍ZBrush®中标准笔刷以便大家熟 ...
- ZBrush中如何清除画布中多余图像
ZBrush是一款数字雕刻与绘画软件,它以强大的功能和直观的工作流程彻底改变了整个三维行业.它的简洁化.智能化和人性化的设计无不让众多用户所折服.刚接触它的用户可能会因为找不到相关命令或不熟悉而觉得它 ...
- luogu P2000 拯救世界 生成函数_麦克劳林展开_python
模板题. 将所有的多项式按等比数列求和公式将生成函数压缩,相乘后麦克劳林展开即可. Code: n=int(input()) print((n+1)*(n+2)*(n+3)*(n+4)//24)
- BZOJ 3527: [Zjoi2014]力 FFT_卷积
Code: #include <cmath> #include <cctype> #include <cstdio> #include <cstring> ...