前端框架——Layui（樹形表格treeGrid ）

osalien發表於2018-12-12
前端框架UI

需求

最近在開發一個檔案庫模組，需要用到樹形表格來展現資料夾的層次感。

官方文件

文件：https://fly.layui.com/extend/treeGrid/

線上 demo 

碼雲地址： 程式碼 

使用方法

首先我們把treeGrid.js檔案複製到你的專案中去，然後在js檔案中引用，在此我把最簡單的實現給大家展現出來

html檔案

<div style="height: 100%">
   <div class="dBody">
        <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
    </div>
</div>

js檔案

var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
    layui.config({
        base: 'design/extend/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer'], function(){
        var $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            ,idField:'id'
            ,url:'/data2.json'
            ,cellMinWidth: 100
            ,treeId:'id'//樹形id欄位名稱
            ,treeUpId:'pId'//樹形父id欄位名稱
            ,treeShowName:'name'//以樹形式顯示的欄位
            ,cols: [[
                {width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
                    ,templet: function(d){
                    var html='';
                    var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>';
                    var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>';
                    return addBtn+delBtn;
                }
                }
                ,{type:'checkbox',sort:true}
                ,{field:'name', title: '檔名稱',/*edit:'text',*/sort:true}
                ,{field:'url',title: '檔案路徑',sort:true,templet: function(d){
                   var url = d.url;
                    if(d.state == 0){
                        url = "";
                    }
                    return url;
                }}
            ]]
            ,page:false
        });

        treeGrid.on('tool('+tableId+')',function (obj) {
            if(obj.event === 'del'){//刪除行
                del(obj);
            }else if(obj.event==="add"){//新增行
                add(obj.data);
            }
        });
    });

    function del(obj) {
        layer.confirm("你確定刪除資料嗎？如果存在下級節點則一併刪除，此操作不能撤銷！", {icon: 3, title:'提示'},
            function(index){//確定回撥
                obj.del();
                layer.close(index);
            },function (index) {//取消回撥
               layer.close(index);
            }
        );
    }

返回資料格式

{
    "msg": "",
    "code": 0,
    "data": [
                {
                    "id": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "name": "Git",
                    "pId": 0,
                    "url": "C:/Users/admin/Desktop/RBooks/Git",
                    "state": 0
                },
                {
                    "id": "file69a87831-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "name": "GitHub入門與實踐.pdf",
                    "pId": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "url": "C:/Users/admin/Desktop/RBooks/Git/GitHub入門與實踐.pdf",
                    "state": 1
                },
                {
                    "id": "file69a87832-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "name": "GitLab搭建_1.0.pdf",
                    "pId": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "url": "C:/Users/admin/Desktop/RBooks/Git/GitLab搭建_1.0.pdf",
                    "state": 1
                },
                {
                    "id": "file69a89f40-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "name": "git小書.pdf",
                    "pId": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "url": "C:/Users/admin/Desktop/RBooks/Git/git小書.pdf",
                    "state": 1
                },
                {
                    "id": "file69a89f41-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "name": "Git版本控制管理 第2版 （美）羅力格（美）麥卡洛著.pdf",
                    "pId": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "url": "C:/Users/admin/Desktop/RBooks/Git/Git版本控制管理 第2版 （美）羅力格（美）麥卡洛著.pdf",
                    "state": 1
                },
                {
                    "id": "file69a89f42-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "name": "Html5",
                    "pId": 0,
                    "url": "C:/Users/admin/Desktop/RBooks/Html5",
                    "state": 0
                },
                {
                    "id": "file69a8c650-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "name": "14-CSS設計指南(第3版)-2013-中文版.pdf",
                    "pId": "file69a89f42-fdd5-11e8-b8d8-0b4c653a3f4a",
                    "url": "C:/Users/admin/Desktop/RBooks/Html5/14-CSS設計指南(第3版)-2013-中文版.pdf",
                    "state": 1
                }
            ],
    "count": 924,
    "is": true,
    "tip": "操作成功！"
}

這裡我們需要注意id與PID之間的對應，也就是資料夾與檔案之間的關係，相信接觸過tree的人都會很熟悉

關於後臺中資料夾的遍歷返回在這我就不多講了。到這基本就ok了，我給大家看一下效果圖

遇到的問題

在treeGrid 的使用過程中，因為需求的不同還是有許多問題的，比如：

  1. 資料夾的圖示因為更新已經刪除了，所以我們為了美觀需要修改一下
    解決辦法：https://github.com/IAmYuanZhao/layui-treeGrid
  2. 因為資料夾刪除選擇時，其實已經將資料夾與其裡面的檔案刪除了，但是因為多選框的子節點會隨父節點選擇，所以子檔案會因二次刪除而報錯；以及新增資料夾和上傳檔案都以為父節點與子節點的關係導致報錯。所以我們需要修改多選框的選擇獨立，父節點與子節點互相不關聯。
    解決辦法：修改treeGrid.js檔案，修改後的檔案地址

 

相關文章