关于TreeGrid中嵌套treeselect的问题 - jQuery MiniUI

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="/scripts/miniUI.css" rel="stylesheet" />
<script src="/scripts/boot.js"></script>
<link href="/scripts/miniui/themes/blue/skin.css" rel="stylesheet" />
</head>
<body>
<input type="button" value="插入节点(前)" onclick="onAddBefore()" />
<input type="button" value="插入节点(后)" onclick="onAddAfter()" />
<input type="button" value="插入节点(子节点)" onclick="onAddNode()"/>
<input type="button" value="删除节点" onclick="onRemoveNode()" />
<input type="button" value="保存" onclick="EventSaveData()" style="margin-left: 30px; font-weight: bold;" />
<h3></h3>
<div id="tree1" class="mini-treegrid" url="/Control/api.ashx?method=QueryCollModelInfo" style="width: 1500px; padding: 5px;height:auto;"
showtreeicon="true" idfield="fid" parentfield="pid" resultastree="false" showtreeicon="true"
allowdrag="true" allowdrop="true" allowleafdropin="true" expandonnodeclick="false" treecolumn="taskname" allowresize="true" allowcellselect="true" allowcelledit="true" oncellvalidation="onCellValidation">
<div property="columns">
<div type="indexcolumn"></div>
<div field="fid" width="100">编号<input class="mini-textbox" style="width:100%;" /></div>
<div name="taskname" field="ModelName" width="220">模块名称<input property="editor" class="mini-textbox" style="width:100%;" /></div>
<div field="ModelUrl" width="300px;">链接地址<input property="editor" class="mini-textbox" style="width:100%;" /></div>
<div field="ListPowerDepartmentID" width="100" displayfield="DepartmentName" >
部门权限
<input property="editor" class="mini-treeselect" multiselect="true" value="" text="" textfield="DepartmentName" valuefield="fid" parentfield="pid" checkrecursive="true" showfoldercheckbox="true" expandonload="false" showclose="true" oncloseclick="onCloseClick" popupwidth="200" url="/Control/api.ashx?method=QueryCollDepartmentInfo" />
</div>
<div field="ListPowerUser" width="100%">员工权限<input property="editor" class="mini-textbox" style="width:100%;" /></div>
<div field="LanguageID" width="100px;">语言包ID<input property="editor" class="mini-textbox" style="width:100%;" /></div>
<div field="RemarkInfo" width="300px;">备注<input property="editor" class="mini-textarea" style="width:100%;" /></div>
</div>
</div>
<script type="text/javascript">
function onAddBefore(e) {
var tree = mini.get("tree1");
var node = tree.getSelectedNode();
var newNode = {};
tree.addNode(newNode, "before", node);
}
function onAddAfter(e) {
var tree = mini.get("tree1");
var node = tree.getSelectedNode();
var newNode = {};
tree.addNode(newNode, "after", node);
}
function onAddNode(e) {
var tree = mini.get("tree1");
var node = tree.getSelectedNode();
var newNode = {};
tree.addNode(newNode, "add", node);
}
function onEditNode(e) {
var tree = mini.get("tree1");
var node = tree.getSelectedNode();
tree.beginEdit(node);
}
function onRemoveNode(e) {
var tree = mini.get("tree1");
var node = tree.getSelectedNode();
if (node) {
if (confirm("确定删除选中节点?")) {
tree.removeNode(node);
EventRemoveNode(node);
}
}
}
function onMoveNode(e) {
var tree = mini.get("tree1");
var node = tree.getSelectedNode();
alert("moveNode");
}
function EventSaveData() {
var tree = mini.get("tree1");
var data = tree.getData();
var json = mini.encode(data);
var msgid = mini.loading("数据保存中，请稍后......", "保存数据");
$.ajax({
url: "/Control/api.ashx?method=InsertCollModeInfo",
data: { data: json },
type: "post",
success: function (text) {
mini.hideMessageBox(msgid);
tree.load("/Control/api.ashx?method=QueryCollModelInfo");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
}
function EventRemoveNode(node)
{
var tree = mini.get("tree1");
var json = node.length <= 0 ? null : mini.encode(node);
var msgid = mini.loading("数据删除中，请稍后......", "删除数据");
$.ajax({
url: "/Control/api.ashx?method=DeleteCollModeInfo",
data: { data: json },
type: "post",
success: function (text) {
mini.hideMessageBox(msgid);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
}
function onCloseClick(e) {
var obj = e.sender;
obj.setText("");
obj.setValue("");
}
function ondrawcell(e)
{
var tree = e.sender;
var node = e.node;
if (e.field == 'ListPowerDepartmentID') {
e.cellHtml = "12321321";
}
}
</script>
</body>
</html>

复制代码

<div id="tree1" class="mini-treegrid" url="/Control/api.ashx?method=QueryCollModelInfo" style="width: 1500px; padding: 5px;height:auto;"
showtreeicon="true" idfield="fid" parentfield="pid" resultastree="false" showtreeicon="true" ondrawcell="onDrawCell"
allowdrag="true" allowdrop="true" allowleafdropin="true" expandonnodeclick="false" treecolumn="taskname" allowresize="true" allowcellselect="true" allowcelledit="true" oncellvalidation="onCellValidation">
<div property="columns">
<div type="indexcolumn"></div>
<div field="fid" width="100">编号<input class="mini-textbox" style="width:100%;" /></div>
<div name="taskname" field="ModelName" width="220">模块名称<input property="editor" class="mini-textbox" style="width:100%;" /></div>
<div field="ModelUrl" width="300px;">链接地址<input property="editor" class="mini-textbox" style="width:100%;" /></div>
<div field="ListPowerDepartmentID" width="100" displayfield="DepartmentName">
部门权限
<input property="editor" class="mini-treeselect" multiselect="true" value="" text="" textfield="DepartmentName" valuefield="fid" parentfield="pid" checkrecursive="true" showfoldercheckbox="true" expandonload="false" showclose="true" oncloseclick="onCloseClick" popupwidth="200" url="/Control/api.ashx?method=QueryCollDepartmentInfo" />
</div>
<div field="ListPowerUser" width="100%">员工权限<input property="editor" class="mini-textbox" style="width:100%;" /></div>
<div field="LanguageID" width="100px;">语言包ID<input property="editor" class="mini-textbox" style="width:100%;" /></div>
<div field="RemarkInfo" width="300px;">备注<input property="editor" class="mini-textarea" style="width:100%;" /></div>
</div>
</div>
//加载时使用onDrawCell，那修改时应该用哪个方法触发？
function onDrawCell(e)
{
var data = e.field;
if (e.field == "ListPowerDepartmentID")
alert(e.node["ListPowerDepartmentID"]);
}

复制代码