若依框架 --- ruoyi 表格的设置

た入场券 2023-09-25 18:43 83阅读 0赞

**表格**

字典值转换

(1) 方式1：使用字典枚举的方式

var isDownload = [[${@dict.getType('YES_OR_NO')}]];
    
    {
        field : 'isDownload',
        title : '是否允许下载',
          formatter: function(value, row, index) {
            return $.table.selectDictLabel(isDownload, value);
          }
    },

(2) 方式2：自定义方法处理，在自定义方法中根据输入值返回指定内容

{
        field: 'cacheSync',
        title: '缓存同步结果',
          formatter: function (value, row, index) {
            return cacheSyncLabel(value);
          }
    },
      
    function cacheSyncLabel(value){
    
        return xxx;
    }

**表格 设置单选/多选**

单选/多选通过首列属性控制:

var options = {
        url: prefix + "/list",
        clickToSelect:true,		//行选中模式
        columns: [{
            radio: true		//单选
            //checkbox: true		//多选
        },{
            xxx
        }]
    }

**表格 添加 tooltips**

表格自带 tooltips 功能，如下方式使用：

{
      field: 'aliasName',
      title: '别名',
      formatter:function(value,row,index){
        return $.table.tooltip(value);
      }
    },

> 但是自带的 tooltips 显示可能存在下面的问题:
> 
> 1.纯英文/纯数字 显示不全问题: [gitee.com/y\_project/R…][gitee.com_y_project_R]
> 
> 2.设置展示宽度：[gitee.com/y\_project/R…][gitee.com_y_project_R 1]
> 
> 3.无法换行：[gitee.com/y\_project/R…][gitee.com_y_project_R 2]

**表格 内容自动换行**

设置不自动换行：[gitee.com/y\_project/R…][gitee.com_y_project_R 3]

**表格 对特定内容行添加背景色**

在需要添加背景色的单元格上，添加如下代码即可。但是下面的代码只能控制单个单元格变色，如果想要整行都变色，则需要每个列上都添加。

{
        field : 'startTime',
        title : '开始时间',
        cellStyle: function(value, row, index) {
            var date = Date.now()
            if((row.startTime < date)){
                return {css:{"background-color": "#CAFFFF"}};
            }else{
                return {css:{"background-color": "#FFFFFF"}};
            }
        }
    },

**表格 获取选中行的整行数据**

很奇怪的是，若依中没有提供获取整行数据的这个功能，不过可以自己修改源码，添加一个。参考：[blog.csdn.net/qq\_34854237…][blog.csdn.net_qq_34854237]

在 ry-ui.js 源码中，自己添加方法如下：因为可能选中多行，所以返回的是 row\[\] 数组。

// 查询表格指定行
    selectRow: function() {
      var rows = $.map($("#" + table.options.id).bootstrapTable('getSelections'), function (row) {
        return row;
      });
      return rows;
    },

然后在代码中使用：

// 获取所有选中的行
    var rows = $.table.selectRow();

**表格 指定字段添加详情超链接**

实现功能：直接点击标题即可以进入详情页。

代码如下：

{
        field : 'title',
        title : '标题',
        formatter: function (value, row, index) {
            var href = "";
            if (!!value) {
                href = '<a href="javascript:void(0);" onclick="openDetail('' + row.id + '')"';
                 href += ' >';
                 href += value;
                 href += '</a>';
            }
            return href;
        }
    },

当然了，点击方法 openDetail 还要自己去实现一下。

**表格 字段值添加徽章**

效果如下：

![e8f844b2d9a2421cb92f599cf275d26b.png][]

实现代码如下：手动进行判断

{
         field : 'baseinfoUpadte',
         title : '内容更新状态',
         formatter: function(value, row, index) {
             if (value == 1) {   // 已更新
                 return "<span class='badge badge-danger'>" + $.table.selectDictLabel(baseinfoUpadte, value) + "</span>";
             }
             return $.table.selectDictLabel(baseinfoUpadte, value);
         }
     },

**表格 默认查询添加查询条件**

如下方式，给表格的列表查询添加额外查询条件。

var options = {
        url: prefix + "/list",
        queryParams: queryParams,
        ...
    }
      
    function queryParams(params) {
        var search = $.table.queryParams(params);
        search.columnId = $("#columnId").val();
        search.datasetId = $("#datasetId").val();
        return search;
    }

**表格 按指定字段排序**

在需要排序的字段下添加 sortable: true 即可。

{
        field : 'startTime',
        title : '开始时间',
        sortable: true			// 该字段支持排序
    },

这样，点击排序时，发送的请求会携带排序字段参数，进行查询，非常方便。

**表格 表格行按条件默认选中 & 分页记录选中项**

如果需要，表格项按条件默认选中，且存在分页，则需要如下处理：

1.全端使用 set 维护所有被选中的记录

// 所有已经选中的, 接收数据
    var videoKeywordData = [[${checkVal}]]
    // 所有已经选中的, eg: 1-43289, 2-43527
    var set = new Set();
    // 所有已经选中的影片名字
    var nameSet = new Set();
    if(!!videoKeywordData){
      var arr = videoKeywordData.split(",");
      for(var i = 0; i < arr.length; i++){
        set.add(arr[i]);
      }
    }

2.表格上增加是否选中的判断，禁用全选

$(function() {
      var options = {
        url: prefix + "/videoList",
        modalName: "影片列表",
        clickToSelect:true,
        uniqueId: 'movieId', 
        rememberSelected: true,     // 分页记住所选项
        columns: [{
          field: 'state',     // 名字必须是这个
          checkbox: true,
          formatter: function (value, row, index) {
            // 自己根据条件判断是否需要被选中
            var key = row.vtype + "-" + row.movieNum;
            var flag = set.has(key);
            if(flag){
              nameSet.add(key + "," + row.movieTitle);
              return { checked : true };
            }
            return { checked : false };
          }
        },
        {
           field : 'movieNum',
           title : '影片编码'
        }]
      };
      $.table.init(options);
    
      // 禁止全选
      $("input[name='btSelectAll']").attr("type","hidden");	// 这种方式是不支持全选操作的，没办法处理全选，所以直接禁用
    });

3.添加选中/取消选中事件

// 取消选中
        $("#bootstrap-table").on("uncheck.bs.table uncheck-all.bs.table", function (e, rows) {
            if(rows.length > 0) {
                for (var index in rows) {
                    var key = rows.vtype + "-" + rows.movieNum;
                    set.delete(key);
                    nameSet.delete(key + "," + rows.movieTitle);
                }
            } else {
                var key = rows.vtype + "-" + rows.movieNum;
                set.delete(key);
                nameSet.delete(key + "," + rows.movieTitle);
            }
        });
        
        // 选中
        $("#bootstrap-table").on("check.bs.table check-all.bs.table", function (e, rows) {
            if(rows.length > 0) {
                for (var index in rows) {
                    var key = rows.vtype + "-" + rows.movieNum;
                    set.add(key);
                    nameSet.add(key + "," + rows.movieTitle);
                }
            } else {
                var key = rows.vtype + "-" + rows.movieNum;
                set.add(key);
                nameSet.add(key + "," + rows.movieTitle);
            }
        });

[gitee.com_y_project_R]: https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Fy_project%2FRuoYi%2Fissues%2FI1PXGB
[gitee.com_y_project_R 1]: https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Fy_project%2FRuoYi%2Fissues%2FI1W55P
[gitee.com_y_project_R 2]: https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Fy_project%2FRuoYi%2Fissues%2FI57LT9
[gitee.com_y_project_R 3]: https://link.juejin.cn/?target=https%3A%2F%2Fgitee.com%2Fy_project%2FRuoYi%2Fissues%2FI1PQX8
[blog.csdn.net_qq_34854237]: https://link.juejin.cn/?target=https%3A%2F%2Fblog.csdn.net%2Fqq_34854237%2Farticle%2Fdetails%2F106332862
[e8f844b2d9a2421cb92f599cf275d26b.png]: https://img-blog.csdnimg.cn/e8f844b2d9a2421cb92f599cf275d26b.png