【EasyUI】DataGrid DetailView（数据表格详细展示）

最新推荐文章于 2019-09-08 09:57:32 发布

原创最新推荐文章于 2019-09-08 09:57:32 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

Easy-UI 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用EasyUI的DataGrid组件创建数据表格，并实现详细信息的展示。通过示例展示了从HTML页面搭建到数据表格配置的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

第一步：创建一个HTML页面

<head> 
    <script type="text/javascript" src="datagrid-detailview.js"></script> 
</head> 
<body> 
    <table id="tt"></table> 
</body>

第二步：创建数据表格

  $("#tt").datagrid({
                fit: true,
                title: 'DataGrid - DetailView', 
                border: false,
                url: '@Url.Action("Get")',
                striped: true,
                singleSelect: true,
                columns: [[
                      { title: 'ID', field: 'ID', halign: 'center', align: 'center', sortable: true, hidden: true }
		    , { title: '货品编号', field: 'goodsID', width: '20%', halign: 'center', align: 'center', sortable: true }
                    , { title: '价格', field: 'price', halign: 'center', width: '20%', align: 'center', sortable: true }
                    , { title: '库存阀值', field: 'threshold', halign: 'center', width: '20%', align: 'center', sortable: true }
                    , {title: '库存量', field: 'num', halign: 'center', width: '18%', align: 'center', sortable: true}		    
                    , { title: '总预购量', field: 'ygnum', halign: 'center', width: '18%', align: 'center', sortable: true},
                ]],
                view: detailview,
                detailFormatter: function (rowIndex, rowData) {
                    return '<div  style="height:300px;border:groove"><table class="tableOrderDetial"></table></div> ';
                },
                onExpandRow: function (index, row) {
                    var ddv = $(this).datagrid('getRowDetail', index).find('table.tableOrderDetial')
                    ddv.datagrid({
                        fit: true,
                        border: false,
                        url: '@Url.Action("showDetialByGoodsID")?goodsID=' + row.goodsID,
                striped: true,
                rownumbers: true,
                singleSelect: true,
                columns: [[
                     {
                         title: '样图', field: 'img', halign: 'center', width: '18%', align: 'center', sortable: true,formatter: function (value, rec) 
                            {//使用formatter格式化刷子
                                 return '<img src="./Images/fj.jpg" height="50" width="50"/>';
                             }
                     }
                    , { title: '颜色', field: 'colour', halign: 'center', width: '21%', align: 'center', sortable: true }
                    , { title: '尺寸', field: 'size', halign: 'center', width: '21%', align: 'center', sortable: true }
                    , { title: '订购人', field: 'principal', halign: 'center', width: '21%', align: 'center', sortable: true }
                    , { title: '订购量', field: 'num', halign: 'center', width: '20%', align: 'center', sortable: true }
                ]],
                pagination: true,
                pageSize: 10,
                pageList: [10, 20, 30],
                sortName: 'ID',
                sortOrder: 'desc',
             });
        }
            });