表格使用

表格组件基于bootstrap table组件进行封装，轻松实现数据表格。

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

列的各项(Column options )

• 表单搜索 $.table.search

<a onclick="$.table.search();">搜索</a>

• 表格数据导出 $.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;">
  <div class="col-xs-offset-1">
      <input type="file" id="file" name="file"/>
      <div class="mt10 pt5">
          <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
           &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>
</form>

• 表格销毁 $.table.destroy

<a onclick="$.table.destroy();">销毁</a>

• 表格数据刷新 $.table.refresh

<a onclick="$.table.refresh();">刷新</a>

• 选择表格行具体列 $.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

{
  title: "序号",
  formatter: function (value, row, index) {
      return $.table.serialNumber(index);
  }
},

• 超出指定长度浮动提示（单击文本可复制） $.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);
  }
},

• 下拉按钮切换 $.table.dropdownToggle

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

{
  field: 'avatar',
  title: '用户头像',
  formatter: function(value, row, index) {
      return $.table.imageView(value);
  }
},