第一步
导入easyUI的js插件：datagrid-detailview.js
<!-- detagrid嵌套子表单，注意：一定要放到easyUI和JQuery的后面 -->
<script type="text/javascript" src="static/js/datagrid-detailview.js"></script>
第二步
用js方式创建datagrid
jsp代码：
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":"+request.getServerPort()+ 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 style="padding:5px"><table id="contractItemDatagrid' + index + '"></table></div>';
},
onExpandRow: function (index, row) {
var contractItemDatagrid = $('#contractItemDatagrid' + index);
contractItemDatagrid.edatagrid({
url: 'contractItem/page',
fitColumns:true,//自适应尺寸
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);
},
});
}