1. 程式人生 > >1分鐘學會easyui表格巢狀子表格datagrid-detailview

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 = 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);
            },
        });
}