当前位置: 首页 > Web前端 > HTML

fsLayui数据表使用

时间:2023-04-02 13:25:26 HTML

fsLayui是一款基于layui的快速开发插件,支持数据表的增删改查操作,提供通用组件,通过配置html实现数据请求,减少重复开发的工作量前端js。github下载代码云下载测试环境地址:http://fslayui.itcto.ccss和js引用publiccss和js必须全部引用!--导入jquery-->数据表配置datagrid配置表标签datagrid参数配置datagriddemo

form属性配置表单数据请求配置,必须指定类样式fsDatagrid,id和lay-filter必须一致属性必须输入默认值namedescriptionid是tableid如果只有一个数据表,id最好fsDatagridlay-filter是事件监听id必须和tableid一致classisstyle必须有fsDatagrid样式url是请求地址ajax异步提交地址isPageno0是否分页1pagination,0不分页pageSizeno20quantityperpage指定数据表每页的页数defaultFormnoformformid表单查询的前提条件,配置后,表单将作为datagrid查询conditionbydefaultheightnofull-130表格高度表格高度isLoad否1是否自动加载1默认加载,0不加载(配置为0后,表格默认填充空数据,点击刷新或查询更新数据,一般用于联表)clickRenderTable无点击行渲染表id点击表行渲染一个表(联表用)clickRenderTableInputs无点击传入参数自定义要传入的参数(联表用)表显示列配置列的配置必须在table标签下定义一个div标签,类是fsDatagridCols通过p标签定义列的属性内容,参考layui官方配置:http://www.layui.com/doc/modules/table.html#cols
表单按钮设置属性必填默认值name说明lay-event为事件监听top:弹窗;submit:提交数据topUrl无弹窗地址topWidth否700px弹窗宽度toHeight否400px弹窗高度isMaximize否0弹窗最大化1:是,0:否topTitle否弹窗标题topMode否弹窗模型new:新窗口,edit:编辑窗口,readonly:只读窗口;添加、修改、查看共享同一个页面useurlnosubmit请求地址事件监听是提交,这个属性必须要输入isConfirmno0是确认提示1:yes,0:noconfirmMsgno是确认操作Selecteddata?确认提示内容inputsNoParameters自定义需要传入的参数inputs参数说明该属性主要是传递参数,传入当前选中行的idrequest.request.可以配置id:传入固定索引,可以配置properties:Value,例如:state:1传入的参数与选择的列参数不同,可以配置property:$的属性对应值**,例子:**uid:$id传入的参数取某个输入框的值,可以配置属性:#输入框id,例子:name:#name需要传多个参数,直接用分隔符隔开commas,example:id:,state:1form表单查询条件配置只需要关注form表单id和查询按钮配置id:
名称:时间:Query按钮属性属性mustinputdefaultvaluenamedescriptionfunctionisthemethodnamequerywritefixedvaluequerytableIdnofsDatagriddatagridtableid要查询的datagrid表idtablemenutoolbarconfiguration通过菜单增删改查datagrid表新建添加删除?RefreshButton属性属性必须输入默认值name描述功能是方法名top:弹出窗口,submit:提交数据,refresh:刷新表单,close:关闭窗口,查询:查询topUrl弹窗地址事件监听是否为top,该属性必须输入topWidth为700px弹窗宽度topHeight为400px弹出窗口高度isMaximize否0弹窗是否最大化1:是,0:否topTitle否弹窗标题topMode否弹窗样式new:新建窗口,edit:编辑窗口,readonly:只读窗口;添加、修改、查看共享同一个页面useurlnosubmit请求地址事件监听是submit,这个属性必须输入isSelectno单选1:yes,0:noisMutiDmlnomulti-selection1:yes,0:noisConfirmno0确认提示1:是,0:否confirmMsgNo您确定要操作所选数据吗?确认提示内容inputsNoParameters自定义需要传入的参数tableId否fsDatagriddatagridtableid需要查询的datagrid表idinputs参数说明行id传入请求,可以配置id:传入一个固定的index,可以配置属性:value,例如:state:1传入的参数与选择的列参数不同,可以配置属性:value对应的$Attributes**,例如:**uid:$id参数传入的取某一个输入框的值,可以配置属性:#inputboxid,例:name:#name需要传多个参数直接用逗号隔开,例:id:,state:1