fsLayuiPlugin数据字典使用
概述
数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用。
1.多个页面下拉框使用同样的数据,改一个地方需要把所有页面都要修改
2.数据表格转义代替自己手动写templet
解析模板数据字典提供一个通用的处理方式,支持配置
静态数据字典
和动态数据字典
,,数据字典文件地址plugins/frame/js/fsDict.js
。
如果使用
数据字典
,必须在layui.js
后面引入数据字典文件/plugins/frame/js/fsDict.js
<script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.0"></script>
静态数据字典
静态数据字典通常用于不会改变的数据,例如:文章状态(有效,无效,发布,审核),用户状态(有效,无效,锁定)
使用方法:
在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"
<p field="city" title="城市" width="100" dict="city"/>
数据表格转义展示不同的样式
如果表格需要对不同的信息展示不同的样式,在数据
data
中,定义style
或css
,可以通过此方式对不同的数据进行不同样式展示
下拉框引用数据字典
需要在select中配置css样式
class="fsSelect"
和字典配置dict="city"
<select name="city" lay-verify="required" lay-verType="tips" class="fsSelect" dict="city" addNull="1">
</select>
动态数据字典
动态数据字典使用场景比较多,例如省市区级联等会改变的类型。
通过服务端异步请求加载数据列表。
使用方法:
在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"
<p field="area1" title="省份" width="100" dict="area1"/>
下拉框引用数据字典
需要在select中配置css样式
class="fsSelect"
和字典配置dict="area1"
<select name="area1" class="fsSelect" dict="area1" addNull="1">
</select>
静态字典和动态字典区别
静态字典和动态字典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技术博客
fsLayuiPlugin数据字典使用的更多相关文章
- fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- Oracle数据字典
数据字典-简介 Oracle数据字典的名称由前缀和后缀组成,使用下划线"_"连接,其代表的含义如下: ● DBA_:包含数据库实例的所有对象信息. ● V$_:当前实例的动态视图, ...
- postgresql 导出数据字典文档
项目上需要整理目前数据库的数据字典文档.项目不规范,这种文档只要后期来补.这么多张表,每个字段都写到word文档里真心头大.就算前面写了个查询表结构的sql,但是最后整理到word里还是感觉有点麻烦. ...
- 基于表的数据字典构造MySQL建表语句
表的数据字典格式如下: 如果手动写MySQL建表语句,确认麻烦,还不能保证书写一定正确. 写了个Perl脚本,可快速构造MySQL脚本语句. 脚本如下: #!/usr/bin/perl use str ...
- 使用 PowerDesigner 和 PDMReader 逆向生成 MySQL 数据字典
下面提到的软件大家可以在下面的链接下载. 大家可以参考下面的操作录制视频来完成相关的操作. 使用 PowerDesigner 和 PDMReader 逆向生成 MySQL 数据字典.wmv_免费高速下 ...
- 【Java EE 学习 30】【闪回】【导入导出】【管理用户安全】【分布式数据库】【数据字典】【方案】
一.闪回 1.可能的误操作 (1)错误的删除了记录 (2)错误的删除了表 (3)查询历史记录 (4)撤销已经提交了的事务. 2.对应着以上四种类型的误操作,有四种闪回类型 (1)闪回表:将表回退到过去 ...
- 数据字典生成工具之旅(5):DocX组件读取与写入Word
由于上周工作比较繁忙,所以这篇文章等了这么久才写(预告一下,下一个章节正式进入NVelocity篇,到时会讲解怎么使用NVelocity做一款简易的代码生成器,敬请期待!),好了正式进入本篇内容. 这 ...
- mysql快速导出数据库ER图和数据字典(附navicat11安装教程及资源)
♣ mysql使用navicat11快速导出数据库ER图 ♣ mysql使用navicat11快速导出数据库数据字典 ♣ navicat11 for mysql (这里是mysql5.7.12)专业版 ...
- MySQL服务 - MySQL列类型、SQL模式、数据字典
MySQL列类型的作用: 列类型可以简单理解为用来对用户往列种存储数据时做某种范围"限定",它可以定义数据的有效值(字符.数字等).所能占据的最大存储空间.字符长度(定长或变长). ...
随机推荐
- LeetCode No.106,107,108
No.106 从中序与后序遍历序列构造二叉树 题目 根据一棵树的中序遍历与后序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 示例 例如,给出 中序遍历 inorder = [9,3,15,2 ...
- LeetCode No.94,95,96
No.94 InorderTraversal 二叉树的中序遍历 题目 给定一个二叉树,返回它的中序 遍历. 示例 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,3,2] 进阶:递 ...
- python编程练习题目
github上面的一个项目,分为level1,level2,level3 三个等级的难度. 题目地址 一部分中文翻译 python教程 剑指offer,python3实现 python进阶 练习题1: ...
- 郑宇以城市计算研究膺选 MIT 科技创新35俊杰 (TR35)
MIT 科技创新35俊杰 (TR35)"> 编者按:<MIT Technology Review>于8月22日发布了令人瞩目的2013年全球杰出青年创新者(MIT TR35 ...
- Office customUI中如何动态更新控件标题和图标?
本例,在Excel右键菜单中创建一个按钮,按钮的标题使用getLabel动态获取,图标使用getImage动态获取. customUI XML代码: <customUI xmlns=" ...
- numpy矩阵运算--矩阵乘法
1)元素对应相乘,使用 multiply 函数或 * 运算符来实现 a = np.array([2,2,2])b = np.array([3,3,3]) c1 = a*a c1 array([4, 4 ...
- StartDT AI Lab | 视觉智能引擎——从Face ID说起,浅析顾客数字化
“顾客就是上帝”,这句西谚揭示了顾客占据着商业活动中心地位这一客观规律.为了能更好地服务顾客,优化商家自身的服务与产品,对顾客的分析与需求调研一直是商业经营分析中的重中之重. 在商业互联网化.社会数字 ...
- Qt .pro文件详解
在我们创建Qt工程项目时,Qt Creator总会创建一个.pro文件,我们称.pro文件为Qt的工程管理文件.一个工程项目可以包含一个或多个.pro文件.理解和掌握pro文件的用法,将有利于Qt开发 ...
- 3dmax2013卸载/安装失败/如何彻底卸载清除干净3dmax2013注册表和文件的方法
3dmax2013提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2013失败提示3dmax2013安装未完成,某些产品无法安装,也有时候想重新安装3 ...
- maven中 pom.xml与properties等配置文件之间互相读取变量
问题由来: 最近公司的maven项目需要改进,希望把该项目依赖的一系列artifact放到properties文件中,这样做的目的是是为了很容易看到四月份release和七月份的release,它们所 ...