js使用miniUI和easyui创建datagrid_miniui 动态创建表格-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35731738/article/details/83374762

本文详细介绍了如何利用JavaScript库miniUI和easyUI创建数据网格（datagrid）。通过实例展示，分别阐述了miniUI和easyUI创建datagrid的具体步骤与实现效果。

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

miniUI方法：

 function DrugDataGridInt () {
        var columns = [
            { type: "indexcolumn" },
            { field: 'time', header: '时间', width: 200, align: 'left', visible: true ,dateFormat:'yyyy-MM'},
            { field: 'money', header: '金额', width: 200, headerAlign: 'left',autoescape:true ,visible: true},
            { field: 'remark', header: '名称', width: 250, headerAlign: 'left', autoescape: true,visible: true }
        ];

        var grid = mini.get("YourGridId");
        grid.set({
            url: basePath + '/mqpms/business_report/base_info/updateUI/ajaxListForContract.do?projectId=' + $('#projectId').val() + '&sessionId=' + _jsSessionId,
            sizeList: [50,100],
            pageSize: 50,
            columns: columns,
            allowAlternating: true, //显示间行色
            multiSelect: true,
            fitColumns: false, //使用过滤行必须设定这个全充满，否则会有列对齐问题。
            allowCellEdit: true,
            allowCellSelect: true,
            showFilterRow: false,
            showModified: false,
            allowMoveColumn: false});
        grid.load();
    }

miniUI页面：

 <div id="YourGridId" class="mini-datagrid" style="height: 100%; width: 100%;"></div>

easyUI方法：

    function loadContractTable() {
        $("#contract-list").datagrid({
            width: "auto",
            title: "信息",
            collapsible: true,
            rownumbers: true,
            halign: 'center',
            pagination: true,
            pageSize: 10,
            pageList: [20, 50, 100],
            method: 'post',
            singleSelect: false,
            fitColumns: false,//显示水平滚动条
            url: basePath + '/mqpms/business_report/base_info/updateUI/ajaxListForContract.do?projectId=' + $('#projectId').val() + '&sessionId=' + _jsSessionId,
            columns: [[
                {
                    field: "time",
                    title: "时间",
                    width: '120px',
                    align: 'left',
                    formatter: function (v) {
                        return common.dateTimeFormatter(v, "yyyy-MM");
                    }
                },
                {
                    field: "money",
                    title: "金额",
                    width: '120px'
                },
                {
                    field: "remark",
                    title: "备注",
                    width: '530px'
                }
            ]],
        });
        $('.contract-container .panel-header').remove();
    }

easyUI页面：

     <table id="contract-list" style="width: 100%;max-width: 800px;">
                        </table>