1分鐘學會easyui表格巢狀子表格datagrid-detailview
阿新 • • 發佈：2018-12-03
第一步
匯入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); }, }); }