layui table列写在html里面,fsLayui数据表格使用

fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。

GitHub下载 码云下载

测试环境地址：http://fslayui.itcto.cn

css和js引用

公共css和js必须全部引用

数据表格配置

datagrid配置

table标签 datagrid参数配置

datagrid demo

查看

编辑

删除

表格属性配置

表格数据请求配置，必须指定一个class样式fsDatagrid，id和lay-filter必须一致。

属性

必输

默认值

名称

描述

id

是

表格id

如果只有一个数据表格，id最好为 fsDatagrid

lay-filter

是

事件监听id

必须和表格id一致

class

是

样式

必须有 fsDatagrid 样式

url

是

请求地址

ajax异步提交地址

isPage

否

0

是否分页

1 分页,0 不分页

pageSize

否

20

每页数量

指定数据表格每页分页数量

defaultForm

否

form表单id

表格查询的前置条件，配置后，默认把此form表单当做datagrid查询条件

height

否

full-130

表格高度

表格高度

isLoad

否

1

是否自动加载

1 默认加载，0 不加载(配置为0后，表格默认填充空数据，点击刷新或者查询才会更新数据，一般在 联动表格 使用)

clickRenderTable

否

点击行渲染的表格id

点击表格行，渲染某个table( 联动表格 使用)

clickRenderTableInputs

否

点击后传入参数

自定义需要传入的参数( 联动表格 使用)

表格显示列配置

列配置，必须在table标签下方定义一个 div 标签，并且class为 fsDatagridCols

通过p标签，定义列的属性内容，参考layui官方配置：http://www.layui.com/doc/modules/table.html#cols

表格按钮设置

查看

编辑

删除

属性

必输

默认值

名称

描述

lay-event

是

事件监听

top：弹出窗口；submit：提交数据

topUrl

否

弹出窗口地址

事件监听为top，此属性必输

topWidth

否

700px

弹出窗口宽度

topHeight

否

400px

弹出窗口高度

isMaximize

否

0

弹出窗口是否最大化

1：是， 0：否

topTitle

否

弹出窗口标题

topMode

否

弹出窗口模型

new：新增窗口，edit：编辑窗口，readonly：只读窗口； 新增、修改、查看共用同一个页面使用

url

否

提交请求地址

事件监听为submit，此属性必输

isConfirm

否

0

是否确认提示

1：是，0：否

confirmMsg

否

是否确定操作选中的数据?

确认提示内容

inputs

否

参数

自定义需要传入的参数

inputs参数说明

此属性主要为了传参

把当前选中的行id传入请求，可以配置 id:

传入固定的指，可以配置 属性:值 ,示例： state:1

传入的参数和选中的列参数不一样，可以配置 属性:$对应值的属性** ，示例：**uid:$id

传入的参数取某一个输入框的值，可以配置 属性:#输入框id ，示例：name:#name

需要传多个参数直接通过 逗号 分割，示例： id:,state:1

form表单查询条件配置

只需要关注form表单id和查询按钮配置

id：

名称：

时间：

查询

按钮属性

属性

必输

默认值

名称

描述

function

是

方法名称

查询写固定值 query

tableId

否

fsDatagrid

datagrid表格id

需要查询的datagrid表格id

表格菜单工具栏配置

通过菜单对datagrid表格增删改查操作

新增

删除

ဂ刷新

按钮属性

属性

必输

默认值

名称

描述

function

是

方法名称

top：弹出窗口，submit：提交数据，refresh：刷新表格，close：关闭窗口，query：查询

topUrl

否

弹出窗口地址

事件监听为top，此属性必输

topWidth

否

700px

弹出窗口宽度

topHeight

否

400px

弹出窗口高度

isMaximize

否

0

弹出窗口是否最大化

1：是， 0：否

topTitle

否

弹出窗口标题

topMode

否

弹出窗口模型

new：新增窗口，edit：编辑窗口，readonly：只读窗口； 新增、修改、查看共用同一个页面使用

url

否

提交请求地址

事件监听为submit，此属性必输

isSelect

否

是否单选

1：是，0：否

isMutiDml

否

是否多选

1：是，0：否

isConfirm

否

0

是否确认提示

1：是，0：否

confirmMsg

否

是否确定操作选中的数据?

确认提示内容

inputs

否

参数

自定义需要传入的参数

tableId

否

fsDatagrid

datagrid表格id

需要查询的datagrid表格id

inputs参数说明

此属性主要为了传参

把当前选中的行id传入请求，可以配置 id:

传入固定的指，可以配置 属性:值 ,示例： state:1

传入的参数和选中的列参数不一样，可以配置 属性:$对应值的属性** ，示例：**uid:$id

传入的参数取某一个输入框的值，可以配置 属性:#输入框id ，示例：name:#name

需要传多个参数直接通过 逗号 分割，示例： id:,state:1

本文首发于我的博客：ITCTO技术博客