fsLayuiPlugin數據字典使用

概述

數據字典主要解決下拉框數據填充和數據表格轉義處理，一個數據字典能夠多處使用。
1.多個頁面下拉框使用一樣的數據，改一個地方須要把全部頁面都要修改
2.數據表格轉義代替本身手動寫 templet解析模板

數據字典提供一個通用的處理方式，支持配置靜態數據字典和動態數據字典，，數據字典文件地址plugins/frame/js/fsDict.js。

若是使用 數據字典，必須在 layui.js 後面引入數據字典文件 /plugins/frame/js/fsDict.js

<script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.0"></script>

靜態數據字典

靜態數據字典一般用於不會改變的數據，例如：文章狀態（有效，無效，發佈，審覈），用戶狀態（有效，無效，鎖定）

使用方法：

在layui.fsDict對象中，定義一個數據字典。

例如：定義一個城市的靜態數據字典

1. 配置城市數據字典名稱：city,city 是一個json對象
2. 配置數據字典屬性

layui.fsDict = {
    //城市
    city : {
      formatType : "local", //local 靜態數據字典
      labelField : "name", //展現數據的屬性
      valueField : "code", //value對應的屬性
      //靜態數據，數組
      data:[{"code":"0","name":"北京","style":"color:#F00;"},
        {"code":"1","name":"上海"},
        {"code":"2","name":"廣州"},
        {"code":"3","name":"深圳"},
        {"code":"4","name":"杭州"}
      ]
    }
  }

數據表格轉義引用數據字典

只須要在表格列中，配置數據字典信息 dict="city"

<p field="city" title="城市" width="100" dict="city"/>

數據表格轉義展現不一樣的樣式

若是表格須要對不一樣的信息展現不一樣的樣式，在數據 data中，定義 style或 css,能夠經過此方式對不一樣的數據進行不一樣樣式展現

下拉框引用數據字典

須要在select中配置css樣式 class="fsSelect"和字典配置 dict="city"

<select name="city" lay-verify="required"  lay-verType="tips" class="fsSelect" dict="city" addNull="1">
</select>

動態數據字典

動態數據字典使用場景比較多，例如省市區級聯等會改變的類型。
經過服務端異步請求加載數據列表。

使用方法：

在layui.fsDict對象中，定義一個數據字典。

例如：定義一個城市的靜態數據字典

1. 配置省份數據字典名稱：city,city 是一個json對象
2. 配置數據字典屬性

layui.fsDict = {
    //省份
    area1 : {
      formatType : "server", //server 動態數據字典
      loadUrl : "/fsbus/1005", //異步加載數據的url地址
      inputs : "parentid:0", //異步請求攜帶的參數
      labelField : "name", //示數據的屬性
      valueField : "id" //value對應的屬性
    }
  }

數據表格轉義引用數據字典

只須要在表格列中，配置數據字典信息 dict="area1"

<p field="area1" title="省份" width="100" dict="area1"/>

下拉框引用數據字典

須要在select中配置css樣式 class="fsSelect"和字典配置 dict="area1"

<select name="area1" class="fsSelect" dict="area1" addNull="1">
</select>

靜態字典和動態字典區別

靜態字典和動態字典html使用上沒有任何區別，主要區別在於fsDict.js中的配置方式不同，獲取數據方式。

字典配置說明

屬性	必輸	默認值	名稱	描述
formatType	是		格式化方式	server：動態字典，local：靜態字典
loadUrl	否		異步加載url	異步加載數據的url地址
inputs	否		參數	異步請求攜帶的參數
labelField	是		展現數據的屬性	顯示信息對應的字段
valueField	是		value對應的屬性	value值對應的字段
data	否		靜態數據數組	靜態數據字典使用
spaceMode	否	,	展現多個數據分隔符	數據表格轉義時使用，多個數據的分隔符

• inputs參數使用說明

若是使用固定參數，能夠直接 屬性:值，demo： parentid:0，若是須要多個參數能夠經過 ,分割，demo： parentid:0,name:test
聯動表格若是要傳入當前選中的值，能夠直接 屬性:，不須要寫值，默認直接獲取當前選中的，demo： parentid:。
若是須要傳入其餘選擇器的值，能夠配置 屬性:#選擇器id，例如： key:#area2222222

本文首發於個人博客：ITCTO技術博客