前端手冊

前端組件

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

通用方法

支持屬性

表格使用

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

• 表格初始化 $.table.init

表的各項(Table options )

列的各項(Column options )

• 表單搜索 $.table.search

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

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

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

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

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

• 表格數(shù)據(jù)導入 $.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="如果登錄賬戶已經(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">
          提示：僅允許導入“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");

• 序列號生成 $.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);
  }
  },

• 回顯數(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>添加下級部門</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("正在導出數(shù)據(jù)，請稍后...");
  $.modal.closeLoading();

權(quán)限使用

使用thymeleaf模板整合了shiro標簽 - 界面可以直接使用。（此處簡單介紹兩個，更多請參考官方文檔）

<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>

字典使用

配置好相關的數(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ù)使用

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

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

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

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