1分钟学会easyui表格嵌套⼦表格datagrid-detailview 第⼀步
导⼊easyUI的js插件：datagrid-detailview.js
<!-- detagrid嵌套⼦表单，注意：⼀定要放到easyUI和JQuery的后⾯ -->
<script type="text/javascript" src="static/js/datagrid-detailview.js"></script>
第⼆步
⽤js⽅式创建datagrid
jsp代码：
<%
String path = ContextPath();
String basePath = Scheme() + "://" + ServerName() + ":"+ServerPort()+ path + "/";
%>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- easyUI的依赖js代码导⼊都在⾥⾯ -->
<%@ include file="/WEB-INF/views/common/common.jsp"%>
<!-- detagrid嵌套⼦表单 -->
<script type="text/javascript" src="static/js/datagrid-detailview.js"></script>
<!--  -->
<script type="text/javascript" src="static/js/model/contracr.js"></script>
<title></title>
</head>
<body>
<table id="contractDatagrid">
</body>
第三步
js代码
$(function(){
var contractDatagrid
contractDatagrid = $("#contractDatagrid");
/*----初始化组件---*/
contractDatagrid.datagrid({
url:'contract/page',
pageSize:10,
pageList:[10,20,30],
pagination:true,//添加分页条
fit:true,//填满
fitColumns:true,//⾃适应尺⼨
singleSelect:true,
rownumbers:true,//显⽰⾏号
remoteSort:false,//默认不排序
columns:[[
{field:'sn',title:'合同编号',width:100},
{field:'customerId',title:'客户',width:100,formatter:objectFormatter},
{field:'sellerId',title:'销售⼈员',width:100,formatter:objectFormatter},
{field:'signtime',title:'合同⽣成⽇期',width:100,},
{field:'sum',title:'成交⾦额',width:100},
{field:'intro',title:'合同描述:',width:100},
]],
view: detailview,//嵌套⼦表单重要的⼀步
detailFormatter: function (index, row) {
return '<div ><table id="contractItemDatagrid' + index + '"></table></div>';            },
onExpandRow: function (index, row) {
var contractItemDatagrid = $('#contractItemDatagrid' + index);
contractItemDatagrid.edatagrid({
url: 'contractItem/page',
fitColumns:true,//⾃适应尺⼨easyui插件
pagination:true,//分页
pageSize:10,
pageList:[10,20,30],
singleSelect:true,
rownumbers:true,//显⽰⾏号
columns: [[
{field:'id',title:'编号',width:100,hidden:true},
//。。。。。。。。。
]],
onResize: function () {
contractDatagrid.datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function () {
setTimeout(function () {
contractDatagrid.datagrid('fixDetailRowHeight', index);
}, 0);
},
contractDatagrid.datagrid('fixDetailRowHeight', index);
},
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。