资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/fsLayui数据表格使用

fsLayui数据表格使用

Joyven / 1993人阅读

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

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和查询按钮配置

按钮属性

属性 必输 默认值 名称 描述
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技术博客
云服务器 GPU云服务器 fsLayui 数据表格 表格数据 js表格翻页 表格 指定数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51596.html

相关文章

  • fsLayui介绍(layui插件)

    摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。 fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载 码云下载 测试环境地址：http://fslayui.itcto.cn 为什么要使用fsLa...

    Barry_Ng 评论0 收藏0

  • fsLayui数据表格使用

    摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。 fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载 码云下载 测试环境地址：http://fslayui.itcto.cn css和js引用 公...

    charles_paul 评论0 收藏0

  • fsLayui联动表格使用(二)

    摘要：复杂联动表格使用点击主表格，加载副表格数据，支持主副表格的增删改查操作。演示地址复杂联动表格配置和基础联通表格类似，在基础上扩展一些增删改查功能，基础联动表格参考复杂的联动表格需要在基础表格上增加配置和按钮操作。 复杂联动表格使用 点击主表格，加载副表格数据，支持主、副表格的 增删改查 操作。 演示地址：http://fslayui.itcto.cn 复杂联动表格配置 和基础联通...

    miguel.jiang 评论0 收藏0

  • fsLayui联动表格使用(二)

    摘要：复杂联动表格使用点击主表格，加载副表格数据，支持主副表格的增删改查操作。演示地址复杂联动表格配置和基础联通表格类似，在基础上扩展一些增删改查功能，基础联动表格参考复杂的联动表格需要在基础表格上增加配置和按钮操作。 复杂联动表格使用 点击主表格，加载副表格数据，支持主、副表格的 增删改查 操作。 演示地址：http://fslayui.itcto.cn 复杂联动表格配置 和基础联通...

    kel 评论0 收藏0

  • fsLayui快速开始

    摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。注意这里一定要修改为自己项目的配置。列表页列表页支持通过表单传参查询数据，刷新表格等功能。 fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载 码云...

    anquan 评论0 收藏0

发表评论

登陆后可评论

0条评论

Joyven

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<