fsLayuiPlugin use the data dictionary

Outline

Mainly to solve the data dictionary drop-down box filled with data processing and data tables escape, a data dictionary can be used in several places.
1. Multiple pages of data using the same drop-down box, a place to change all the pages need to be modified
2. Data table instead of escaping to manually write templet parsing template

Data Dictionary provides a common approach to support configuration 静态数据字典and 动态数据字典,, address data dictionary file plugins/frame/js/fsDict.js.

If you use 数据字典 must be layui.js introduced later in the data dictionary file /plugins/frame/js/fsDict.js

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

Static Data Dictionary

Static data dictionary typically used for data that does not change, for example: Article status (active, inactive, publishing, auditing), user status (active, inactive, locked)

Instructions:

In layui.fsDictthe object, the definition of a data dictionary.

For example: static data dictionary definition of a city

1. Configuration 城市Data Dictionary Name: city, cityis a json objects
2. Configuration数据字典属性

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":"杭州"}
      ]
    }
  }

Escape reference data table data dictionary

Only in table columns, the configuration data dictionary information dict="city"

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

Data tables show a different style escape

If the table needs to show different information in different styles, in the data data , define style , or css can be different styles to show different data in this way

Drop-down box reference data dictionary

We need to configure the css styles in select class="fsSelect" and configure the dictionary dict="city"

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

Dynamic Data Dictionary

Dynamic Data Dictionary using more scenarios, such as the type of cascading provinces will change.
Asynchronous request by the server to load the data list.

Instructions:

In layui.fsDictthe object, the definition of a data dictionary.

For example: static data dictionary definition of a city

1. Configuration 省份Data Dictionary Name: city, cityis a json objects
2. Configuration数据字典属性

layui.fsDict = {
    //省份
    area1 : {
      formatType : "server", //server 动态数据字典
      loadUrl : "/fsbus/1005", //异步加载数据的url地址
      inputs : "parentid:0", //异步请求携带的参数
      labelField : "name", //示数据的属性
      valueField : "id" //value对应的属性
    }
  }

Escape reference data table data dictionary

Only in table columns, the configuration data dictionary information dict="area1"

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

Drop-down box reference data dictionary

We need to configure the css styles in select class="fsSelect" and configure the dictionary dict="area1"

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

Static and dynamic dictionary Dictionary difference

There is no difference between static and dynamic dictionary Dictionary html use, the main difference is that fsDict.jsthe configuration is not the same, the way to get data.

Dictionary configuration instructions

Attributes	Will lose	Defaults	name	description
formatType	Yes		Formatting way	server: Dynamic dictionary local: static dictionary
loadUrl	no		Asynchronous loading url	Asynchronous loading of data url address
inputs	no		parameter	Asynchronous request carrying parameters
labelField	Yes		Display attribute data	Displaying information corresponding field
valueField	Yes		corresponding attribute value	the value of a corresponding field value
data	no		Static data array	Use static data dictionary
spaceMode	no	,	A plurality of display data delimiter	Data table used when escaping, a plurality of data delimiter

• inputs and parameter Usage

If you are using fixed parameters, direct 属性:值 , demo: parentid:0 , if multiple parameters can be , split, demo: parentid:0,name:test
linkage table if you want to pass the currently selected value, directly 属性: , no need to write values, direct access to the currently selected default, demo: parentid: .
If the value of the need to pass the other selectors can be configured 属性:#选择器id , for example: key:#area2222222

This article first appeared on my blog: ITCTO technology blog