以表格的形式展示数据库查询到的数据,支持增、删、改、查、多列排序、定制列、滚动加载、筛选树、右键搜索、导出、渲染表达式。
配置
数据路径
即search()的第一个参数,必填。所以要先把数据查询出来,再填这个数据存放路径,插件随即会把所有数据展示到表格中来。
开启右键搜索
开启后允许用户右键表头或单元格进一步查询/过滤数据。
显示搜索框
开启后会把右键搜索的查询query显示在搜索框内,用户甚至可以自行在搜索框填写填写查询query以精准查询。不管用户怎么查询都会附带上【数据路径】所在的search()的查询条件,从而用户不能查询预先定义好的条件以外的数据。
显示已加载/总数
显示导出按钮
开启滚动加载
开启后滚到表格底部时会继续加载更多数据,直到无更多数据为止。
另一种加载更多数据的方式是在此插件下方添加翻页插件(zp131或zp137)。但建议滚动加载和翻页插件二选一,不同时使用。
筛选树字段
填写字段路径数组并用小括号包裹,如(["type", "x.一级分类", "x.二级分类"])
将会在表格左侧显示筛选树,第一次是所有的类型type,点击其中一个类型将查询此类型的数据,点击某类型左侧的小三角将展示此类型下的所有一级分类,如此类推。
超过多少数据量才显示筛选
默认30条,符合条件的数据太少的话显示筛选树没意义。
搜索事件
填写搜索完成后的逻辑处理,上下文同search()返回值,有arr数组。比如每条数据包含用户_id,但表格里要显示的是用户的头像和姓名,所以每搜索到一批数据就要拿到用户_id数组去用户表进一步查询。
单元格点击事件
上下文有:该行的原始数据$x
,该单元格的字段路径path
及其原始值value
,点击的文本text
,点击事件$ev
,单元格元素$el
,表格组件的内部表达式$exp
(如有)。
比如如果通过列配置添加了一个操作列,包含多个按钮,想给每个按钮添加不同的处理逻辑,可以填exc($exp[text] || "")
,并以按钮的名字添加多个内部表达式分别处理。
单元格右键事件
同上
开启列配置
首次开启会生成默认的列配置以便用户进一步配置。
列配置
表头
默认是字段路径,可以改成对用户更友好的表头,比如删掉x.等前缀。
字段路径
数据库存储的路径,通常不改。
渲染表达式
通过表达式可以展示原始值以外的内容,上下文有:该行的原始数据$x
,该单元格的字段路径path
及其原始值value
。还可以通过html()传入html字符串或元数据对象来展示丰富的单元格内容。
添加列
点+
号添加新的列配置,字段路径必填。
列排序
可以通过左边的序号下拉框快速排序,也可以通过右边的上下箭头移位。
开启查询选项
开启后即可配置查询选项。
查询选项
表单标签
字段路径
查询query
选项列表
只在查询query为【下拉选择】有效
开启【新建/删除/编辑】操作
首次开启会默认添加一个操作列和一个新建按钮,生成单元格点击事件,生成删除、编辑两个内部表达式,生成新建和保存事件表达式,生成新建/编辑表单选项。
新建事件
保存事件
新建/编辑表单选项
定义新建或编辑弹窗的内容
表单标签
字段路径
字段类型
占位符
是否必填
选项列表
仅当字段类型为单选、多选或下拉选择时有效。
API
插件的容器元素有一些API可供调用。可以通过插件所在组件数的ID获取容器,比如如果插件是第一个元素,可以通过$("#_0")取到;更推荐给插件一个唯一的类名,用$(".唯一类名")取得;如果页面上只有一个插件实例也可以用$(".zp142")取得。
export()
导出表格内容到Excel。
edit()
弹出新建/编辑框。