表格
字典值转换
(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 = '<a href="javascript:void(0);" onclick="openDetail('' + row.id + '')"'; href += ' >'; href += value; href += '</a>'; } return href; } },
当然了，点击方法 openDetail 还要自己去实现一下。
表格 字段值添加徽章
效果如下：
实现代码如下：手动进行判断
{ 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); } });
