How do you define the treegrid? And how do you call these code? Please describe your question clearly.
Sure, I just wrote a simplified version to reproduce the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<link href="themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="themes/icon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript">
var editId = undefined;
function addRow() {
var node = $('#tg').treegrid('getSelected');
if (node) {
var newRow = {
parent: node.Id,
data: [{
Id: 0,
iconCls: 'icon-cancel',
_parentId: node.Id
}]
};
$('#tg').treegrid('append', newRow);
}
};
function editRow() {
var node = $('#tg').treegrid('getSelected');
if (node) {
$('#tg').treegrid('beginEdit', node.Id);
editId = node.Id;
}
};
function save() {
if (editId != undefined) {
$('#tg').treegrid('endEdit', editId);
editId = undefined;
}
};
function reject() {
if (editId != undefined) {
$('#tg').treegrid('cancelEdit', editId);
editId = undefined;
}
};
</script>
</head>
<body>
<table id="tg" class="easyui-treegrid" fit="true" singleselect="true" url="data.json"
method="get" idfield="Id" treefield="Code" animate="true" toolbar="#tb" data-options="footer: '#ft'">
<thead>
<tr>
<th field="Id" width="20%" align="center" hidden="true">
Id
</th>
<th field="Code" width="20%" align="left" editor="textbox">
Code
</th>
<th field="Name" width="20%" align="center" editor="textbox">
Name
</th>
<th field="_parentId" width="20%" align="center" hidden="true">
Parent
</th>
<th field="iconCls" width="20%" align="center" editor="textbox">
Icon
</th>
</tr>
</thead>
</table>
<div id="ft" style="padding: 2px 5px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"
onclick="addRow();">New</a> <a href="javascript:void(0)" class="easyui-linkbutton"
iconcls="icon-remove" plain="true" onclick="editRow();">Edit</a> <a href="javascript:void(0)"
class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="removeRow();">
Remove</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save"
plain="true" onclick="save();">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton"
iconcls="icon-undo" plain="true" onclick="reject();">Cancel</a>
</div>
</body>
</html>
pls
1 New a child node
2 Edit the new node
3 Press save button
update: the json data
{"total":3,"rows":[{
"Id":1,
"Code":"Admin",
"Name":"Bill",
"_parentId":0,
"iconCls":"icon-ok"
},{
"Id":2,
"Code":"User",
"Name":"Smith",
"_parentId":1,
"iconCls":"icon-ok"
},{
"Id":3,
"Code":"User",
"Name":"White",
"_parentId":2,
"iconCls":"icon-ok"
}]}
