前端手册

前端组件

若依封装了一些常用的JS组件方法。

通用方法

支持属性

表格使用

表格组件基于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="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
             <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(''));
  }

弹层使用

弹层组件目前基于layer组件进行封装,提供了弹出、消息、提示、确认、遮罩处理等功能。

• 提供成功、警告和错误等反馈信息

  $.modal.msg("默认反馈");
  $.modal.msgError("错误反馈");
  $.modal.msgSuccess("成功反馈");
  $.modal.msgWarning("警告反馈");

• 提供成功、警告和错误等提示信息

  $.modal.alert("默认提示");
  $.modal.alertError("错误提示");
  $.modal.alertSuccess("成功提示");
  $.modal.alertWarning("警告提示");
  $.modal.confirm("确认信息", function() {});

• 提供弹出层信息

  // title 标题 url 请求链接 width 宽度 height 高度 options 选项
  $.modal.open(title, url, width, height);
  $.modal.openTab(title, url);
  $.modal.openOptions(options);
  $.modal.openFull(title, url, width, height);
  $.modal.close();
  $.modal.closeAll();
  $.modal.reload();

• 提供遮罩层信息

  $.modal.loading("正在导出数据，请稍后...");
  $.modal.closeLoading();

权限使用

使用thymeleaf模板整合了shiro标签 - 界面可以直接使用。（此处简单介绍两个，更多请参考官方文档）

<a href="#" shiro:hasPermission="system:user:add">包含权限字符串才能看到</a>
<a href="#" shiro:hasRole="admin">管理员才能看到</a>

如果需要在JS中使用权限，使用封装方法

var addFlag = [[${@permission.hasPermi('system:user:add')}]];
<a class="btn btn-success btn-xs ' + editFlag + '">包含权限字符串才能看到</a>

字典使用

配置好相关的数据字典信息即可正常使用（系统管理-字典管理）

<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
  <option value="">所有</option>
  <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}">
  </option>
</select>

如果在想Table表格数据使用字典，使用formatter格式化

// 获取数据字典数据
var datas = [[${@dict.getType('sys_normal_disable')}]];


// 格式化数据字典
formatter: function(value, row, index) {
    return $.table.selectDictLabel(datas, value);
}

参数使用

配置好相关的参数信息即可正常使用（系统管理-参数管理）

<body th:classappend="${@config.getKey('sys.index.skinName')}">

如果需要在JS中使用参数，使用封装方法

var skinName = [[${@config.getKey('sys.index.skinName')}]];
$("#id").val(skinName);