easyui 的樹表格（treegrid）

時間  2019-11-17
標籤 easyui 表格 treegrid 简体版
原文   原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--官網有，本身下載就行-->
<!--http://www.jeasyui.net/demo/380.html-->
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<style>
#datagrid-row-r2-2-uuuu{
    display:none;
}
</style>
<body>
    <div class="box">
        
            
        <div class="buttonbox">
            <button class="btn btn-primary" onclick="addData()">同級新增</button>
            <button class="btn btn-primary" onclick="addData1()">下級新增</button>
            <button class="btn btn-primary" onclick="deleteData()">刪除</button>
            <button class="btn btn-primary" onclick="moveUp()">上移</button>
            <button class="btn btn-primary" onclick="MoveDown()">下移</button>
            <button class="btn btn-primary" onclick="levelUp()">升級</button>
            <button class="btn btn-primary" onclick="levelDown()">降級</button>
            <button class="btn btn-primary rightli" onclick="saveajax()">保存</button>
        
        </div>
        <table id="tg" class="easyui-treegrid" style="width: 100%; height: 100%">
                    </table>
    </div>
</body>

<script type="text/javascript">

var edlitid=null;
var treeData=null;
//獲取基本數據，ajax
var result={"status":200,"msg":"OK","data":[{"InnerCode":"00001","IsLeaf":1,"isNoUse":0,"eqCatName":"1、土地、房屋及構造物","eqCatCode":"J01","PID":"","OrderNo":1,"id":"2d361334ad792e9b357f559659d94dcb"},{"InnerCode":"00002","IsLeaf":0,"isNoUse":0,"eqCatName":"2、通用設備","eqCatCode":"J02","PID":"","OrderNo":2,"id":"e6803357c364a826fd0fb645e7dde61c"},{"InnerCode":"00003","IsLeaf":1,"isNoUse":0,"eqCatName":"3、專用設備","eqCatCode":"J03","PID":"","OrderNo":3,"id":"754462f158b30a9450ae19f7388f6bfa"},{"InnerCode":"00004","IsLeaf":1,"isNoUse":0,"eqCatName":"4、交通運輸設備","eqCatCode":"J04","PID":"","OrderNo":4,"id":"c75afac22b9234647e5c8106c570ea30"},{"InnerCode":"00005","IsLeaf":1,"isNoUse":0,"eqCatName":"5、電氣設備","eqCatCode":"J05","PID":"","OrderNo":5,"id":"4db317205f913367082a4f572ef50fab"},{"InnerCode":"00006","IsLeaf":1,"isNoUse":0,"eqCatName":"6、電子產品及通訊設備","eqCatCode":"J06","PID":"","OrderNo":6,"id":"d3c935dc4e329b86fb2360a4eaa3a193"},{"InnerCode":"00007","IsLeaf":1,"isNoUse":0,"eqCatName":"7、儀器儀表、計量標準具","eqCatCode":"J07","PID":"","OrderNo":7,"id":"d049ae596d1fe25d3c3b3f1c9ab986e0"},{"InnerCode":"00008","IsLeaf":1,"isNoUse":0,"eqCatName":"8、文藝體育設備","eqCatCode":"J08","PID":"","OrderNo":8,"id":"13aac77fce3922d8fc2146c5564153d5"},{"InnerCode":"00009","IsLeaf":1,"isNoUse":0,"eqCatName":"9、圖書物及陳列品","eqCatCode":"J09","PID":"","OrderNo":9,"id":"7eb80baaf07567836d006594b506845f"},{"InnerCode":"00010","IsLeaf":1,"isNoUse":0,"eqCatName":"10、傢俱用具及其餘類","eqCatCode":"J10","PID":"","OrderNo":10,"id":"50ad86b35d581d24fcfb6703431220dd"}],"ok":true}
treeData=toTree(result.data);//處理數據，也能夠直接用數組對象格式數據，看官網就行
loadDataZCB()//加載數據

//獲取最終數據
function showData(){
    return  $('#tg').treegrid('getData');
    
}
//保存提交
function saveajax(){
    //ajax 提交數據
    var givedata=showData();
    console.log("提交的數據"+JSON.stringify(givedata))
    
}
//刪除
function deleteData(type){
    var row = $('#tg').treegrid('getSelected');
    if (row){
        $('#tg').treegrid('remove',row.id);
    }
}
//同級新增
function addData(){
    var id = getUid32();
    if(edlitid){
        $('#tg').treegrid('endEdit', edlitid);
    }
    if(JSON.stringify(showData()) == "[]"){//初始數據爲空時第一次同級新增長載數據
        var dd = [{"id":id,"eqCatName":"","eqCatCode":"","_parentId":"0000","IsLeaf":1}];
        treeData=toTree(dd);
        loadDataZCB();
        edlitid=id;
        $('#tg').treegrid('select',id);//選中狀態
        $('#tg').treegrid('beginEdit',id);//開始編輯
    }else{
        var row = $('#tg').treegrid('getSelected');
        if (row){
            edlitid=id;
            var _parentId = row._parentId;
            var newData = {"id":id,"eqCatName":"","eqCatCode":"","_parentId":_parentId,"IsLeaf":1};
            $('#tg').treegrid('insert', {
                    after: row.id,//或者 after
                    data: newData
            });
            $('#tg').treegrid('beginEdit', id);//開始編輯
        }
    }
    
    
}
//下級新增
function addData1(){
    var row = $('#tg').treegrid('getSelected');
    if (row){
        if(edlitid){
            $('#tg').treegrid('endEdit', edlitid);
        }
        var _parentId = row.id;
        var id = getUid32();
        edlitid=id;
        var children = [{"id":id,"eqCatName":"","eqCatCode":"","_parentId":_parentId,"IsLeaf":1}];
        $('#tg').treegrid('append', {
            parent: row.id,//或者 after
            data: children
        });
        
         $('#tg').treegrid('update',{
            id:id,
            row: {
                IsLeaf: 0,
            }
        });  
        $('#tg').treegrid('expand',_parentId);    //展開當前節點
        $('#tg').treegrid('beginEdit', id);
    }
    
}

//編輯
function edit(){
    if (editingId != undefined){
        $('#tg').treegrid('select', editingId);
        return;
    }
    var row = $('#tg').treegrid('getSelected');
    if (row){
        editingId = row.id
        $('#tg').treegrid('beginEdit', editingId);
    }
    
}
//取消編輯
function cancel(){
    if (editingId != undefined){
        $('#tg').treegrid('cancelEdit', editingId);
        save();
        return;
    }
    
    
}
//上移
function moveUp(){
    //TODO 判斷是否能上移
    var row = $('#tg').treegrid('getSelected');
    if (row){
        var parant = $('#tg').treegrid('getParent',row.id);
        var curentIndex = parant.children.indexOf(row);
        //TODO 判斷  curentIndex>1等等
        if(curentIndex>=1){
            var lastNode = parant.children[curentIndex-1];
            $('#tg').treegrid('remove',row.id);
            $('#tg').treegrid('insert', {
                    before: lastNode.id,
                    data: row
            });
        }else{
            $.messager.alert('提示','最上一級了');
        }
        $('#tg').treegrid('select',row.id);
        
    }
}
//下移
function MoveDown(){
    var row = $('#tg').treegrid('getSelected');
    if (row){
        var parant = $('#tg').treegrid('getParent',row.id);
        var curentIndex = parant.children.indexOf(row);
        
        if(curentIndex<parant.children.length-1){
            var nextNode = parant.children[curentIndex+1];
            $('#tg').treegrid('remove',row.id);
            $('#tg').treegrid('insert', {
                    after: nextNode.id,
                    data: row
            });
        }else{
            $.messager.alert('提示','最後一級了');
        }

        $('#tg').treegrid('select',row.id);
        
    }
}
//升級
function levelUp(){
    var row = $('#tg').treegrid('getSelected');
    if (row){
        var level = $('#tg').treegrid('getLevel',row.id);
        //TODO 判斷是否能升級
        if(level > 2){
            var parant = $('#tg').treegrid('getParent',row.id);
            var parentId = parant.id;
            $('#tg').treegrid('remove',row.id);
            $('#tg').treegrid('insert', {
                    after: parant.id,//或者 after
                    data: row
            });
        }else{
            $.messager.alert('提示','不能再升了親！');
        }
        $('#tg').treegrid('select',row.id);
        
    }

}
//降級
function levelDown(){
    var row = $('#tg').treegrid('getSelected');
    if (row){
        //TODO 判斷
        var level = $('#tg').treegrid('getLevel',row.id);
        
        var brothers;//同級節點
        if(level > 1){
            var parant = $('#tg').treegrid('getParent',row.id);
            brothers = parant.children;
        }else{
            brothers = $('#tg').treegrid('getRoots');
        }
        var curentIndex = 0;
        
        if(brothers){
            curentIndex = brothers.indexOf(row);
            //和選中節點同級的上一個節點
            if(curentIndex >= 1){
                $('#tg').treegrid('remove',row.id);
                var lastNode = brothers[curentIndex-1];
                $('#tg').treegrid('append', {
                    parent: lastNode.id,
                    data: [row]
                });
            }else{
                $.messager.alert('提示','最下一級了');
            }
        }
        //TODO 判斷
        $('#tg').treegrid('select',row.id);
        
    }
}

//加載子節點
function loadChildren(row){
    $('#tg').treegrid('select',row.id);
    //懶加載的ajax的數據
    var result={"status":200,"msg":"OK","data":[{"InnerCode":"0000200001","IsLeaf":1,"isNoUse":0,"eqCatName":"鍋爐及原動機","eqCatCode":"J02-1","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":1,"id":"bb74195e424ba6d4d087e8d90d3a00b0"},{"InnerCode":"0000200002","IsLeaf":1,"isNoUse":0,"eqCatName":"金屬加工設備","eqCatCode":"J02-2","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":2,"id":"76a836d4485a8ec95b7ff5cdec1ef4ad"},{"InnerCode":"0000200003","IsLeaf":1,"isNoUse":0,"eqCatName":"起重設備","eqCatCode":"J02-3","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":5,"id":"0eb2fe25fcfeb79997275ee861eab671"},{"InnerCode":"0000200004","IsLeaf":1,"isNoUse":0,"eqCatName":"運輸設備","eqCatCode":"J02-4","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":4,"id":"f23d731dd6674625440c4f8372798f7a"},{"InnerCode":"0000200005","IsLeaf":1,"isNoUse":0,"eqCatName":"給料設備","eqCatCode":"J02-5","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":6,"id":"f6d6efdec46a7eec52d5a6a66cc680be"},{"InnerCode":"0000200006","IsLeaf":1,"isNoUse":0,"eqCatName":"裝卸設備","eqCatCode":"J02-6","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":7,"id":"1e7e91ccdde43b227326d832055db64f"},{"InnerCode":"0000200007","IsLeaf":1,"isNoUse":0,"eqCatName":"泵","eqCatCode":"J02-7","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":8,"id":"da6047c084aa4bf9641c99a3e3fe9f7d"},{"InnerCode":"0000200008","IsLeaf":1,"isNoUse":0,"eqCatName":"風機","eqCatCode":"J02-8","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":9,"id":"cd43807ad266a22f96de45a61096d291"},{"InnerCode":"0000200009","IsLeaf":1,"isNoUse":0,"eqCatName":"氣體壓縮機","eqCatCode":"J02-9","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":10,"id":"32bb6896e54aa0858d5a7f6b05d12b09"},{"InnerCode":"0000200010","IsLeaf":1,"isNoUse":0,"eqCatName":"氣體分離及液化設備","eqCatCode":"J02-10","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":11,"id":"6aad875f59c16ee190d880c95d69fca0"},{"InnerCode":"0000200011","IsLeaf":1,"isNoUse":0,"eqCatName":"製冷空調設備","eqCatCode":"J02-11","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":12,"id":"2b4dfdf25b65d4f1869436b4e3c05e18"},{"InnerCode":"0000200012","IsLeaf":1,"isNoUse":0,"eqCatName":"對焊機","eqCatCode":"J02-12","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":13,"id":"590b3eaba404d2ff43388ffe88525ac8"},{"InnerCode":"0000200013","IsLeaf":1,"isNoUse":0,"eqCatName":"包裝、氣動工具","eqCatCode":"J02-13","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":14,"id":"a645e027462b7620e6f0ad956dc88444"},{"InnerCode":"0000200014","IsLeaf":1,"isNoUse":0,"eqCatName":"塔式起重機","eqCatCode":"J02-14","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":15,"id":"979c9a11211d4508176d8df26d3c1930"},{"InnerCode":"0000200015","IsLeaf":1,"isNoUse":0,"eqCatName":"壓路機","eqCatCode":"J02-15","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":16,"id":"3b5306fb647f9228dfa77e36f4ae4946"},{"InnerCode":"0000200016","IsLeaf":1,"isNoUse":0,"eqCatName":"試驗檢測","eqCatCode":"J02-16","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":17,"id":"90285d6d77a6046b0fd9497b186bf030"},{"InnerCode":"0000200017","IsLeaf":1,"isNoUse":0,"eqCatName":"升降機","eqCatCode":"J02-17","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":18,"id":"90df5b07fdd38e6dff41620d287f4164"},{"InnerCode":"0000200018","IsLeaf":1,"isNoUse":0,"eqCatName":"鋼管扣件","eqCatCode":"J02-18","PID":"e6803357c364a826fd0fb645e7dde61c","OrderNo":19,"id":"e70d7f319376ae6e37239a89e6c29ced"}],"ok":true};
    var children = result.data;
    if(row.IsLeaf == 0){//有下級
        $('#tg').treegrid('append', {
            parent: row.id,
            data: children
        });
        //TODO  修改ICON等
        row.iconCls='icon-folder';//換成統一的擁有下級的圖標
        row.state='open';
        row.addfirst='open';
        $('#tg').treegrid('refresh', row.id);
    }
    
    if(row.IsLeaf == 1){//沒有下級
        row.state=null;
        $('#tg').treegrid('refresh', row.id);
        
    }
}
function loadDataZCB(){
    console.log("數據"+JSON.stringify(treeData))
    $('#tg').treegrid({    
        data:treeData,
        iconCls: 'icon-save',
        singleSelect:true,
        idField:'id',  //關鍵字段來標識樹節點，不能重複  
        treeField:'eqCatName',  //樹節點字段，也就是樹節點的名稱
        fitColumns:true,
        rownumbers:true,//顯示一個行號列
        collapsible:true,//收起表格的內容
        width:" 100%",
        height: 450,
        loadMsg: '數據加載中...',
        animate:true,//在節點展開或摺疊的時候是否顯示動畫效果
        lines:true,//顯示treegrid行
        columns:[[    
            {field:'eqCatName',title:'名稱',width:100,align:'left', editor:'text'},    
            {field:'eqCatCode',title:'編號',width:60,align:'left', editor:'text'},    
           
        ]],
        onBeforeExpand: function(row){//點擊節點展開事件
            if(row.addfirst==undefined){
                loadChildren(row);
            }
        },
          onDblClickRow:function(row){//雙擊編輯
              if(edlitid){
                  $('#tg').treegrid('endEdit', edlitid);
              }
              edlitid=row.id;
              $('#tg').treegrid('beginEdit', row.id);
        },
        onClickRow:function(){
            if(edlitid){
                  $('#tg').treegrid('endEdit', edlitid);
              }
    },javascript

　　onLoadSuccess:function(row){//隱藏根節點
            var divs = getElementByAttr('tr', 'node-id', /^uuuu/);
            for(var i = 0; i < divs.length; i++) {
                divs[i].style.display="none";
            }
        }
    });
    
}css

//經過自定義屬性獲取dom
function getElementByAttr(tag, dataAttr, reg) {
  var aElements = document.getElementsByTagName(tag);
  var aEle = [];
  for(var i = 0; i < aElements.length; i++) {
    var ele = aElements[i].getAttribute(dataAttr);
    if(reg.test(ele)) {
        aEle.push(aElements[i]);
    }
  }
  return aEle;
}
function save(){
    if (editingId != undefined){
        var t = $('#tg');
        t.treegrid('endEdit', editingId);
        editingId = undefined;
        var persons = 0;
        var rows = t.treegrid('getChildren');
        for(var i=0; i<rows.length; i++){
            var p = parseInt(rows[i].persons);
            if (!isNaN(p)){
                persons += p;
            }
        };
        
    }
}

//修改數據（json轉爲json樹）
function toTree(data) { // 刪除 全部 children,以防止屢次調用
    if(data.length==0){
        return null;
    }
    data.forEach(function(item) {
        delete item.children;
    }); // 將數據存儲爲 以 id 爲 KEY 的 map 索引數據列
    var map = {};
    data.forEach(function(item) {
        map[item.id] = item;
    });  
    var val = [];
    data.forEach(function(item) { // 以當前遍歷項，的_parentId,去map對象中找到索引的id
        var parent = map[item._parentId]; // 好繞啊，若是找到索引，那麼說明此項不在頂級當中,那麼須要把此項添加到，他對應的父級中
        if(parent) {
            (parent.children || (parent.children = [])).push(item);
            
        } else { //若是沒有在map中找到對應的索引ID,那麼直接把 當前的item添加到 val結果集中，做爲頂級
            
            if(item.IsLeaf==0){
                item.children=[];
                item.state="closed";
            }
            val.push(item);
        }
    });
    var treeData = [{//默認加載了個跟節點，影藏了，要不上移下移若是是根節點還沒找到辦法處理
        "id":"uuuu",
        "eqCatName":"",
        "IsLeaf":"0",
        "children":val,
    }]
    return treeData;
}
//生產惟一id
function getUid32() {
    function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
    return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
}

</script>
</html>html

效果圖java

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程