福州网站建设仅需1000元起包含域名空间,详情18558752805

  • LayUI树形表格treetable使用详解

福州网站建设 >网站新闻 >php技术 >

https://blog.csdn.net/qq_40205116/article/details/89672232

LayUI是现在比较流行的一款前端框架,也有很多人基于LayUI开发了很多不错的组件,比如treetable树形表格。因为treetable是第三方基于LayUI开发的,所以需要先用Layui引入一下文件。


	
  1. layui.config({
  2. base : 'static/layui/'
  3. }).extend({
  4. treetable : 'treetable-lay/treetable'
  5. });

之后先看一下显示的效果。

之后页面只需要引入LayUI的CSS和JS就可以了。

页面给一个table标签,用于显示treetable中的数据样式。

<table class="layui-hide" id = "menu" lay-filter="menu"></table>

表格左上方的工具栏按钮组件代码。


	
  1. <script type="text/html" id="toolbarDemo">
  2. <div class="layui-btn-group">
  3. <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</button>
  4. <button class="layui-btn layui-btn-sm" lay-event="updata"><i class="layui-icon">&#xe642;</i>修改</button>
  5. <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
  6. <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</button>
  7. </div>
  8. </script>

JS请求加载数据及设置表格样式。


	
  1. yui.use(['treetable', 'table', 'layer'], function () {
  2. var table = layui.table;
  3. var layer = layui.layer;
  4. var treetable = layui.treetable;
  5. //渲染表格
  6. var renderTable = function(){
  7. layer.load(2); //加载层
  8. treetable.render({
  9. height: 'full-160',
  10. id:'menu',
  11. treeColIndex: 1, //树形图标显示在第几列
  12. treeSpid: '0', //最上级的父级id
  13. treeIdName: 'id', //id字段的名称
  14. treePidName: 'parentId', //父级节点字段
  15. treeDefaultClose: false, //是否默认折叠
  16. treeLinkage: false, //父级展开时是否自动展开所有子级
  17. elem: '#menu', //表格id
  18. url: 'menu/treedata',
  19. toolbar: '#toolbarDemo',
  20. page: false,
  21. cols: [ [
  22. {type:'radio'},
  23. {field: 'name', title: '菜单名称'},
  24. {field: 'url' , title: '地址'},
  25. {field: 'icon' , hide : true, title: '图标'},
  26. {field: 'idx', title: '排序'}
  27. ] ],
  28. //数据渲染完的回调
  29. done: function () {
  30. //关闭加载
  31. layer.closeAll('loading');
  32. }
  33. })
  34. };
  35. renderTable();
  36. });

其中URL地址为请求数据地址。后台对应的方法。


	
  1. @RequestMapping(value="/treedata")
  2. @ResponseBody
  3. public Object list(TbMenuForm form){
扫描二维码分享到微信
确 认

Copyright © 2014-2019  www.xl779.com福州网站制作 福州网站建设尽在福州E点互动 版权所有