Fork me on GitHub

fsLayuiPlugin数据字典使用

概述

数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用。
1.多个页面下拉框使用同样的数据,改一个地方需要把所有页面都要修改
2.数据表格转义代替自己手动写templet解析模板

数据字典提供一个通用的处理方式,支持配置静态数据字典动态数据字典,,数据字典文件地址plugins/frame/js/fsDict.js

如果使用数据字典,必须在layui.js 后面引入数据字典文件/plugins/frame/js/fsDict.js

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

静态数据字典

静态数据字典通常用于不会改变的数据,例如:文章状态(有效,无效,发布,审核),用户状态(有效,无效,锁定)

使用方法:

layui.fsDict对象中,定义一个数据字典。

例如:定义一个城市的静态数据字典

  1. 配置城市数据字典名称:city,city 是一个json对象
  2. 配置数据字典属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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"

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

数据表格转义展示不同的样式

如果表格需要对不同的信息展示不同的样式,在数据data中,定义stylecss,可以通过此方式对不同的数据进行不同样式展示

下拉框引用数据字典

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

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

动态数据字典

动态数据字典使用场景比较多,例如省市区级联等会改变的类型。
通过服务端异步请求加载数据列表。

使用方法:

layui.fsDict对象中,定义一个数据字典。

例如:定义一个城市的静态数据字典

  1. 配置省份数据字典名称:city,city 是一个json对象
  2. 配置数据字典属性
1
2
3
4
5
6
7
8
9
10
layui.fsDict = {
//省份
area1 : {
formatType : "server", //server 动态数据字典
loadUrl : "/fsbus/1005", //异步加载数据的url地址
inputs : "parentid:0", //异步请求携带的参数
labelField : "name", //示数据的属性
valueField : "id" //value对应的属性
}
}

数据表格转义引用数据字典

只需要在表格列中,配置数据字典信息dict="area1"

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

下拉框引用数据字典

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

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

静态字典和动态字典区别

静态字典和动态字典html使用上没有任何区别,主要区别在于fsDict.js中的配置方式不一样,获取数据方式。

字典配置说明

属性必输默认值名称描述
formatType格式化方式server:动态字典,local:静态字典
loadUrl异步加载url异步加载数据的url地址
inputs参数异步请求携带的参数
labelField展示数据的属性显示信息对应的字段
valueFieldvalue对应的属性value值对应的字段
data静态数据数组静态数据字典使用
spaceMode,展示多个数据分隔符数据表格转义时使用,多个数据的分隔符
  • inputs参数使用说明

如果使用固定参数,可以直接属性:值,demo:parentid:0,如果需要多个参数可以通过,分割,demo:parentid:0,name:test
联动表格如果要传入当前选中的值,可以直接属性:,不需要写值,默认直接获取当前选中的,demo:parentid:
如果需要传入其他选择器的值,可以配置属性:#选择器id,例如:key:#area2222222

FallSea wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!