表格

字典值转换

(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…

2.设置展示宽度:gitee.com/y_project/R…

3.无法换行:gitee.com/y_project/R…

表格 内容自动换行

设置不自动换行:gitee.com/y_project/R…

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

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

{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…

在 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 = ''; href += value; href += '';}return href;}},

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

表格 字段值添加徽章

效果如下:

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

 { field : 'baseinfoUpadte', title : '内容更新状态', formatter: function(value, row, index) { if (value == 1) { // 已更新 return "" + $.table.selectDictLabel(baseinfoUpadte, value) + ""; } 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-43527var 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);}});