1. 程式人生 > >設定EasyUI的可編輯Treegrid單元格內容

設定EasyUI的可編輯Treegrid單元格內容

在使用EasyUI的可編輯Treegrid功能時,需要在程式碼中設定Treegrid的內容;
由於Treegrid沒有完全繼承DataGrid的方法,比如Treegrid不可以使用行索引,以及Treegrid沒有updateRow函式,而此時我們需要設定它的值時應該怎麼做呢?
現在我將我的解決方法給大家分享出來,如下:
1、請看下圖需求:單擊單元格設定第三列的值
這裡寫圖片描述
2、程式碼如下:

<!--前端程式碼-->
<table class="easyui-treegrid" id="Huifold_dg" data-options="border:false">
            <thead
>
<tr> <th data-options="field:'name'" width="40%"> <font class="my-datagrid-header">事項</font> </th> <th data-options="field:'code',align:'center'" width="20%"> <font
class="my-datagrid-header">
程式碼</font> </th> <th data-options="field:'num',align:'center',editor:'numberbox'" width="20%"> <font class="my-datagrid-header">數量(只能填寫數字)</font> </th> <th
data-options="field:'dw',align:'center'" width="20%">
<font class="my-datagrid-header">單位</font> </th> </tr> </thead> </table>
//初始化樹形資料表格
initTreeGrid = function(){
        entryMess.dg = $("#dg");
        entryMess.dg.treegrid({
            url:url,//請求路徑
            queryParams:{'proId':id},//請求引數
            fitColumns:true,
            idField: 'id',
            treeField: 'name',
            singleSelect: false,
            loadFilter: function(data){
                var li = data.treeData;
                return li;
            },
            onLoadSuccess:function(data){
                $("[node-id='ROOT']").hide();//隱藏ROOT節點
            },
            onClickCell:function(field,row){//單擊單元格時進行內容編輯
                if(row != null){
                    if (editingId != undefined){
                        entryMess.dg.treegrid('endEdit', editingId);
                        editingId = undefined;
                        entryMess.setParentValue(entryMess.row);//設定父節點的值為子節點相加
                    }
                }
                entryMess.dg.treegrid('clearChecked')//單擊取消之前選中行
                entryMess.dg.treegrid('select',row.id)//單擊取消之前選中行
                entryMess.edit();//編輯函式

            }
        });
    }
//編輯函式
var editingId;
    entryMess.edit = function(){
        if (editingId != undefined){
            entryMess.dg.treegrid('select', editingId);
            return;
        }
        var row = entryMess.dg.treegrid('getSelected');
        if (row){
            if(entryMess.dg.treegrid('getChildren',row.id).length==0){//子節點(孩子節點為0個)
                editingId = row.id
                entryMess.dg.treegrid('beginEdit', editingId);
                entryMess.row = row;
            }else{
                layer.alert("您只能給該項的下級項設定數額!");
            }
        }
    }
//設定父節點值
entryMess.setParentValue = function(row){
    var parent = entryMess.dg.treegrid('getParent',row.id);//獲取上一個編輯的節點的父節點
    if(parent != null && parent.id !="ROOT"){
        var childs = entryMess.dg.treegrid('getChildren',parent.id);//獲取孩子節點
        var num = 0//求得父節點num值
        for(var i=0; i<childs.length; i++){
            if(childs[i].num != null && childs[i].num != "" && childs[i].parent==parent.id)
                num = num + parseInt(childs[i].num);
        }
        if(num != 0){//修改父節點num值
            entryMess.dg.treegrid('select', parent.id).treegrid('beginEdit', parent.id);
            entryMess.dg.treegrid('beginEdit',parent.id);
            var options = {
                id: parent.id,
                field:'num'
            }
            var ed = entryMess.dg.treegrid('getEditor',options);
            $(ed.target).numberbox('setValue', num);
            entryMess.dg.treegrid('endEdit',parent.id);
        }
        entryMess.setParentValue(parent);//遞迴設定其父節點值
    }
}