Fork me on GitHub

fsLayuiPlugin多数据表格使用

fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作。
GitHub下载 码云下载
测试环境地址:http://fslayuiplugin.fallsea.com

多数据表格单数据表格 类似,只是细节方面不一致,本不对数据表格进行详细的介绍,只介绍区别,单数据表格请参考 fsLayuiPlugin数据表格使用

多数据表格和单数据表格区别?

主要区别在于 数据表格id上,不同的数据表格id不同;
如果想要实现多数据表格,必输指定数据表格id,也就是 tableId ,例如在buttion按钮设置 tableId 属性。如果不设置默认 tableIdfsDatagrid ,渲染数据就不是想要的操作了。

demo

以下demo都有设置 tableId

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="layui-row grid-demo">
<div class="layui-col-md12">
<button class="layui-btn" function="top" topUrl="add.html" tableId="fsDatagrid2" topWidth="500px" topHeight="200px" topTitle="新增demo">
<i class="layui-icon">&#xe654;</i>新增
</button>
<button class="layui-btn layui-btn-danger" function="submit" tableId="fsDatagrid2" url="/fsbus/1002" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据?" inputs="id:">
<i class="layui-icon">&#xe640;</i>删除
</button>
> <button class="layui-btn" function="refresh"
="fsDatagrid2">
<i class="layui-icon">&#x1002;</i>刷新
</button>
</div>
<div class="layui-col-md12">
<table id="fsDatagrid2" lay-filter="fsDatagrid2" class="fsDatagrid" url="/fsbus/1000" isPage="1" defaultForm="query_form2" height="full-235"></table>
<div class="fsDatagridCols">
<p checkbox="true"/>
<p field="id" title="ID" width="200" sort="true"/>
<p field="name" title="名称" width="300" sort="true"/>
<p field="createdTime" title="创建时间" width="180"/>
<p field="modifiedTime" title="修改时间" width="180"/>
<p fixed="right" align="center" toolbar="#barDemo2" title="操作" width="150"/>
</div>
<script type="text/html" id="barDemo2">
<a class="layui-btn layui-btn-xs" lay-event="top" topUrl="edit.html" topWidth="500px" topHeight="200px" topTitle="编辑demo" inputs="id:">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="submit" url="/fsbus/1002" isConfirm="1" confirmMsg="是否确定删除当前记录?" inputs="id:">删除</a>
</script>
</div>
</div>
坚持原创技术分享,您的支持将鼓励我继续创作!