layui-扩展模块开发文档
enian - 文档库

layui扩展模块 - enianTable Enian表格-文档

enianTable是整合对接后台数据库快捷查询及展示数据的模块。分为三个子模块 table、form、search 分别是表格（数据展示）、表单（用于新建或修改）、搜索（查询）

更新日志：

2019-4-5
版本：1.2.2019-4-5
1.修复搜索功能下拉选择框项标题错误的bug

2019-01-23
版本：1.1.2019-1-23 10:51:40
1.增加默认配置数据，switch，checkbox，input，time，这些类型的typeData没有特殊需求可以不用填写

2019-01-22
版本：1.0.2019-1-22 21:18:05
修复table模块渲染自定义两个插件相同时，被覆盖现象，方法：时间戳增加循环数

2019-01-21
1.增加enianTable.search查询模块代码

2.新增time数据格式，支持的模块form、search 查看详情

2019-01-06
1.enianTable.table，增加返回值，使用返回值可以监听原生表格事件

enianTable.table -表格模块

参数说明
参数 类型 说明
elem str [必] DOM节点(#id .class div)
url str [必] 请求地址
data arr [必] 字段数组
config obj 表格基本配置，分页等信息
before func 渲染表头前回调，可以在此增加修改字段数据，或行工具，需要返回新的字段数组，否则按之前的回调数据进行渲染
checkbox function 复选框和开关被点击
toolEvent function 包括按钮被点击 table.on(‘tool(test),func)

示例

html代码
  1. <div id="demo"></div>
js代码
  1. var tableObj = enianTable.table({
  2.                     elem:"#demo1"
  3.                     ,url:"{:url('',['t'=>1])}"
  4.                     ,data:fieldData
  5.                     ,config:{
  6.                         page:true
  7.                         //详见layui文档 数据表格 - 基本参数
  8.                     }
  9.                     ,before:function(datas){
  10.                         datas.push({field:'last_time', width:80, title: 'ggg', sort: true})
  11.                         console.log(datas)
  12.                         return datas;
  13.                     }
  14.                     ,checkbox:function(field,obj){
  15.                         layer.tips(field.value + ' ' + field.name + '：'+ obj.elem.checked, obj.othis);
  16.                         console.log(field,obj)
  17.                     }
  18.                     ,toolEvent:function(obj){
  19.                         console.log(obj)
  20.                     }
  21.                 })
  22. //监听原生默认事件-edit 可换成其他原生支持事件，（如：tool;row;sort等其他原生表格事件）[19-1-6 更新]
  23. tableObj.on('edit',function(obj){
  24.     console.log(obj.value) //得到修改后的值
  25.     console.log(obj.data) //得到所在行所有键值
  26.     console.log(obj.field) //得到字段
  27. })
  29. //获取模块生成的表格id [19-1-8 更新]
  30. console.log(tableObj.id);//输出：table1546781607263
  31. //然后可以使用原生表格方法监听各种事件
  32. table.on('edit('+tableObj.getId+')', function(obj) {
  33.     //...
  34. });

enianTable.form -表单模块

参数说明
参数 类型 说明
elem str [必] DOM节点(#id .class div)
data arr [必] 字段数组
submitBtn str 按钮标题（默：立即提交）
layer str/obj/bool 弹窗展示（默：false）
str - layer标题
true -弹窗 + 默认标题（默：信息）
obj - layer.open参数
val obj 表单赋值 同
form.val(elem,obj)查看相关文档
submit func 表单提交回调
layerSuccess func （仅当layer属性为str和true时有效）弹窗表单加载完成回调，一个参数obj
[2019-1-15更新]
示例
  1.         enianTable.form({
  2.             elem:"#test"
  3.             ,data:fieldData
  4.             ,submitBtn:'保存'
  5.             ,layer:"我是标题"
  6.             //可以是以下obj数据
  7. //            ,layer:{
  8. //                type: 1,
  9. //                //skin: 'layui-layer-rim', //加上边框
  10. //                area: ['600px', '400px'], //宽高
  11. //            }
  12.             ,val:{
  13.                 password:'966223'
  14.             }
  15.             ,submit:function(data){
  16.                 layer.alert(JSON.stringify(data.field), {
  17.                   title: '最终的提交信息'
  18.                 })
  19.             }
  20.             ,layerSuccess:function(obj){
  21.                 console.log(obj);//obj内容有elem和index
  22.             }
  23.         })

enianTable.search -搜索/查询模块 【2019-1-20】

enianTable.search 的使用方式可能和以上两个插件不一样，后续有时间会进行更新改版，这也是一直没有发布的原因。search插件没有那么多繁琐的配置参数

使用方法
  1. var ets = enianTable.search(fieldData);//field，字段数据
  3. //打开搜索弹窗//如果缓存有数据则读取缓存
  4. ets.open();
  6. //打开搜索窗，不读取缓存
  7. ets.render();
  9. //打开搜索窗，渲染json数据打开搜索
  10. ets.render_json(jsonData);
  12. //数据示例
  13. var jsonData = {
  14. "1":{"field":"status","value":"0"}
  15. ,"2":{"field":"username","value":"三时三餐","exp":"like"}
  16. ,"3":{"value":"此v","field":"username","exp":"eq"}
  17. }
  19. //设定layer的宽高
  20. ets.layer_area(['500px','400px']);
  22. //监听搜索按钮点击
  23. ets.submit(function(d){
  24.     console.log(d);
  25. })
  28. //更改添加查询表达式符号
  29. var expression={'lc':'测试','eq':'精确','neq':'不等于'};
  30. //ets.exp(expression);
  31. ets.exp(expression,false);//清空默认
  33. //获取当前所有（缓存）条件，返回json
  34. var data = ets.getSearchData();
  35. console.log(data);

数据格式（三个模块通用）

完整示例
  1. [
  2.     {
  3.         "tableHead": {"field": "appid","width": 80,"title": "Appid","sort": true},
  4.         "type": "noInput",
  5.         "typeData": {
  6.             "msg": "输入数字"
  7.         }
  8.     },
  9.     {
  10.         "tableHead": {"field": "order","title": "排序","sort": true,"width": 80,"edit": "text"},
  11.         "type": "input",
  12.         "typeData": {
  13.             "msg": "请输入数字"
  14.         }
  15.     },
  16.     {
  17.         "tableHead": {"field": "name","title": "名称","edit": "text"},
  18.         "type": "input",
  19.         "typeData": {
  20.             "msg": "请输入"
  21.         }
  22.     },
  23.     {
  24.         "tableHead": {"field": "type","width": 100,"title": "类型"},
  25.         "type": "hide",
  26.         "typeData": {
  27.             "msg": "禁止编辑"
  28.         }
  29.     },
  30.     {
  31.         "tableHead": {"field": "note","title": "备注","edit": "text"},
  32.         "type": "input"
  33.     },
  34.     {
  35.         "tableHead": {"field": "note2","width": 80,"title": "备注2","edit": "text"},
  36.         "type": "input"
  37.     },
  38.     {
  39.         "tableHead": {"width": 130,"align": "center","fixed": "right","toolbar": "#applist_s_tool"},
  40.         "type": false
  41.     }
  42. ]
参数 类型 必须 解释
tableHead obj 是 原表头结构，也就是table中cols单条数据查看相关文档
type str/bool 是 字段类型
typeData str/obj 是 字段类型的数据
notRender arr [2019-1-22新增]单独设置某个字段不进行渲染格式为数组可选值（form，table，search） 示例：['form','search']在form模块和search不渲染该字段
如果数组中三个模块都填入，则等同于 type 参数为 hide

type 所支持的数据类型

类型 解释 效果展示 数据
switch 开关 表格/表单 查看数据详情
checkbox 复选框 表格/表单 查看数据详情
select 下拉选择框 表单 查看数据详情
button 按钮类型 表格 查看数据详情
input 普通编辑框 表单 查看数据详情
noInput 禁止输入框 表单 查看数据详情
bigInput 大编辑框 表单 查看数据详情
between 区间 搜索 查看数据详情
time 时间 表单/搜索 查看数据详情[2019-1-21新增]
hide 隐藏类型 全部屏蔽 无数据

注意：hide类型，会自动隐藏数据表格中的字段隐藏，需要 layui 2.4.0+版本

开关
  1. ,type:"switch"
  2. ,typeData:{
  3.     idName:'id',
  4.     on:{
  5.         "data":1,
  6.         "name":"开"
  7.     },
  8.     off:{
  9.         "data":0,
  10.         "name":"关"
  11.     }
  12. }
  13. //typeData参数说明：
  14. // idName    id字段名（也就是自增字段名）,默认:'id'，在监听数据时返回在field.value 用于更改数据提供的值
  15. // on    开启，name 也就是复选框的标题，data 数据
  16. // off    关闭。同上

复选框
  1. ,type:"checkbox"
  2. ,typeData:{
  3.     idName:'id',
  4.     on:{
  5.         "data":1,
  6.         "name":"复选框"
  7.     },
  8.     off:{
  9.         "data":0,
  10.     }
  11. }
  12. //typeData参数说明：
  13. // idName    id字段名（也就是自增字段名）,默认:'id'，在监听数据时返回在field.value 用于更改数据提供的值
  14. // on    开启，name 也就是复选框的标题，data 数据
  15. // off    关闭。name 可省略，data 同上，

下拉选择
  1. //下拉选择
  2. ,type:"select"
  3. ,typeData:[
  4.     {'value':'shanghai','title':'上海'}
  5.     ,{'value':'shanghai','title':'上海'}
  6.     ,{'value':'shanghai','title':'上海'}
  7.     ,{'value':'shanghai','title':'上海'}
  8.     //...
  9. ]

编辑框
  1. //编辑框
  2. ,type:"input"
  3. ,typeData:{
  4.     //提示信息
  5.     "msg":"请输入不超过5个字的内容"
  6. }

大编辑框
  1. //大编辑框
  2. ,type:"bigInput"
  3. ,typeData:{
  4.     //提示信息
  5.     "msg":"请输入不超过5个字的内容"
  6. }

禁止编辑框
  1. //禁止编辑框
  2. ,type:"noInput"
  3. ,typeData:{
  4.     //提示信息
  5.     "msg":"请输入不超过5个字的内容"
  6. }

按钮类型
  1. //按钮类型
  2. ,type:"button"
  3. ,typeData:[
  4.      {"title":"标题",value:"值","url":"##","event":"点击标记","skin":"样式"}
  5.     ,{"title":"标题",value:"值","url":"##","event":"点击标记","skin":"样式"}
  6.     ,{"title":"标题",value:"值","url":"##","event":"点击标记","skin":"样式"}
  7.     //更多...
  8. ]

如果url为空，或者为“##”，则继续执行 event 。如果url不为空或“##”，当监听此按钮事件，原有监听 table.on(‘tool(name)’) 将会失效

时间
  1. //时间
  2. ,type:"time"
  3. ,typeData:{
  4.      msg:'表单提示信息'
  5.      ,msg1:'提示框1'
  6.      ,msg2:'提示框2'
  7. }

区间（主要体现模块：搜索模块）
  1. //区间
  2. ,type:"between"
  3. ,typeData:{
  4.      msg1:'提示框1'
  5.      ,msg2:'提示框2'
  6. }