fsLayuiPlugin數(shù)據(jù)字典使用

sunny5541 發(fā)布于2019-08-21 18:25 / 1826人閱讀

摘要：概述數(shù)據(jù)字典主要解決下拉框數(shù)據(jù)填充和數(shù)據(jù)表格轉(zhuǎn)義處理，一個數(shù)據(jù)字典可以多處使用。通過服務(wù)端異步請求加載數(shù)據(jù)列表。

概述

數(shù)據(jù)字典主要解決下拉框數(shù)據(jù)填充和數(shù)據(jù)表格轉(zhuǎn)義處理，一個數(shù)據(jù)字典可以多處使用。    
1.多個頁面下拉框使用同樣的數(shù)據(jù)，改一個地方需要把所有頁面都要修改  
2.數(shù)據(jù)表格轉(zhuǎn)義代替自己手動寫templet解析模板數(shù)據(jù)字典提供一個通用的處理方式，支持配置靜態(tài)數(shù)據(jù)字典和動態(tài)數(shù)據(jù)字典，，數(shù)據(jù)字典文件地址plugins/frame/js/fsDict.js。

如果使用數(shù)據(jù)字典，必須在layui.js 后面引入數(shù)據(jù)字典文件/plugins/frame/js/fsDict.js

靜態(tài)數(shù)據(jù)字典

靜態(tài)數(shù)據(jù)字典通常用于不會改變的數(shù)據(jù)，例如：文章狀態(tài)（有效，無效，發(fā)布，審核），用戶狀態(tài)（有效，無效，鎖定）

使用方法：

在layui.fsDict對象中，定義一個數(shù)據(jù)字典。

例如：定義一個城市的靜態(tài)數(shù)據(jù)字典

配置城市數(shù)據(jù)字典名稱：city,city 是一個json對象

配置數(shù)據(jù)字典屬性

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

數(shù)據(jù)表格轉(zhuǎn)義引用數(shù)據(jù)字典

只需要在表格列中，配置數(shù)據(jù)字典信息dict="city"

數(shù)據(jù)表格轉(zhuǎn)義展示不同的樣式

如果表格需要對不同的信息展示不同的樣式，在數(shù)據(jù)data中，定義style或css,可以通過此方式對不同的數(shù)據(jù)進(jìn)行不同樣式展示

下拉框引用數(shù)據(jù)字典

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

動態(tài)數(shù)據(jù)字典

動態(tài)數(shù)據(jù)字典使用場景比較多，例如省市區(qū)級聯(lián)等會改變的類型。  
通過服務(wù)端異步請求加載數(shù)據(jù)列表。

使用方法：

在layui.fsDict對象中，定義一個數(shù)據(jù)字典。

例如：定義一個城市的靜態(tài)數(shù)據(jù)字典

配置省份數(shù)據(jù)字典名稱：city,city 是一個json對象

配置數(shù)據(jù)字典屬性

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

數(shù)據(jù)表格轉(zhuǎn)義引用數(shù)據(jù)字典

只需要在表格列中，配置數(shù)據(jù)字典信息dict="area1"

下拉框引用數(shù)據(jù)字典

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

靜態(tài)字典和動態(tài)字典區(qū)別

靜態(tài)字典和動態(tài)字典html使用上沒有任何區(qū)別，主要區(qū)別在于fsDict.js中的配置方式不一樣，獲取數(shù)據(jù)方式。

字典配置說明

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

inputs參數(shù)使用說明

如果使用固定參數(shù)，可以直接屬性:值，demo：parentid:0，如果需要多個參數(shù)可以通過,分割，demo：parentid:0,name:test   
聯(lián)動表格如果要傳入當(dāng)前選中的值，可以直接屬性:，不需要寫值，默認(rèn)直接獲取當(dāng)前選中的，demo：parentid:。  
如果需要傳入其他選擇器的值，可以配置屬性:#選擇器id，例如：key:#area2222222本文首發(fā)于我的博客：ITCTO技術(shù)博客