摘要:概述数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用。通过服务端异步请求加载数据列表。
概述
数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用。
1.多个页面下拉框使用同样的数据,改一个地方需要把所有页面都要修改
2.数据表格转义代替自己手动写templet解析模板数据字典提供一个通用的处理方式,支持配置静态数据字典和动态数据字典,,数据字典文件地址plugins/frame/js/fsDict.js。
如果使用数据字典,必须在layui.js 后面引入数据字典文件/plugins/frame/js/fsDict.js静态数据字典
静态数据字典通常用于不会改变的数据,例如:文章状态(有效,无效,发布,审核),用户状态(有效,无效,锁定)
使用方法:
在layui.fsDict对象中,定义一个数据字典。
例如:定义一个城市的静态数据字典
配置城市数据字典名称:city,city 是一个json对象
配置数据字典属性
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"
数据表格转义展示不同的样式
如果表格需要对不同的信息展示不同的样式,在数据data中,定义style或css,可以通过此方式对不同的数据进行不同样式展示下拉框引用数据字典
需要在select中配置css样式class="fsSelect"和字典配置dict="city"动态数据字典
动态数据字典使用场景比较多,例如省市区级联等会改变的类型。
通过服务端异步请求加载数据列表。
使用方法:
在layui.fsDict对象中,定义一个数据字典。
例如:定义一个城市的静态数据字典
配置省份数据字典名称:city,city 是一个json对象
配置数据字典属性
layui.fsDict = { //省份 area1 : { formatType : "server", //server 动态数据字典 loadUrl : "/fsbus/1005", //异步加载数据的url地址 inputs : "parentid:0", //异步请求携带的参数 labelField : "name", //示数据的属性 valueField : "id" //value对应的属性 } }数据表格转义引用数据字典
只需要在表格列中,配置数据字典信息dict="area1"
下拉框引用数据字典
需要在select中配置css样式class="fsSelect"和字典配置dict="area1"静态字典和动态字典区别
静态字典和动态字典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技术博客
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90453.html
摘要:概述数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用。通过服务端异步请求加载数据列表。 概述 数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用。 1.多个页面下拉框使用同样的数据,改一个地方需要把所有页面都要修改 2.数据表格转义代替自己手动写templet解析模板数据字典提供一个通用的处理方式,支持配置静态数据字典和动态数据...
摘要:数据表格动态转义提供一种更简洁的方式,主要解决前端模板转义的问题,对于一些简单的,例如状态展示,我们可以通过前端编写模板来处理对于动态的数据,通过这种静态方式是没有办法处理。只能通过异步请求后,再去转义处理。 数据表格动态转义提供一种更简洁的方式,主要解决前端laytpl模板转义的问题,对于一些简单的,例如:状态展示,我们可以通过前端编写laytpl模板来处理;对于动态的数据,通过这种...
摘要:数据表格动态转义提供一种更简洁的方式,主要解决前端模板转义的问题,对于一些简单的,例如状态展示,我们可以通过前端编写模板来处理对于动态的数据,通过这种静态方式是没有办法处理。只能通过异步请求后,再去转义处理。 数据表格动态转义提供一种更简洁的方式,主要解决前端laytpl模板转义的问题,对于一些简单的,例如:状态展示,我们可以通过前端编写laytpl模板来处理;对于动态的数据,通过这种...
摘要:是一个基于的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置实现数据请求,减少前端重复开发的工作。特殊说明和需要在数据表格基础上多引入的文件。 fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作。 GitHub下载 码云下载 测试环境地址:http://...
摘要:是一个基于的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置实现数据请求,减少前端重复开发的工作。特殊说明和需要在数据表格基础上多引入的文件。 fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作。 GitHub下载 码云下载 测试环境地址:http://...
阅读 3407·2021-11-18 10:02
阅读 3645·2021-09-13 10:25
阅读 1849·2021-07-26 23:38
阅读 2533·2019-08-30 15:44
阅读 2218·2019-08-30 13:51
阅读 1194·2019-08-26 11:35
阅读 2240·2019-08-26 10:29
阅读 3411·2019-08-23 14:56