EasyUI datagrid-detailview

MessageDigest.getInstance

于 2022-09-28 15:36:07 发布

阅读量572

点赞数

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/qq_43710927/article/details/127088934

版权

本文档介绍了如何使用EasyUI实现datagrid-detailview功能，包括引入js/css资源、html结构设置和js初始化。详细讲解了detailFormatter函数的使用，以及onExpandRow事件处理，动态加载子表格的方法。参考了jQuery EasyUI DataGrid View的相关资料。

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

效果展示

官方文档：Easyui 数据网格视图（DataGrid View）_Easyui扩展

一、引入相关js/css

依次引入

jqery的js

easyUI的js

easyUI的css

最后引入

datagrid-detailview.js（文档中有下载地址）

二、html部分

<div class="table-box" id="print" style="left: 0;margin-top: auto">
            <div id="tableList" style="margin-right: 0px">
            </div>
</div>

三、js初始化datagrid-detailview

function pageList() {
        var ccl = [[
            {field: "check", checkbox: "true"},
            /*{
                field: 'batchNo',
                width: 80,
                align: 'center',
                title: '序号',
                editor: {type: "text"},
            },*/
            {
                field: 'centralizedName',
                width: 150,
                align: 'center',
                title: '集采事项名称',
                editor: {type: "text"},
            },
            {
                field: 'modeFlag',
                width: 120,
                align: 'center',
                title: '模式',
                editor: {
                    type: 'combobox', options: {
                        editable: false, prompt: '请选择...',
                        valueField: 'value',
                        textField: 'label',
                        data: [
                            {label: '公司', value: '0'},
                            {label: '生产', value: '1'},
                            {label: '基建', value: '2'}
                        ]
                    }
                },
                formatter: function  (value, row, index) {
                    if (value === '0') {
                        return "公司"
                    }
                    if (value === '1') {
                        return "生产"
                    }
                    if(value === '2') {
                        return "基建"
                    }
                }
            },
            {
                field: 'ifFrameAgreementProject',
                width: 150,
                align: 'center',
                title: '是否框架协议',