Easyui—datagrid嵌套四层
2021-11-23 本文已影响0人
YANG_LIVE
关于Easyui 多层datagrid 列表数据
应用场景：如查询一个省有多少城市？一个城市有多少县区？一个县区多少乡镇。
用列表展示出来，并很直观感受出来
效果展示
图片.png
<div id="divLayout" class="easyui-layout layout easyui-fluid" data-options="fit:true" style="border-top: 1px solid #95b8e7; width:100%;height:100%;">
<div style="padding:5px;background-color:#F4F4F4">
<p>
<input id="searchbox">
<div id="combox" style="width:120px">
<div data-options="name:'WorkOrder'">工单</div>
<div data-options="name:'Prod'">物料号(品号)</div>
<div data-options="name:'TraceNo'">追溯号</div>
</div>
</p>
</div>
<table id="dg"></table>
</div>
<script type="text/javascript">
$(function () {
$('#divLayout').layout('resize', {
height: $(window).height() - 232
});
//js searchbox 加载 兼容IE
$("#searchbox").searchbox({
width: 250,
height: 'auto',
prompt: '请输入关键字',
menu: "#combox", //combox 值
searcher: function (value, name) {
datagridloadData(1, 20, name, value, "TO");
},
});
});
//title
var columnstitle = [
{ title: '工单', field: 'WorkOrder', width: 80 },
{ title: '类型', field: 'WorkOrderType', width: 50 },//formatter: function (value, rowData, rowIndex) { return type;}
{ title: '物料编码(品号)', field: 'Prod', width: 80 },
{ title: '物料名称', field: 'ProdName', width: 120 },
{ title: '追溯号', field: 'TraceNo', width: 80 },
{ title: '供应商代码', field: 'SupplierCode', width: 80 },
{ title: '客户品号', field: 'PartNo', width: 80 },
{ title: '(Part No.)', field: 'PartNoName', width: 80 },
{ title: '(D/C)', field: 'Dc', width: 80 },
{ title: '版本/型号', field: 'Rev', width: 80 },
{ title: '(LOT/DC)', field: 'LotDc', width: 80 },
{ title: '数量', field: 'OperationQty', width: 80 },
{ title: '仓库代码', field: 'Warehouse', width: 80 },
{ title: '仓库描述', field: 'WareHouseDesc', width: 100 },
{ title: '仓库状态', field: 'StorageStatus', width: 80 },
{ title: '出库操作人员', field: 'Creator', width: 80 },
{ title: '出库日期', field: 'CreateDate', width: 80 }];
//数据列表
$(function () {
$('#dg').datagrid({
//一级列表
view: detailview,
autoRowHeight: true,
fitColumns: true,
singleSelect: false,
rownumbers: true,
striped: true,
height: '80%',
loadMsg: '@Message.Loading',
columns: [columnstitle],
pagination: true,
pageSize: 20,
pageList: [10, 20, 30, 40, 50],
detailFormatter: function (index, row) {
//二级列表的分页
return '<div style="padding:2px"><table class="ddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:20,pageList : [10,20,30,40,50]"></table></div>';
},
onExpandRow: function (index2, row) {
//二级列表，注意此时行索引为index2
var ddv = $(this).datagrid('getRowDetail', index2).find('table.ddv');
ddv.datagrid({
url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//器件
queryParams: {
//page: 1,rows: 10,
searchName: "QJ",
searchValue: row.Prod,
selectType: "QJ"
},
view: detailview,
autoRowHeight: true,
fitColumns: true,
singleSelect: false,
rownumbers: true,
loadMsg: '@Message.Loading',
height: 'auto',
columns: [columnstitle],
detailFormatter: function (index, row) {
//三级列表的分页
return '<div style="padding:2px"><table class="dddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:10,pageList : [10,20,30,40,50]"></table></div>';
},
onExpandRow: function (index3, row) {
//三级列表，此时行索引为index3
var dddv = $(this).datagrid('getRowDetail', index3).find('table.dddv');
dddv.datagrid({
url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//模块
queryParams: {
//page: 1,rows: 10,
searchName: "MODULE",
searchValue: row.Prod,
selectType: "MODULE"
},
view: detailview,
autoRowHeight: true,
fitColumns: true,
singleSelect: false,
rownumbers: true,
loadMsg: '@Message.Loading',
height: 'auto',
columns: [columnstitle],
detailFormatter: function (index, row) {
//四级列表的分页
return '<div style="padding:2px"><table class="ddddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:10,pageList : [10,20,30,40,50]"></table></div>';
},
onExpandRow: function (index4, row) {
//四级列表，此时行索引为index3
var ddddv = $(this).datagrid('getRowDetail', index4).find('table.ddddv');
ddddv.datagrid({
url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//明细
queryParams: {
//page: 1,rows: 10,
searchName: "MODULE",
searchValue: row.Prod,
selectType: "MODULE"
},
autoRowHeight: true,
fitColumns: true,//改变横向滚动条
singleSelect: false,//去掉选中效果
rownumbers: true,
loadMsg: '@Message.Loading',
height: 'auto',
columns: [columnstitle],
//四级
onLoadSuccess: function () {
setTimeout(function () {
dddv.datagrid('fixDetailRowHeight', index4);
//在加载成功时，获取父列表的明细高度，使其适应明显点开后的高度，注意此时的行索引为index3
dddv.datagrid('fixRowHeight', index4);
//在加载成功时，获取子明细点开后父列表的列高，防止在超过加载成功前的高度时，出现垂直方向的滑动条
$('#dg').datagrid('fixDetailRowHeight', index4);
//在加载成功时，获取一接列表的明细高度，使其适应前面父列表和子列表的高度变化，注意此时的行索引为index2
$('#dg').datagrid('fixRowHeight', index4);
//在加载成功时，获取父列表的明细点开后爷爷列表的高度，防止在超过加载成功前的高度时，出现垂直方向的滑动条
}, 0);
},
onResize: function () {
dddv.datagrid('fixDetailRowHeight', index4);
$('#dg').datagrid('fixDetailRowHeight', index4);
},
});
$('#dg').datagrid('fixDetailRowHeight', index4);
},
//三级
onLoadSuccess: function () {
$('#dg').datagrid('fixRowHeight', index3);
setTimeout(function () {
ddv.datagrid('fixDetailRowHeight', index3);
ddv.datagrid('fixRowHeight', index3);
$('#dg').datagrid('fixDetailRowHeight', index3);
$('#dg').datagrid('fixRowHeight', index3);
}, 0);
},
onResize: function () {
ddv.datagrid('fixDetailRowHeight', index3);
$('#dg').datagrid('fixDetailRowHeight', index3);
},
});
$('#dg').datagrid('fixDetailRowHeight', index3);
},
//二级
onCollapseRow: function (index2, row3) {
setTimeout(function () {
$('#dg').datagrid('fixDetailRowHeight', index2);
$('#dg').datagrid('fixRowHeight', index2);
}, 0);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#dg').datagrid('fixDetailRowHeight', index2);
$('#dg').datagrid('fixRowHeight', index2);
}, 0);
},
onResize: function () {
$('#dg').datagrid('fixRowHeight', index2);
}
});
$('#dg').datagrid('fixDetailRowHeight', index2);
}
});
//获取分页对象
//var pager = $("#dg").datagrid("getPager");
$('#dg').datagrid('getPager').pagination({
onBeforeRefresh: function (pageNumber, pageSize) { //刷新
console.log('before refresh : pageNumber:' + pageNumber + ',pageSize:' + pageSize); //这个也没有出现
},
onSelectPage: function (pageNumber, pageSize) {
//$(this).pagination('loading');
//序号连序
var gridOpts = $('#dg').datagrid('options');
gridOpts.pageNumber = pageNumber;
gridOpts.pageSize = pageSize;
var name = $('#searchbox').searchbox('getName'); //搜索框
var value = $('#searchbox').searchbox('getValue'); //值
datagridloadData(pageNumber, pageSize, name, value, "TO");
}
});
});
//请求方法
function datagridloadData(page, rows, name, value, Type) {
$.ajax({
url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect",
method: 'POST',
data: { page: page, rows: rows, searchName: name, searchValue: value, selectType: Type },
success: function (data) {
//序号连序
var gridOpts = $('#dg').datagrid('options');
gridOpts.pageNumber = page;
gridOpts.pageSize = rows;
$('#dg').datagrid('loadData', data);//绑定datagrid
}
});
}
</script>
注意项：
1、searchbox 组件 在ie下不支持在HTML写组件渲染关系
2、datagrid嵌套的子列表无法在外面用ajax请求，使用url 直接请求，如果参数过多不用拼接 ?a=1&=2 可用queryParams ，并开启 view: detailview ；在onExpandRow 写子列表渲染js
url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//模块
queryParams: {
//page: 1,rows: 10,
searchName: "MODULE",
searchValue: row.Prod,
selectType: "MODULE"
},
3、注意层级关系，否则打不开，或是乱的
dddv.datagrid('fixDetailRowHeight', index4);
//在加载成功时，获取父列表的明细高度，使其适应明显点开后的高度，注意此时的行索引为index3
dddv.datagrid('fixRowHeight', index4);
//在加载成功时，获取子明细点开后父列表的列高，防止在超过加载成功前的高度时，出现垂直方向的滑动条
$('#dg').datagrid('fixDetailRowHeight', index4);
//在加载成功时，获取一接列表的明细高度，使其适应前面父列表和子列表的高度变化，注意此时的行索引为index2
$('#dg').datagrid('fixRowHeight', index4);
4、如第一层 分页无效，需单独渲染
//获取分页对象
//var pager = $("#dg").datagrid("getPager");
$('#dg').datagrid('getPager').pagination({
onBeforeRefresh: function (pageNumber, pageSize) { //刷新
console.log('before refresh : pageNumber:' + pageNumber + ',pageSize:' + pageSize); //这个也没有出现
},
onSelectPage: function (pageNumber, pageSize) {
//$(this).pagination('loading');
//序号连序
var gridOpts = $('#dg').datagrid('options');
gridOpts.pageNumber = pageNumber;
gridOpts.pageSize = pageSize;
var name = $('#searchbox').searchbox('getName'); //搜索框
var value = $('#searchbox').searchbox('getValue'); //值
datagridloadData(pageNumber, pageSize, name, value, "TO");
}
});
5、如datagrid 分页 在第二页分后序号ID又从1开始，需要连序
//序号连序
var gridOpts = $('#dg').datagrid('options');
gridOpts.pageNumber = page;
gridOpts.pageSize = rows;
6、deom
@using System.Collections.Generic
@using Microsoft.AspNetCore.Http
@using Microsoft.AspNetCore.Http.Authentication
@using iROCK.Entity.Enum
@using iROCK.Resource
@using iROCK.Foundation.Web
@using System.Net.Http
@using System.IO
@using iROCK.Web
@using Microsoft.Extensions.Configuration
@using iROCK.Foundation.Web
@{
var resourceHost = Context.GetResourceHost();
Layout = "/Views/Shared/_LayoutEasyuiIndex.cshtml";
}@{ await Html.RenderPartialAsync("/Views/Shared/_PartialGlobalScript.cshtml"); }
@{ await Html.RenderPartialAsync("/Views/Shared/_PartialEasyuiDataGridExtentionScripts.cshtml"); }
<div id="divLayout" class="easyui-layout layout easyui-fluid" data-options="fit:true" style="border-top: 1px solid #95b8e7; width:100%;height:100%;">
<div style="padding: 5px; background-color: #F4F4F4; font-size: 12px;">
<span style="vertical-align:middle;">序列号</span>
<input id="txtSerialNo" class="easyui-textbox" data-options="prompt:'序列号',panelWidth:420">
<span style="padding-right:5px">
<a id="butnsearch" class="easyui-linkbutton l-btn l-btn-small" onclick="doSearch()">
<span class="l-btn-left"><span class="l-btn-text"><i class="fa fa-search"></i> 搜索</span></span>
</a>
</span>
</div>
<table id="dg"></table>
</div>
<script type="text/javascript">
$(function () {
$('#divLayout').layout('resize', {
height: $(window).height() - 232
});
});
function doSearch() {
datagridloadData(1, 20, $("#txtSerialNo").val(), "MODULE");
}
function columnstype(type) {
var columns;
switch (type) {
case "MODULE":
case "DEVICE":
columns = [[
{title: '@Label.SerialNo', field: 'SerialNo', width: 120},
{ title: '类型', field: 'WorkOrderType', width: 100, formatter: function (value, rowData, rowIndex) { return type; } },
{ title: '@Label.WorkOrder', field: 'WorkOrder', width: 120 },
{ title: '@Label.LotNo', field: 'LotNo', width: 120 },
{ title: '@Label.Status', field: 'Status', width: 120 },
{ title: '@Label.RouteName', field: 'RouteName', width: 140 },
{ title: '@Label.Operation', field: 'OperationDesc', width: 140 },
{ title: '@Label.OperationTo', field: 'OperationToDesc', width: 140 },
{ title: '@Label.PlatePackingNo', field: 'BottomMostPackingNo', width: 120 },
{ title: '@Label.CartonNo', field: 'MiddlePackingNo', width: 120 },
{ title: '@Label.ShippingBoxNo', field: 'TopMostPackingNo', width: 120 },
{
title: '@Label.SubObjectTypeAndNo', field: 'SubObjectTypeAndNo', width: 160,
formatter: function (value, row, index) {
if (row.SubObjectTypeAndNo.replace(/(^s*)|(s*$)/g, "").length > 0) {
var str = '<p style="color:red;">' + row.SubObjectTypeAndNo + '</p>';
return str;
}
}
},
{
title: '@Label.ComponentsSubProd', field: 'SubProd', width: 140,
formatter: function (value, row, index) {
if (row.SubObjectTypeAndNo.replace(/(^s*)|(s*$)/g, "").length > 0) {
var str = '<p style="color:red;">' + row.SubProd + '</p>';
return str;
}
}
},
{ title: '@Label.UdaAndUdaValueNew', field: 'UdaAndUdaValueNew', width: 120 },
{ title: '@Label.Operate', field: 'EmpNo', width: 100 },
{ title: '@Label.OperatingTime', field: 'DateTmOut', width: 120 }
]];
break;
case "TO":
columns = [[
{ title: '@Label.TraceNo',field: 'TraceNo', width: 180 },
{ title: '@Label.ItemNo', field: 'Prod', width: 100 },
{ title: '@Label.MaterialName',field: 'ProdName', width: 130 },
{ title: '@Label.SupplierCode',field: 'SupplierCode', width: 100 },
{ title: '@Label.CustomerProd',field: 'PartNo', width: 100 },
{ title: '@Label.PartNo',field: 'PartNoName', width: 120 },
{ title: '@Label.Dc',field: 'Dc', width: 120 },
{ title: '@Label.Version',field: 'Rev', width: 100 },
{ title: '@Label.LotDc',field: 'LotDc', width: 80 },
{ title: '@Label.Qty',field: 'OperationQty', width: 130 },
{ title: '@Label.WorkOrder',field: 'WorkOrder', width: 130 },
{ title: '@Label.WareHouseCode', field: 'Warehouse', width: 80 },
{ title: '@Label.WareHouseDesc',field: 'WareHouseDesc', width: 80 },
{ title: '@Label.OutputOperator',field: 'Creator', width: 130 },
{ title: '@Label.DeliveryDate',field: 'CreateDate', width: 140 }
]];
break;
}
return columns;
}
//{value?}/{type?}
//数据列表
$(function () {
$('#dg').datagrid({
//一级列表
view: detailview,
autoRowHeight: true,
fitColumns: true,
singleSelect: false,
rownumbers: true,
striped: true,
height: '80%',
loadMsg: '@Message.Loading',
columns: columnstype("MODULE"),
pagination: true,
pageSize: 20,
pageList: [10, 20, 30, 40, 50],
detailFormatter: function (index, row) {
//二级列表的分页
return '<div style="padding:2px"><table class="ddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:20,pageList : [10,20,30,40,50]"></table></div>';
},
onExpandRow: function (index2, row) {
//二级列表，注意此时行索引为index2 器件 DEVICE
var ddv = $(this).datagrid('getRowDetail', index2).find('table.ddv');
ddv.datagrid({
url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",
queryParams: {
//page: 1, rows: 10,
value: row.SubSerialNo,
type: "DEVICE"
},
view: detailview,
autoRowHeight: true,
fitColumns: true,
singleSelect: false,
rownumbers: true,
loadMsg: '@Message.Loading',
height: 'auto',
columns: columnstype("DEVICE"),
detailFormatter: function (index, row) {
//三级列表的分页
return '<div style="padding:2px"><table class="dddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:10,pageList : [10,20,30,40,50]"></table></div>';
},
onExpandRow: function (index3, row) {
//三级列表，此时行索引为index3 TO
var dddv = $(this).datagrid('getRowDetail', index3).find('table.dddv');
dddv.datagrid({
url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",
queryParams: {
//page: 1,rows: 10,
value: row.WorkOrder,
type: "TO"
},
autoRowHeight: true,
fitColumns: true,
singleSelect: false,
rownumbers: true,
loadMsg: '@Message.Loading',
height: 'auto',
columns: columnstype("TO"),
view: detailview,
detailFormatter: function (index, row) {
//四级列表的分页
return '<div style="padding:2px"><table class="ddddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:10,pageList : [10,20,30,40,50]"></table></div>';
},
onExpandRow: function (index4, row) {
//四级列表，此时行索引为index3
var ddddv = $(this).datagrid('getRowDetail', index4).find('table.ddddv');
ddddv.datagrid({
url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//明细
queryParams: {
//page: 1,rows: 10,
value: row.SubSerialNo,
type: "MODULE"
},
autoRowHeight: true,
fitColumns: true,//改变横向滚动条
singleSelect: false,//去掉选中效果
rownumbers: true,
loadMsg: '@Message.Loading',
height: 'auto',
columns: columnstype("TO"),
//四级
onLoadSuccess: function () {
setTimeout(function () {
dddv.datagrid('fixDetailRowHeight', index4);
//在加载成功时，获取父列表的明细高度，使其适应明显点开后的高度，注意此时的行索引为index3
dddv.datagrid('fixRowHeight', index4);
//在加载成功时，获取子明细点开后父列表的列高，防止在超过加载成功前的高度时，出现垂直方向的滑动条
$('#dg').datagrid('fixDetailRowHeight', index4);
//在加载成功时，获取一接列表的明细高度，使其适应前面父列表和子列表的高度变化，注意此时的行索引为index2
$('#dg').datagrid('fixRowHeight', index4);
//在加载成功时，获取父列表的明细点开后爷爷列表的高度，防止在超过加载成功前的高度时，出现垂直方向的滑动条
}, 0);
},
onResize: function () {
dddv.datagrid('fixDetailRowHeight', index4);
$('#dg').datagrid('fixDetailRowHeight', index4);
},
});
$('#dg').datagrid('fixDetailRowHeight', index4);
},
//三级
onLoadSuccess: function () {
$('#dg').datagrid('fixRowHeight', index3);
setTimeout(function () {
ddv.datagrid('fixDetailRowHeight', index3);
ddv.datagrid('fixRowHeight', index3);
$('#dg').datagrid('fixDetailRowHeight', index3);
$('#dg').datagrid('fixRowHeight', index3);
}, 0);
},
onResize: function () {
ddv.datagrid('fixDetailRowHeight', index3);
$('#dg').datagrid('fixDetailRowHeight', index3);
},
});
$('#dg').datagrid('fixDetailRowHeight', index3);
},
//二级
onCollapseRow: function (index2, row3) {
setTimeout(function () {
$('#dg').datagrid('fixDetailRowHeight', index2);
$('#dg').datagrid('fixRowHeight', index2);
}, 0);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#dg').datagrid('fixDetailRowHeight', index2);
$('#dg').datagrid('fixRowHeight', index2);
}, 0);
},
onResize: function () {
$('#dg').datagrid('fixRowHeight', index2);
}
});
$('#dg').datagrid('fixDetailRowHeight', index2);
}
});
//获取分页对象
//var pager = $("#dg").datagrid("getPager");
$('#dg').datagrid('getPager').pagination({
onBeforeRefresh: function (pageNumber, pageSize) { //刷新
console.log('before refresh : pageNumber:' + pageNumber + ',pageSize:' + pageSize);
},
onSelectPage: function (pageNumber, pageSize) {
//$(this).pagination('loading');
//序号连序
var gridOpts = $('#dg').datagrid('options');
gridOpts.pageNumber = pageNumber;
gridOpts.pageSize = pageSize;
var value = $("#txtSerialNo").val();
datagridloadData(pageNumber, pageSize, value, "MODULE");
}
});
});
//请求方法
function datagridloadData(page, rows, value, type) {
$.ajax({
url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect",
method: 'POST',
data: { page: page, rows: rows, value: value, type: type },
success: function (data) {
//序号连序
var gridOpts = $('#dg').datagrid('options');
gridOpts.pageNumber = page;
gridOpts.pageSize = rows;
$('#dg').datagrid('loadData', data);//绑定datagrid
}
});
}
</script>
