fsLayuiPlugin多数据表格使用

2017-12-25 11:06:33来源:segmentfault作者:FallSea人点击

分享

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

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



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

demo
以下demo都有设置 tableId

<div>
<div>
<button function="top" topUrl="add.html" tableId="fsDatagrid2" topWidth="500px" topHeight="200px" topTitle="新增demo">
<i>&#xe654;</i>新增
</button>
<button function="submit" tableId="fsDatagrid2" url="/fsbus/1002" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据?" inputs="id:">
<i>&#xe640;</i>删除
</button>> <button function="refresh"
="fsDatagrid2">
<i>&#x1002;</i>刷新
</button>
</div>
<div>
<table lay-filter="fsDatagrid2" url="/fsbus/1000" isPage="1" defaultForm="query_form2" height="full-235"></table>
<div>
<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">
<a lay-event="top" topUrl="edit.html" topWidth="500px" topHeight="200px" topTitle="编辑demo" inputs="id:">编辑</a>
<a lay-event="submit" url="/fsbus/1002" isConfirm="1" confirmMsg="是否确定删除当前记录?" inputs="id:">删除</a>
</script>
</div>
</div>
本文首发于我的博客:ITCTO技术博客

微信扫一扫

第七城市微信公众平台