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

yhaolpz 發(fā)布于2019-08-01 18:18 / 1983人閱讀

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

概述

數(shù)據(jù)字典主要解決下拉框數(shù)據(jù)填充和數(shù)據(jù)表格轉(zhuǎn)義處理，一個(gè)數(shù)據(jù)字典可以多處使用。    
1.多個(gè)頁(yè)面下拉框使用同樣的數(shù)據(jù)，改一個(gè)地方需要把所有頁(yè)面都要修改  
2.數(shù)據(jù)表格轉(zhuǎn)義代替自己手動(dòng)寫(xiě)templet解析模板數(shù)據(jù)字典提供一個(gè)通用的處理方式，支持配置靜態(tài)數(shù)據(jù)字典和動(dòng)態(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ù)字典通常用于不會(huì)改變的數(shù)據(jù)，例如：文章?tīng)顟B(tài)（有效，無(wú)效，發(fā)布，審核），用戶(hù)狀態(tài)（有效，無(wú)效，鎖定）

使用方法：

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

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

配置城市數(shù)據(jù)字典名稱(chēng)：city,city 是一個(gè)json對(duì)象

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

layui.fsDict = {
    //城市
    city : {
      formatType : "local", //local 靜態(tài)數(shù)據(jù)字典
      labelField : "name", //展示數(shù)據(jù)的屬性
      valueField : "code", //value對(duì)應(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)義展示不同的樣式

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

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

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

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

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

使用方法：

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

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

配置省份數(shù)據(jù)字典名稱(chēng)：city,city 是一個(gè)json對(duì)象

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

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

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

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

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

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

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

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

字典配置說(shuō)明

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

inputs參數(shù)使用說(shuō)明

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

GPU云服務(wù)器云服務(wù)器字典的使用 fsLayuiPlugin 數(shù)據(jù)字典 javaee數(shù)據(jù)字典

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51643.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yhaolpz

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Ftech：越南vps,2核/2G僅$12.5月起;越南服務(wù)器L5,24G內(nèi)存,250G SSD,僅

閱讀 4289·2021-09-26 10:11
NameCheap：新注冊(cè).COM域名$5.98（更新轉(zhuǎn)入域名優(yōu)惠）

閱讀 2686·2021-07-28 00:37
CSS 1-選擇器

閱讀 3232·2019-08-29 15:29
JS基礎(chǔ)入門(mén)篇（二）—if ，字符串拼接，數(shù)組，圖片循環(huán)切換

閱讀 1194·2019-08-29 15:23
復(fù)習(xí)js 2

閱讀 3140·2019-08-26 18:37
淺析深度克?。╠eepclone）

閱讀 2479·2019-08-26 10:37
javaScript抱佛腳之構(gòu)造函數(shù)、原型等等

閱讀 608·2019-08-23 17:04
淺談vi-motion小程序運(yùn)動(dòng)組件的內(nèi)部原理

閱讀 2357·2019-08-23 13:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章