以表格的形式展示数据库查询到的数据,支持增、删、改、查、多列排序、定制列、滚动加载、筛选树、右键搜索、导出、渲染表达式。

配置

数据路径

即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()

弹出新建/编辑框。

由众触低代码平台生成和驱动