EasyUI Datagrid 数据网格

目录

JS方式创建数据网格的基础使用

 网格要展示的列：

1.返回一个html元素给单元格

2.根据数据去返回不同的内容

3.特定规则：比如金额的显示处理 

 限制数字的组件输入框链接：Easyui Numberbox 数字框_EasyUI 插件

 easyUI扩展方法之脚页显示

---

JS方式创建数据网格的基础使用

html

<div id="jt_detail"></div>

 

    //数据表格
    function tableList() {
        let jt_detail = $("#jt_detail");
        $('#jt_detail').datagrid({
            url: url,
            queryParams: {
                orderId: ${(info.orderId)?c},
            },
            columns: detailColumns,
            emptyMsg: '无数据',
            // onDblClickRow: doubleClickRow,
            showFooter: true,
            rownumbers: true,   //显示行号
            // nowrap:false,
            singleSelect: false,  //true为只允许选中一行
            striped: false, //奇数偶数行颜色不一样
            pagination: true,   //开启分页
            fitColumns: true,//宽度自适应
            nowrap: false,   //自动换行
            pageSize: 10,
            pageList: [10, 20, 30, 50],
            onClickCell: function (index) {
                    let $jtDetail = $('#jt_detail');
                    //获取所有的行
                    let row = jtDetail .datagrid('getRows')[index]
                    //获取当前行数据
                    jtDetail.datagrid('getRows')[index]
                    //开启行编辑
                    $jtDetail.datagrid('beginEdit', index);
                    }
                }

            },
            onLoadSuccess: function (data) {
                try {
                    //显示页脚
                    $('#jt_detail').datagridFooterEx($('#jt_detail').datagrid('getRows'))
                } catch (e) {
                }
                setTimeout(function () {
                    //加载成功后延迟器取自适应某个iframe的高度
                    $(window.parent.document.getElementById("order-frame")).css('height',         ($(".work_main").height() + 50) + "px");
                    $(window.parent.document.getElementById("java_order_frame")).css('height', ($(".work_main").height() + 50) + "px");
                }, 500)
            },
        });
    }

 网格要展示的列：

    let detailColumns= [[
        {
            field: 'seq',
            title: '编号',
            sortable: true,
            checkbox: true
        },
        {field: 'incomeCategories', title: '大类编码', width: 120, align: 'left', halign: 'center', hidden: true},
        {
            field: 'ordercode', title: '单据编号', width: 120, align: 'left', halign: 'center', formatter(value, row) {
                var html = '<a href="javaScript:void(0)" onclick="updateTable(\'' + row.orderId + '\')" class="tx_green">' + value + '