【项目实战】---Easyui datagrid detailview使用简介

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ytm15732625529/article/details/78317634

前言:

之前对于esayUI的了解是仅仅是停留在对datagrid的简单应用上,这次有机会了解和学习数据网格详细视图即DataGrid DetailView,还是很有意思的。所谓的数据网格详细视图可以理解为SubGrid即次网格,在网格中还包含着网格,通过点击事件达到折叠或展开的效果。

实现:

1、引入页面样式和脚本

 <link rel="stylesheet" href="/Content/easyui.css">
    <link rel="stylesheet" href="/Content/icon.css" />
    <script type="text/javascript" src="/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/Scripts/datagrid-detailview.js"></script>
    <script type="text/javascript" src="/Scripts/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/Scripts/SalesOrder/SOrderTracking.js"></script>
这里要注意的是引入datagrid-detailview.js。

2、脚本

 @*数据列表*@
 <table id="SalesOrderGrid" class="easyui-datagrid" style="width:99%;height: 460px" data-options=""></table>
 

3、具体效果的实现

这部分有3个注意的地方,与直接使用datagrid的不同之处,要多多留心。

//定义数据表
function LoadData(strCusName, strSalesperson, strBeginDate, strEndDate) {
    $('#SalesOrderGrid').datagrid({
        view: detailview,//注意1 
        fitColumns: true,
        singleSelect: false,
        rownumbers: true,
        dataType: 'json',
        method: 'post',
        pagination: true,
        pageSize: 10,
        pageList: [10, 20, 30],
        loadMsg: "正在加载数据,请稍候...",
        url: '/CSalesOrder/GetAllSalesOrderInfoByPage',
        queryParams: {
            strCusName: strCusName,
            strSalesperson: strSalesperson,
            strBeginDate: strBeginDate,
            strEndDate: strEndDate
        },
        columns: [[
            { field: 'ck', checkbox: true },
            { field: 'ID', title: 'ID', width: 80, align: 'center', hidden: 'true', halign: 'center' },
            { field: 'OrderNumber', title: '订单编号', width: 40, align: 'left', halign: 'center' },
            { field: 'Name', title: '订单名称', width: 50, align: 'left', hidden: 'true', halign: 'center' },
            { field: 'OrderType', title: '订单类型', width: 50, align: 'left', hidden: 'true', halign: 'center' },
            { field: 'ContractNumber', title: '合同号', width: 50, align: 'left', halign: 'center' },
            { field: 'CusID', title: '客户ID', width: 50, align: 'left', hidden: 'true', halign: 'center' },
            { field: 'CusName', title: '客户名称', width: 50, align: 'left', halign: 'center' },
            { field: 'FillOrderDate', title: '填单日期', width: 50, align: 'left', halign: 'center' },
            { field: 'RequestDeliveryDate', title: '要求配送日期', width: 50, align: 'left', halign: 'center' },
            { field: 'State', title: '状态', width: 30, align: 'left', halign: 'center' },
            { field: 'Salesperson', title: '销售员', width: 30, align: 'left', halign: 'center' },
            { field: 'Remark', title: '备注', width: 40, align: 'left', halign: 'center' },
            { field: 'salesOrderDetailsID', title: '订单字表ID', width: 50, align: 'left', hidden: 'true', halign: 'center' },
        ]],

        detailFormatter: function (index, row) {//注意2  
            return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
        },
        onExpandRow: function (index, row) {//注意3  
            $('#ddv-' + index).datagrid({
                url: '/COrderTracking/GetInvoiceInfoByOrderDetailsID?strOrderDetailsID=' + row.salesOrderDetailsID,
                fitColumns: true,
                singleSelect: true,
                height: 'auto',
                columns: [[
                    { field: 'ID', title: 'ID', hidden: 'true' },
                    { field: 'FID', title: '发运单号', width: 50, align: 'left', halign: 'center' },
                    { field: 'PlateNumber', title: '车牌号', width: 50, align: 'left', halign: 'center' },
                    { field: 'DeliverUserRealName', title: '司机', width: 50, align: 'left', halign: 'center' },
                    { field: 'LoadingTime', title: '装车时间', width: 50, align: 'left', halign: 'center' },
                    { field: 'DeliverTime', title: '签收时间', width: 50, align: 'left', halign: 'center' },
                    { field: 'State', title: '状态', width: 50, align: 'left', halign: 'center' },
                ]],
                onResize: function () {
                    $('#SalesOrderGrid').datagrid('fixDetailRowHeight', index);
                },
                onLoadSuccess: function () {
                    setTimeout(function () {
                        $('#SalesOrderGrid').datagrid('fixDetailRowHeight', index);
                    }, 0);
                }
            });
            $('#SalesOrderGrid').datagrid('fixDetailRowHeight', index);
        }

    });

}

4、效果


总结:

对用到的主要的属性和事件进行简单说明。属性detailFormatter的类型是function(index,row),能返回行明细内容的格式化函数。事件onExpandRow的参数要包含index当展开一行时触发。希望小编的这篇文章能够让对Easyui datagrid detailview的使用还不太熟悉的伙伴能有初步的认识。

展开阅读全文

没有更多推荐了,返回首页