EasyUI折叠表格层次显示detailview详解及实例

介绍

在EasyUI中，可以使用折叠表格来显示分层数据。当需要在折叠的表格中显示更多详细的数据时，我们可以使用detailview来展示更多信息。

detailview可以根据EasyUI数据网格中的数据动态创建一个子网格，并在父网格中嵌入行中的图标上提供展开和收缩子网格的的链接。

教程

步骤 1: 引入必要的资源文件

为了使用EasyUI的折叠表格和detailview，我们需要引入相关的资源文件。可以通过CDN引入或者下载到本地并引入。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.22/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.22/themes/icon.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui@1.9.22/jquery.easyui.min.js"></script>

步骤 2: 创建 HTML 和 JavaScript 代码

在HTML中，我们需要添加一个EasyUI数据网格，同时为需要在detailview中显示的列添加formatter函数。

<table id="dg" class="easyui-datagrid" style="height:400px"
       url="datagrid_data1.json"
       title="DataGrid"
       toolbar="#toolbar"
       pagination="true"
       rownumbers="true"
       fitColumns="true"
       singleSelect="true">
    <thead>
        <tr>
            <th field="itemid" width="50">Item ID</th>
            <th field="productid" width="50">Product ID</th>
            <th field="listprice" width="50" formatter="priceFormatter">List Price</th>
            <th field="unitcost" width="50" formatter="priceFormatter">Unit Cost</th>
            <th field="attr1" width="100">Attribute</th>
            <th field="status" width="50" formatter="statusFormatter">Status</th>
        </tr>
    </thead>
</table>

在这个例子中，我们为List Price和Unit Cost这两列添加了formatter函数。这个函数将数值显示成货币的格式（例如: $1,000.00）。

为了添加detailview，我们需要在JavaScript代码中配置datagrid的options，并提供detailview的模板（即子表数据）。

$('#dg').datagrid({
    view: detailview,
    detailFormatter: function(index,row){
        return '<div style="padding:2px"><table class="ddv"></table></div>';
    },
    onExpandRow: function(index,row){
        var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
        ddv.datagrid({
            url:'datagrid_data2.json',
            fitColumns:true,
            singleSelect:true,
            rownumbers:true,
            loadMsg:'',
            height:'auto',
            columns:[[
                {field:'orderid',title:'Order ID',width:100},
                {field:'shipname',title:'Name',width:100},
                {field:'shiptime',title:'Shipped Da',
                 width:150,align:'right'}
            ]],
            onResize:function(){
                $('#dg').datagrid('fixDetailRowHeight',index);
            },
            onLoadSuccess:function(){
                setTimeout(function(){
                    $('#dg').datagrid('fixDetailRowHeight',index);
                },0);
            }
        });
        $('#dg').datagrid('fixDetailRowHeight',index);
    }
});

在这个例子中，我们设置了onExpandRow事件来加载并显示子网格。（举个例子）当用户展开一个行时，数据从异步加载的datagrid_data2.json 文件中返回。另外，onResize和onLoadSuccess事件也被绑定到了子网格中。onResize事件确保子网格具有正确的大小，而onLoadSuccess事件确保网格在加载后立即正确显示。

步骤 3: 完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.22/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.22/themes/icon.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui@1.9.22/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        var detailview = $.extend({}, $.fn.datagrid.defaults.view, {
            renderRow: function (target, fields, frozen, rowIndex, rowData) {
                var cc = [];
                cc.push('<tr class="datagrid-row-detail">');
                if (!frozen) {
                    cc.push('<td colspan="' + fields.length + '">');
                    cc.push('<div style="padding:5px 0;border-bottom:1px solid #ccc">');
                    cc.push('<table class="ddv"></table>');
                    cc.push('</div>');
                    cc.push('</td>');
                }
                cc.push('</tr>');
                return cc.join('');
            },
            onAfterRender: function (target) {
                $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
                var opts = $(target).datagrid('options');
                if (!opts.addonBody) {
                    return;
                }
                if (opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length > 0)) {
                    return;
                }
                var tr = opts.finder.getTr(target, '', 'view', 2);
                var table = tr.parent().parent().parent();
                var tc = $('<td colspan="' + (opts.frozenColumns.length) + '"></td>').insertBefore(tr.children(':first'));
                var div = $('<div class="datagrid-view2-addon"></div>').html(opts.addonBody).appendTo(tc);
                setTimeout(function () {
                    div.triggerHandler('_resize');
                }, 0);
            },
            onBeforeRender: function (target) {
                var opts = $(target).datagrid('options');
                var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
                opts.addonBody = null;
                if (opts.addonView && vc.children('style').length == 0) {
                    vc.prepend('<style>' + opts.addonView + '</style>');
                }
            },
            onDestroy: function () {
                var opts = $(this).datagrid('options');
                if (opts.addonView) {
                    var vc = $(this).datagrid('getPanel').children('div.datagrid-view');
                    vc.children('style').remove();
                }
            }
        });

        function priceFormatter(value,row,index){
            return '$' + value.toFixed(2);
        }

        function statusFormatter(value,row,index){
            if (value == 'P'){
                return '<span style="color:green">Processed</span>';
            } else if (value == 'D'){
                return '<span style="color:red">Discontinued</span>';
            }
            return value;
        }

        $(function(){
            $('#dg').datagrid({
                view: detailview,
                detailFormatter: function(index,row){
                    return '<div style="padding:2px"><table class="ddv"></table></div>';
                },
                onExpandRow: function(index,row){
                    var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                    ddv.datagrid({
                        url:'datagrid_data2.json',
                        fitColumns:true,
                        singleSelect:true,
                        rownumbers:true,
                        loadMsg:'',
                        height:'auto',
                        columns:[[
                            {field:'orderid',title:'Order ID',width:100},
                            {field:'shipname',title:'Name',width:100},
                            {field:'shiptime',title:'Shipped Da',width:150,align:'right'}
                        ]],
                        onResize:function(){
                            $('#dg').datagrid('fixDetailRowHeight',index);
                        },
                        onLoadSuccess:function(){
                            setTimeout(function(){
                                $('#dg').datagrid('fixDetailRowHeight',index);
                            },0);
                        }
                    });
                    $('#dg').datagrid('fixDetailRowHeight',index);
                }
            });
        });
    </script>
</head>
<body>
<div>
    <table id="dg" class="easyui-datagrid" style="height:400px"
           url="datagrid_data1.json"
           title="DataGrid"
           toolbar="#toolbar"
           pagination="true"
           rownumbers="true"
           fitColumns="true"
           singleSelect="true">
        <thead>
        <tr>
            <th field="itemid" width="50">Item ID</th>
            <th field="productid" width="50">Product ID</th>
            <th field="listprice" width="50" formatter="priceFormatter">List Price</th>
            <th field="unitcost" width="50" formatter="priceFormatter">Unit Cost</th>
            <th field="attr1" width="100">Attribute</th>
            <th field="status" width="50" formatter="statusFormatter">Status</th>
        </tr>
        </thead>
    </table>
</div>
</body>
</html>

这个例子将显示一个简单的datagrid，当用户点击一个行时，子网格将在该行下显示。子网格中将显示另一个数据文件 datagrid_data2.json 的内容，并且在每列的末尾都会显示一个详细信息链接。

步骤 4: 示例说明

我们代码的使用了两个例子：

在源码 example1.html 文件中，会通过 Ajax 方式从后端获取数据，并在 EasyUI 表格中展示出来，用户点击"+"展开折叠表格，然后展示子表格的详细信息。
在 example2.html 文件中，使用静态Json数据，在EasyUI 表格中展示带detailview的折叠表格，使用detailview来展示更多信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：EasyUI折叠表格层次显示detailview详解及实例 - Python技术站

EasyUI折叠表格层次显示detailview详解及实例

EasyUI折叠表格层次显示detailview详解及实例

介绍

教程

步骤 1: 引入必要的资源文件

步骤 2: 创建 HTML 和 JavaScript 代码

步骤 3: 完整代码

步骤 4: 示例说明

相关文章