EasyUI中数据表格的常见用法

最新推荐文章于 2024-08-27 12:58:20 发布

追梦111

最新推荐文章于 2024-08-27 12:58:20 发布

阅读量2.3k

点赞数

文章标签： EasyUI DataGrid

本文链接：https://blog.csdn.net/yangkaige111/article/details/80288815

版权

本文介绍了EasyUI数据表格的两种常见功能：表格的嵌套显示和表头多行配置。对于嵌套显示，需要引入特定JS文件，并通过`datagrid`和`onRowClick`事件实现。表头多行显示则通过`columns`属性的特殊格式实现，如`[[...]]`，可扩展行和列。`frozenColumns`属性用于固定列在左侧。

摘要由CSDN通过智能技术生成

本文不会说得太多，在这里主要阐述一下EasyUI中数据表格的一些常见功能，主要有两点：表格的嵌套显示和表头多行显示的配置。
1、表格的嵌套显示
在使用这个功能时，我们还要引用一个js文件，datagrid-detailview.js这个文件可以到它的官网上下载，下面是我们一个项目中所用的相关代码片断：

page.app_Grid = $('#approveGrid').datagrid({
        idField: 'id',
        singleSelect: true,
        striped: true,
        columns: [cols],
        remoteSort: false,
        sortOrder: 'asc',
        nowrap: false,
        width: 'auto',
        resizable: true,
        maxHeight: $(window).height() - $('.toolbar').height(),
        rownumbers: true,
        view: detailview,
        onExpandRow: function(index, row) {
   
            var cols = [{
                title: '序号',
                field: 'SEQ_ID',
                align: 'center',
                type: 'text',
                hidden: true,
                width: 60
            }, {
                title: '送审编号',
                field: 'APPROVE_NO',
                align: 'center',
                type: 'text',
                width: 145
            }, {
                title: '送审序号',
                field: 'APPROVE_SEQ',
                align: 'center',
                type: 'text',
                width: 100
            }, {
                title: '年审类别',
                field: 'APPROVE_TYPE',
                align: 'center',
                type: 'text',
                width: 100
            }, {
                title: '送审项目',
                field: 'APPROVE_DETAIL',
                align: 'center',
                type: 'text