福州網站建設僅需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.526278.tw福州網站制作 福州網站建設盡在福州E點互動 版權所有

cctv5电竞 精选三肖3码公开 qq欢乐麻将怎么玩刷豆 麻将算钱规则图 上海快3走势图图表 湖南动物快乐十分前三组选遗漏数据 kk棋牌打麻将 微信红包扫雷群二维码 76人队标 宁夏十一选五走势图爱乐彩 甘肃快3开奖号 喜乐彩票真的假的 真钱手游棋牌游戏 吉祥棋牌吉林市麻将 中原河南麻将手机版下载 美女捕鱼龙晶 吉林11选五5开奖结果前三