<sub id="z53d3"><listing id="z53d3"></listing></sub>

    <em id="z53d3"></em>
    <address id="z53d3"></address>

            <noframes id="z53d3">

            福州網站建設僅需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.siamposts.com福州網站制作 福州網站建設盡在福州E點互動 版權所有 閩ICP備16037694號-2

            你能塞多少樱桃我就陪你多久

            <sub id="z53d3"><listing id="z53d3"></listing></sub>

              <em id="z53d3"></em>
              <address id="z53d3"></address>

                      <noframes id="z53d3">