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

需求:
左边展示树,右边展示数据;点击左边的树,查询右边的表格数据。

特殊说明

css和js需要在数据表格基础上多引入ztree的文件。

<link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.all.min.js"></script>

树功能实现

  • 展示树列表

class 必须有fsTree样式

<ul id="treeDemo" class="ztree fsTree" url="/fsbus/S1003" tableId="fsDatagrid" inputs="menuId:$id"></ul>
属性 必输 默认值 名称 描述
id 树id 唯一id
class 样式 必须有 fsTree 样式
url 请求地址 ajax异步加载数据地址
tableId 数据表格id 点击左边树,需要刷新的表格id
inputs 参数 点击树,异步加载表格,需要携带的参数
  • 树菜单操作

树的菜单操作和 数据表格菜单操作类似,只是需要在 class 里面多增加一个样式 fsTree ,其他的都一致, 数据表格配置参考:http://www.itcto.cn/layui/fsLayuiPlugin%E6%95%B0%E6%8D%AE%E8%A1%A8%E6%A0%BC%E4%BD%BF%E7%94%A8/#表格按钮设置

<div class="layui-btn-group">
<button class="layui-btn fsTree" function="top" topUrl="add.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="新增菜单信息" inputs="parentId:$id">
<i class="layui-icon"></i>新增
</button>
<button class="layui-btn fsTree" function="top" topUrl="edit.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="编辑菜单信息" inputs="menuId:$id">
<i class="layui-icon"></i>编辑
</button>
<button class="layui-btn layui-btn-danger fsTree" function="submit" url="/fsbus/S1007" url="" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据?" inputs="menuId:$id">
<i class="layui-icon"></i>删除
</button>
<button class="layui-btn fsTree" function="refresh">
<i class="layui-icon">ဂ</i>刷新
</button>
</div>
  • 树demo
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-btn-group">
<button class="layui-btn fsTree" function="top" topUrl="add.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="新增菜单信息" inputs="parentId:$id">
<i class="layui-icon"></i>新增
</button>
<button class="layui-btn fsTree" function="top" topUrl="edit.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="编辑菜单信息" inputs="menuId:$id">
<i class="layui-icon"></i>编辑
</button>
<button class="layui-btn layui-btn-danger fsTree" function="submit" url="/fsbus/S1007" url="" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据?" inputs="menuId:$id">
<i class="layui-icon"></i>删除
</button>
<button class="layui-btn fsTree" function="refresh">
<i class="layui-icon">ဂ</i>刷新
</button>
</div>
</div>
<div class="layui-col-md12">
<ul id="treeDemo" class="ztree fsTree" url="/fsbus/S1003" tableId="fsDatagrid" inputs="menuId:$id"></ul>
</div>
</div>

数据表格配置

树+数据表格普通数据表格 没有任何区别,配置信息可以参考普通表格配置:http://www.itcto.cn/layui/fsLayuiPlugin数据表格使用/

  • 表格demo
<div class="layui-field-box">
<div class="layui-col-md12 layui-col-space1">
<div id="table_buttion_div">
<form id="query_form" style="display: none;">
<input type="text" id="menuId" name="menuId" value="0"/>
</form>
<button class="layui-btn" function="top" topUrl="addFunc.html" topWidth="700px" topHeight="350px" topTitle="新增功能号信息" inputs="menuId:#menuId">
<i class="layui-icon"></i>新增
</button>
<button class="layui-btn" function="refresh">
<i class="layui-icon">ဂ</i>刷新
</button>
</div>
</div>
<div class="layui-col-md12 layui-col-space1">
<table id="fsDatagrid" class="fsDatagrid" lay-filter="fsDatagrid" url="/fsbus/S1009" isPage="0" defaultForm="query_form"></table>
<div class="fsDatagridCols">
<p type="numbers" title="#"/>
<p checkbox="true"/>
<p field="name" title="名称" width="200" sort="true"/>
<p field="linkUrl" title="访问地址" width="300"/>
<p field="funcs" title="功能号" width="200"/>
<p fixed="right" align="center" toolbar="#barDemo" title="操作" width="150"/>
</div>
<script type="text/html" id="barDemo">
<a id="edit" class="layui-btn layui-btn-xs" lay-event="top" topUrl="editFunc.html" topWidth="700px" topHeight="350px" isSelect="1" topTitle="编辑功能号信息" inputs="id:">编辑</a>
<a id="del" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="submit" isConfirm="1" url="/fsbus/S1013" inputs="id:">删除</a>
</script>
</div>
</div>

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

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

  1. SPA项目开发之动态树+数据表格+分页

    SPA项目开发之动态树+数据表格+分页 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key="" index=""> < ...

  2. SPA项目开发动态树、数据表格、分页功能

    SPA项目开发 1.修改左侧动态树 LeftNav.vue <template> <el-menu router :" class="el-menu-vertic ...

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

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

  4. SPA项目开发之动态树以及数据表格和分页

    首先我们来看下数据库 t_vue_user t_vue_tree_node t_vue_articles 2. 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key=&qu ...

  5. fsLayuiPlugin数据表格动态转义

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

  6. jquery-treegrid树状表格的使用(.Net平台)

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

  7. treeGrid树形数据表格的json数据格式说明

    在使用easyUI 的treeGrid的时候,很多时候我们从数据库取出来的数据treeGrid却不能读取显示成一个树:如下 { menuCode: "a00", menuName: ...

  8. easyui源码翻译1.32--datagrid(数据表格)

    前言 此前网上有easyui1.25的源码  应该算是比较老的版本  之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34  1.33开始支持css3 算是又一个转折  但是 ...

  9. 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

随机推荐

  1. (零)linux 学习 -- 从 shell 开始

    The Linux Command Line 读书笔记 - 部分内容来自 http://billie66.github.io/TLCL/book/chap02.html 文章目录 前言 什么是 she ...

  2. 使用scrapy框架做赶集网爬虫

    使用scrapy框架做赶集网爬虫 一.安装 首先scrapy的安装之前需要安装这个模块:wheel.lxml.Twisted.pywin32,最后在安装scrapy pip install wheel ...

  3. 100天搞定机器学习|day54 聚类系列:层次聚类原理及案例

    几张GIF理解K-均值聚类原理 k均值聚类数学推导与python实现 前文说了k均值聚类,他是基于中心的聚类方法,通过迭代将样本分到k个类中,使每个样本与其所属类的中心或均值最近. 今天我们看一下无监 ...

  4. 如何用Java实现条件编译

    在 C 或 C++ 中,可以通过预处理语句来实现条件编译.代码如下: #define DEBUG #IFDEF DEBUUG /* code block 1 */ #ELSE /* code bloc ...

  5. Spring AOP日志实现(一)

    前置通知:获取访问的类,访问的方法,带参数和不带参数的 日志表信息描述字段: 获取访问时长:

  6. session和cookie有什么区别?

    1.存储位置不同 cookie的数据信息存放在客户端浏览器上. session的数据信息存放在服务器上. 2.存储容量不同 单个cookie保存的数据<=4KB,一个站点最多保存20个Cooki ...

  7. 编译 Linux 内核 时出现 Restart config 问题

    scripts/kconfig/conf --silentoldconfig Kconfig * * Restart config... * * * Enable the block layer * ...

  8. gitlab私有环境搭建

    1. 环境准备 安装所需的依赖包 yum install curl openssh-server openssh-clients postfix cronieGitLab使用postfix发送邮件 s ...

  9. 音视频入门-09-RGB&YUV互转-使用开源库

    * 音视频入门文章目录 * 介绍开源库 使用第三方开源库来简化开发,屏蔽一些底层的复杂度,节省大量编写代码的时间. libyuv: Google 开源的实现各种 YUV 与 RGB 之间相互转换.旋转 ...

  10. 解决:error LNK1169: 找到一个或多个多重定义的符号

    每一个c++项目中可以包含多个cpp文件和.h文件,不过只能有而且必须有一个cpp文件中包含main函数,否则就会报错.所以在一个c++项目中不能单独运行一个cpp文件,只能运行一个项目.如果你想一个 ...