設定EasyUI的可編輯Treegrid單元格內容
阿新 • • 發佈:2019-02-19
在使用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);//遞迴設定其父節點值
}
}