您的位置:首页 > 产品设计 > UI/UE

easyui------显示隐藏列功能

2015-08-19 22:31 1636 查看
  1. 先看看实现的效果是怎样的

  2. 建立一个对话框和对应按钮的操作代码

    $dialog_showColumnDialog.dialog({
        closed: true,
        onOpen: function () {
            var columnFields = $wageGrid.datagrid("getColumnFields");
            var columnDefineArray = [];
            var checkedRow = [];
            $.each(columnFields, function (i, columnField) {
                var fieldOptions = $wageGrid.datagrid("getColumnOption", columnField);
                fieldOptions.text = fieldOptions.title;
                fieldOptions.value = columnField;
                if (!fieldOptions.hidden) {
                    checkedRow.push(i);
                }
                columnDefineArray.push(fieldOptions);
            });
            $datalist_columnShow.datalist({
                lines: true,
                checkbox: true,
                selectOnCheck: false,
                singleSelect: false,
                data: columnDefineArray,
                onLoadSuccess: function () {
                    $.each(checkedRow, function (i, rowIndex) {
                        $datalist_columnShow.datalist("checkRow", rowIndex);
                    });
                }
            });
        },
        buttons: [{
            text: "全选",
            handler: function () {
                $datalist_columnShow.datalist("checkAll");
            }
        }, {
            text: "全不选",
            handler: function () {
                $datalist_columnShow.datalist("clearChecked");
            }
        }, {
            text: "确定",
            handler: function () {
                var checkedDataArray = $datalist_columnShow.datalist("getChecked");
                var showColumns = [];
                $.each(checkedDataArray, function (i, checkedData) {
                    showColumns.push(checkedData.value);
                });
                var columnFields = $wageGrid.datagrid("getColumnFields");
                var hideColumn = [];
                $.each(columnFields, function (i, columnField) {
                    if ($.inArray(columnField, showColumns) != -1) {
                        $wageGrid.datagrid("showColumn", columnField);
                    } else {
                        hideColumn.push(columnField);
                        $wageGrid.datagrid("hideColumn", columnField);
                    }
                });
                $.ProjectUtils.saveLayout("wageNoTaxTable", $("#companyId").val(), {
                    hidden: hideColumn,
                    show: showColumns
                });
                $dialog_showColumnDialog.dialog("close");
            }
        }, {
            text: "关闭",
            handler: function () {
                $dialog_showColumnDialog.dialog("close");
            }
        }]
    });
  3. 数据库定义

    package com.sys.entity.sys;
    
    import com.sys.common.entity.BaseEntity;
    import com.sys.common.repository.support.annotation.EnableQueryCache;
    import org.hibernate.annotations.Cache;
    import org.hibernate.annotations.CacheConcurrencyStrategy;
    
    import javax.persistence.Entity;
    import javax.persistence.Table;
    
    @Entity
    @Table(name = "sys_grid_layout")
    @EnableQueryCache
    @Cache(usage = CacheConcurrencyStrategy.READ_WRITE)
    public class GridLayout extends BaseEntity<Long> {
    
        private String gridId;
    
        private Long businessId;
    
        private String columnOptions;
    
        public void setGridId(String gridId) {
            this.gridId = gridId;
        }
    
        public String getGridId() {
            return gridId;
        }
    
        public void setBusinessId(Long businessId) {
            this.businessId = businessId;
        }
    
        public Long getBusinessId() {
            return businessId;
        }
    
        public void setColumnOptions(String columnOptions) {
            this.columnOptions = columnOptions;
        }
    
        public String getColumnOptions() {
            return columnOptions;
        }
    }
  4. controller定义保存和加载显示列方法

    @RequestMapping("save")
    public AjaxResponseMessage saveLayout(GridLayout gridLayout) {
        GridLayout dbGridLayout = gridLayoutService.findByGridIdAndBusinessId(gridLayout.getGridId(),
                gridLayout.getBusinessId());
        if (dbGridLayout.getId() == null) {
            gridLayoutService.save(gridLayout);
        } else {
            dbGridLayout.setColumnOptions(gridLayout.getColumnOptions());
            gridLayoutService.update(dbGridLayout);
        }
        return AjaxResponseMessage.getSuccessed();
    }
    
    @RequestMapping("{gridId}")
    public String loadGridLayout(@PathVariable("gridId") String gridId,
                                 @RequestParam("businessId") Long businessId) {
        return gridLayoutService.findByGridIdAndBusinessId(gridId, businessId).getColumnOptions();
    }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  easyui web前端