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

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

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

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

demo

以下demo都有设置 tableId

<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"></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"></i>删除
</button> > <button class="layui-btn" function="refresh"
="fsDatagrid2">
<i class="layui-icon">ဂ</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>

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

fsLayuiPlugin多数据表格使用的更多相关文章

  1. fsLayuiPlugin联动表格使用(一)

    简单联动表格使用 点击主表格,加载副表格数据, 演示地址:http://fslayuiplugin.fallsea.com/views/linkageDatagrid/index.html 联动表格配 ...

  2. fsLayuiPlugin数据表格弹出form表单说明

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

  3. fsLayuiPlugin数据表格动态转义

    数据表格动态转义提供一种更简洁的方式,主要解决前端laytpl模板转义的问题,对于一些简单的,例如:状态展示,我们可以通过前端编写laytpl模板来处理:对于动态的数据,通过这种静态方式是没有办法处理 ...

  4. fsLayuiPlugin树+数据表格使用

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

  5. fsLayuiPlugin附件上传使用说明

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

  6. 新的表格展示利器 Bootstrap Table

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  7. 新的表格展示利器 Bootstrap Table Ⅱ

        上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.B ...

  8. 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  9. Javaweb表格加载---DataTable

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 使用 jQuery Datatable 构造数据列表,并且增加或者隐藏相应的列,已达 ...

随机推荐

  1. FastJson禁用循环引用检测

    我们先来看一个例子: package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java ...

  2. JAVA并发思维导图

    原博客:https://blog.csdn.net/oqkdws/article/details/82145389

  3. Linux_打包文件

    将多个文件打包成一个大文件,用tar命令 tar是将多个文件前后连接在一起,tar并不对文件进行压缩 tar -cf  要创建的打包文件名(最后加上.tar)  要打包的文件/列表      c代表创 ...

  4. layui表格自动对齐

    正常情况table应该是这样展示的 但是却展示成了这样 格子没对齐,找了半天原因发现是在table.render中的cols参数多了一个"," 不细心一点真看不出来 正常结构应是 ...

  5. Django实现注册,往邮箱发送验证链接

    由于最近要做个平台,在GitHub上下载了一个系统框架,想着为了安全,实现注册时往一个邮箱发送注册信息,由管理员来确认是否同意其注册. 感谢博主:https://blog.csdn.net/geek_ ...

  6. ef codefirst VS里修改数据表结构后更新到数据库

    2.根据已建立table的数据库建立ADO.NET数据模型在修改表后进入 工具->nuget包管理器->程序包管理器控制台 输入  enable-migrations   后vs会添加一个 ...

  7. Pulsar、ZooKeeper、BookKeeper 作用简述

    Pulsar:采取了存储计算分离的技术ZooKeeper 集群的作用和在 Kafka 中是一样的,都是被用来存储元数据.BookKeeper 集群则被用来存储消息数据.BookKeeper 有点儿类似 ...

  8. CMOS

    CMOS是Complementary Metal Oxide Semiconductor(互补金属氧化物半导体)的缩写.它是指制造大规模集成电路芯片用的一种技术或用这种技术制造出来的芯片,是电脑主板上 ...

  9. Qt .pro文件详解

    在我们创建Qt工程项目时,Qt Creator总会创建一个.pro文件,我们称.pro文件为Qt的工程管理文件.一个工程项目可以包含一个或多个.pro文件.理解和掌握pro文件的用法,将有利于Qt开发 ...

  10. 基于phathomjs token 不定时无响应问题排查

    问题描述 基于phathomjs的token池项目,基本原理是,打开淘宝页,获取匿名cookie,再由cookie中提取有效token,调用方通过该token获取淘宝数据 为方便基他人应用,封装了部分 ...