前端組件

若依封裝了一些常用的JS組件方法。

通用方法

支持屬性

表格使用

表格組件基于bootstrap table組件進(jìn)行封裝，輕松實(shí)現(xiàn)數(shù)據(jù)表格。

• 表格初始化 $.table.init

表的各項(xiàng)(Table options )

列的各項(xiàng)(Column options )

• 表單搜索 $.table.search

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

• 表格數(shù)據(jù)導(dǎo)出 $.table.exportExcel

  <a onclick="$.table.exportExcel();">導(dǎo)出</a>

• 數(shù)據(jù)模板下載 $.table.importTemplate

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

• 表格數(shù)據(jù)導(dǎo)入 $.table.importExcel

  <a onclick="$.table.importExcel();">導(dǎo)入</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="如果登錄賬戶已經(jīng)存在，更新這條數(shù)據(jù)。"> 是否更新已經(jīng)存在的用戶數(shù)據(jù)
             <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">
          提示：僅允許導(dǎo)入“xls”或“xlsx”格式文件！
      </font>
  </div>
  </form>

• 表格銷毀 $.table.destroy

  <a onclick="$.table.destroy();">銷毀</a>

• 表格數(shù)據(jù)刷新 $.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");

• 序列號(hào)生成 $.table.serialNumber

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

• 超出指定長(zhǎng)度浮動(dòng)提示 $.table.tooltip

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

• 回顯數(shù)據(jù)字典 $.table.selectDictLabel

  var datas = [[${@dict.getType('sys_common_status')}]];
  {
  field: 'status',
  title: '用戶狀態(tài)',
  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>添加下級(jí)部門</a>');
  return $.table.dropdownToggle(actions.join(''));
  }

彈層使用

彈層組件目前基于layer組件進(jìn)行封裝,提供了彈出、消息、提示、確認(rèn)、遮罩處理等功能。

• 提供成功、警告和錯(cuò)誤等反饋信息

  $.modal.msg("默認(rèn)反饋");
  $.modal.msgError("錯(cuò)誤反饋");
  $.modal.msgSuccess("成功反饋");
  $.modal.msgWarning("警告反饋");

• 提供成功、警告和錯(cuò)誤等提示信息

  $.modal.alert("默認(rèn)提示");
  $.modal.alertError("錯(cuò)誤提示");
  $.modal.alertSuccess("成功提示");
  $.modal.alertWarning("警告提示");
  $.modal.confirm("確認(rèn)信息", function() {});

• 提供彈出層信息

  // title 標(biāo)題 url 請(qǐng)求鏈接 width 寬度 height 高度 options 選項(xiàng)
  $.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("正在導(dǎo)出數(shù)據(jù)，請(qǐng)稍后...");
  $.modal.closeLoading();

權(quán)限使用

使用thymeleaf模板整合了shiro標(biāo)簽 - 界面可以直接使用。（此處簡(jiǎn)單介紹兩個(gè)，更多請(qǐng)參考官方文檔）

<a href="#" shiro:hasPermission="system:user:add">包含權(quán)限字符串才能看到</a>
<a href="#" shiro:hasRole="admin">管理員才能看到</a>

如果需要在JS中使用權(quán)限，使用封裝方法

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

字典使用

配置好相關(guān)的數(shù)據(jù)字典信息即可正常使用（系統(tǒng)管理-字典管理）

<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表格數(shù)據(jù)使用字典，使用formatter格式化

// 獲取數(shù)據(jù)字典數(shù)據(jù)
var datas = [[${@dict.getType('sys_normal_disable')}]];


// 格式化數(shù)據(jù)字典
formatter: function(value, row, index) {
    return $.table.selectDictLabel(datas, value);
}

參數(shù)使用

配置好相關(guān)的參數(shù)信息即可正常使用（系統(tǒng)管理-參數(shù)管理）

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

如果需要在JS中使用參數(shù)，使用封裝方法

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