前端手册 - 表格使用 - 《若依开发文档》

表格初始化 $.table.init表的各项(Table options )

列的各项(Column options )

参数	类型	默认值	描述
radio	Boolean	false	默认false不显示radio（单选按钮），设为true则显示，radio宽度是固定的
checkbox	Boolean	false	默认false不显示checkbox（复选框），设为true则显示，checkbox的每列宽度已固定
field	String	Null	是每列的字段名，不是表头所显示的名字，通过这个字段名可以给其赋值，相当于key，表内唯一
title	String	Null	这个是表头所显示的名字，不唯一，如果你喜欢，可以把所有表头都设为相同的名字
titleTooltip	String	true	当悬浮在某控件上，出现提示 - 参考 Bootstrap 提示工具（Tooltip）插件
class	boolean	false	表格列样式
rowspan	Number	true	每格所占的行数
colspan	Number	true	每格所占的列数
align	String	true	每格内数据的对齐方式，有：left（靠左）、right（靠右）、center（居中）
halign	String	true	table header（表头）的对齐方式，有：left（靠左）、right（靠右）、center（居中）
falign	String	true	table footer（表脚，的对齐方式，有：left（靠左）、right（靠右）、center（居中）
valign	String	true	每格数据的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）
width	Number	Null	每列的宽度。如果没有自定义宽度自适应
sortable	Boolean	false	默认false就默认显示，设为true则会被排序
order	String	asc	默认的排序方式为"asc（升序）"，也可以设为"desc（降序）"。
visible	Boolean	true	默认为true显示该列，设为false则隐藏该列
cardVisible	Boolean	true	默认为true显示该列，设为false则隐藏。
switchable	Boolean	true	默认为true显示该列，设为false则禁用列项目的选项卡。
clickToSelect	Boolean	true	默认true不响应，设为false则当点击此行的某处时，不会自动选中此行的checkbox（复选框）或radiobox（单选按钮）
formatter	Function	Null	某格的数据转换函数，需要三个参数： -value： field（字段名） -row：行的数据 -index：行的（索引）index
footerFormatter	Function	Null	某格的数据转换函数，需要一个参数： -data：所有行数据的数组函数需要返回（return）footer某格内所要显示的字符串的格式
events	Object	Null	当某格使用formatter函数时，事件监听会响应，需要四个参数： -event：-value：字段名 -row：行数据 -index：此行的index
sorter	Function	Null	自定义的排序函数，实现本地排序，需要两个参数： - a：第一个字段名 - b：第二个字段名
sortName	String	Null	排序列名称
cellStyle	Function	Null	对某列中显示样式改变
searchable	Boolean	true	默认true，表示此列数据可被查询
searchFormatter	Boolean	true	默认true，可使用格式化的数据查询
escape	Boolean	false	是否转义HTML字符串

表单搜索 $.table.search

表格数据导出 $.table.exportExcel

<a onclick="$.table.exportExcel();">导出</a>

数据模板下载 $.table.importTemplate

<a onclick="$.table.importTemplate();">下载模板</a>

表格数据导入 $.table.importExcel

<a onclick="$.table.importExcel();">导入</a>
<form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none;">
      <input type="file" id="file" name="file"/>
      <div class="mt10 pt5">
           &nbsp;    <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
      </div>
      <font color="red" class="pull-left mt10">
          提示：仅允许导入“xls”或“xlsx”格式文件！
      </font>
  </div>

表格销毁 $.table.destroy

表格数据刷新 $.table.refresh

选择表格行具体列 $.table.selectColumns

var loginName = $.table.selectColumns("loginName");

选择表格行首列 $.table.selectFirstColumns

var firstColumn = $.table.selectFirstColumns();

显示表格特定的列 $.table.showColumn

$.table.showColumn("userName");

隐藏表格特定的列 $.table.hideColumn

$.table.hideColumn("userName");

序列号生成 $.table.serialNumber

超出指定长度浮动提示（单击文本可复制） $.table.tooltip

{
  field: 'remark',
  title: '备注',
  align: 'center',
  formatter: function(value, row, index) {
      return $.table.tooltip(value);
  }
},

回显数据字典 $.table.selectDictLabel

var datas = [[${@dict.getType('sys_common_status')}]];
{
  field: 'status',
  title: '用户状态',
  align: 'center',
  formatter: function(value, row, index) {
      return $.table.selectDictLabel(datas, value);
  }
},

formatter: function(value, row, index) {
  var actions = [];
  actions.push('<a class="' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.deptId + '\')"><i class="fa fa-edit"></i>编辑</a>');
  actions.push('<a class="' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.deptId + '\')"><i class="fa fa-trash"></i>删除</a>');
  actions.push('<a class="' + addFlag + '" href="#" onclick="$.operate.add(\'' + row.deptId + '\')"><i class="fa fa-plus"></i>添加下级部门</a>');
  return $.table.dropdownToggle(actions.join(''));
}

图片预览 $.table.imageView