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

最新推荐文章于 2023-03-29 10:35:24 发布

转载最新推荐文章于 2023-03-29 10:35:24 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/luoyezhiqiu/blog/494805

文章标签：

#javascript #python #java #ViewUI

本文详细介绍了如何通过对话框和按钮操作实现 Wage Grid 的自定义列展示与存储功能，包括获取列选项、选择列、保存布局及加载布局等关键步骤。同时，阐述了相关数据库设计与控制器实现细节。

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

2019独角兽企业重金招聘Python工程师标准>>>

先看看实现的效果是怎样的

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

$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");
        }
    }]
});

数据库定义

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;
    }
}

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();
}

转载于:https://my.oschina.net/luoyezhiqiu/blog/494805