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 ...
随机推荐
- HTML-虚线框3例
第一例: 代码 <HR style=> 第二例: 代码 <DIV style="BORDER-TOP: #00686b 1px dashed; OVERFLOW: hidd ...
- 数据库 The Network Adapter could not establish the connection解决方案
连接数据库 注意 url ip地址换的时候 oracle 里的listener.ora thnsnames.ora也要随之变化 重启数据库 不然可能会报出 java.sql.SQLException: ...
- ElementUI 表格表头筛选框的高度设置，超出一定高度，显示滚动条
最近项目发现一个问题table表头筛选的时候,由于筛选内容过多导致弹出框超出屏幕,并且无法滚动,应急的办法是缩小浏览器显示比例让更多内容显示
- 解决Ubuntu不能全屏问题
解决虚拟机中Ubuntu14.04系统安装VM Tools 时出现以下信息: 请确保您已登录客户机操作系统.在客户机中装载CD驱动器启动终端,使用tar解压缩安装程序,然后执行vmware-insal ...
- LInux学习之常用命令ls
命令格式与目录处理命令ls 命令格式: 命令[-选项][参数] 例如: ls -la /etc 说明: 1)个别命令使用不遵循此格式 2)当多个选项时,可以写在一起 3)简化选项与完整选项 -a ...
- P1903 【模板】分块/带修改莫队（数颜色）
题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2 ...
- table-layout:fixed属性
说实话,第一次见到这个属性有点懵圈,真是没见过这个属性 好了,直接说作用 table-layout其实是一种表格算法,用来显示表格单元格.行.列的算法规则. 固定表格布局: 固定表格布局与自动表格布局 ...
- 解决有关null闪退及json解析数据中null的问题
程序在获取某些数据之后莫名崩溃.其实很早就发现了原因: 由于服务器的数据库中有些字段为空, 然后以Json形式返回给客户端时就会出现这样的数据: "somevalue":null ...
- web.xml中的url-pattern写法规则及匹配过程
servlet和filter在javaEE开发中很常用,因此有必要知道web.xml文件映射的规则 1. 写法 ①完全匹配:以“/”开头,以字母(非“*”)结束 如:<url-patte ...
- 给大家介绍几个常见的Android代码片段
今天在源码天堂那个网站,也下载了一个不错的Android源码特效,现在分享一下给博客园的朋友吧,个人觉得那个网站还是挺不错的,希望大家能够使用得上. 仿美图秀秀拼图功能源码 仿美图秀秀拼图功能源码,最 ...