zoukankan      html  css  js  c++  java
  • easyUi的dataGrid动态改变列、列标题等

    easyUi的dataGrid动态改变列、列标题等。

    参考官方文档:http://www.jeasyui.net/tutorial/27.html,其中说明:“请记住,我们已经定义了其他属性,比如:url、width、height 等等。我们不需要再一次定义它们,我们定义那些我们需要改变的。”

    实际代码:

    function initList() {
        //初始化表格
        $('#matList').datagrid({
            height: 300,
            url: '', 
            idField: 'sID',
            striped: true,
            fitColumns: true,
            singleSelect: false,
            rownumbers: true,
            pagination: false,
            nowrap: false,
            showFooter: true,
            columns: [
                getColumns()
            ],
            toolbar: [
                {
                    text: '选择项目',
                    iconCls: 'icon-add',
                    handler: handlerAdd
                }
                ,
                {
                    text: '确认选择',
                    iconCls: 'icon-edit',
                    handler: handlerAccept
                },
                {
                    text: "清空表格",
                    iconCls: "icon-cancel",
                    handler: function () { $('#matList').datagrid('loadData', { total: 0, rows: [] }); }
                }
            ],
            onBeforeLoad: function (param) {
            },
            onLoadSuccess: function (data) {
            },
            onLoadError: function () {
            },
            onClickCell: function (rowIndex, field, value) {
                onClickCell(rowIndex, field);
            }
        });
    }
    //
    function getColumns() {
        var cols =
        [
            { field: 'ID', title: '子项ID',  90, hidden: true },
            { field: 'sItemID', title: '商品编号',  90, hidden: true },
            { field: 'sItemIDName', title: '商品名称',  90, align: 'left' },
            { field: 'sUnit', title: '规格',  50, align: 'left' },
            { field: 'sUnitName', title: '单位',  50, align: 'left' },
            {   //仓库编号列,标题从业务类型中读取,数据来自数据集
                field: 'sStore', title: getStoreCaption(),  90, align: 'left',
                editor: {
                    type: 'combobox',
                    editable: false,
                    options: {
                        valueField: 'sID',
                        textField: 'sName',
                        data: storeComboboxDatasource
                    }
                },
                formatter: function (value, row, index) {
                    for (var i = 0; i < storeComboboxDatasource.length; i++) {
                        if (storeComboboxDatasource[i].sID == value) {
                            return storeComboboxDatasource[i].sName;
                        }
                    }
                    return row["sStore"];
                }
            },
            {
                field: 'nCount', title: '数量',  50, align: 'left',
                editor: {
                    type: 'numberbox',
                    options: {
                        min: 0,
                        precision: 2
                    }
                }
            },
            {
                field: 'nPrice', title: '单价',  50, align: 'right', editor: {
                    type: 'numberbox',
                    options: {
                        min: 0,
                        precision: 2
                    }
                }
            },
    
            {
                field: 'nAgio', title: '优惠金额',  50, align: 'right', editor: {
                    type: 'numberbox',
                    options: {
                        min: 0,
                        precision: 2
                    }
                }
            },
            { field: 'nMoney', title: '金额',  50, align: 'right' },
            {
                field: 'op', title: '操作',  80, align: 'left', formatter: function (value, row, index) {
                    return "<a style='color:blue;cursor:pointer' onclick='javascript:removeMaterialRow(" + index + ");'>移除</a>";
                }
            }
        ];
        return cols;
    }
    function getStoreCaption() {
        var s = "";
        if (workTable != null) s = workTable.sStorerCaption;
        if (s == null || s == "") return "仓库";
        return s;
    }
  • 相关阅读:
    css 实现换肤几种方式
    vue 使用中的小技巧 (一)
    GitLab集成Jenkins、Harborn构建pipeline流水线任务
    GitLab数据迁移
    Jenkins更换国内插件源以及Jenkins更新(Jenkins部署在Docker中)
    docker-compose安装JenKins
    docker-compose安装Nexus
    docker-compose安装GitLab
    安装Harbor并修改默认使用的80端口
    在CentOS7.5中基于docker-compose安装mysql5.7
  • 原文地址:https://www.cnblogs.com/HaiHong/p/10088186.html
Copyright © 2011-2022 走看看