（更新：见帖子底部） 我是jstree（和JS）的新手，并尝试在MVC4场景中使用它，其中节点必须从某个存储库动态加载。我已经设法让这个工作，但我在确定哪些节点被用户有效选择时面临一些困难，因为这取决于UI状态。让我们从MVC控制器的方法开始，该方法返回节点并由JS调用。它的代码如下：
public JsonResult GetTreeNodes(string id)
{
// selectedIds contains some pre-selected IDs...
IEnumerable nodes = _repository.GetChildNodes(id);
return Json(
(from n in nodes
select new
{
id = n.Id,
data = n.Value,
attr = new
{
id = n.Id,
selected = selectedIds.Any(s => s == n.Id)
},
state = "closed"
}).ToArray(), JsonRequestBehavior.AllowGet);
}
这很好，并以jstree期望的形式返回具有指定ID的节点的子节点。
我的视图有树的div，以及包含已检查节点的隐藏字段。提交表单时，JS函数检索已检查的节点并将它们存储到隐藏字段中，以便MVC操作可以接收它们。视图如下：
...
<section>
@using (Html.BeginForm())
{
@Html.Hidden("selectedNodes")
<div id="tree" style="max-width: 70%"></div>
<input id="submit" type="submit" value="Submit" />
}
</section>
<script type="text/javascript">
$(function () {
fillTree();
$("form:first").submit(function(e) {
storeSelected();
});
});
function fillTree() {
$("#tree").jstree({
checkbox: {
real_checkboxes: true,
checked_parent_open: true
},
plugins: ["themes", "json_data", "ui", "checkbox"],
json_data: {
"ajax": {
"type": 'GET',
"url": function(node) {
var url;
if (node == -1) {
url = "@Url.Action("GetTreeNodes", "Home")";
} else {
var nodeId = node.attr('id');
url = "@Url.Action("GetTreeNodes", "Home")" + "?id=" + nodeId;
}
return url;
},
"success": function (newData) {
return newData;
}
}
},
animation: 200
}).bind("open_node.jstree", function(event, data) {
$("#tree").jstree("check_node", "li[selected=selected]");
});
}
function storeSelected() {
var checkedIds = [];
$("#tree").jstree("get_checked", null, true).each(function() {
checkedIds.push(this.id);
});
$("#selectedNodes").val(checkedIds.join(","));
}
</script>
如您所见，当用户提交表单时，storeSelected函数使用jstree get_checked函数来检索已检查的节点。问题是这里的节点是动态加载的，因此这仅适用于用户提交表单时有效存在于页面中的节点。如果我展开一个分支，检查并取消选中一些节点，然后在提交之前收缩同一个分支，我将获得一个空的已检查ID列表，因为表示树UI中节点的列表项元素不在页面中。
那么处理这个问题的最佳策略是什么？我正在考虑对已检查/未检查的事件作出反应，并跟踪用户的操作，以便我可以知道他检查了哪些节点，而不管UI状态如何。所以我想添加另一个这样的绑定：
bind("check_node.jstree uncheck_node.jstree", function(event, data) {
var id = data.rslt.obj[0].id;
addToCheckedOrUnchecked(id, event.type == "check_node"); });
并实现addToCheckedOrUnchecked函数，以便它可以存储用户检查或取消选中的ID列表。当然，当向已检查列表添加ID时，我必须将其从未选中列表中删除（如果存在），反之亦然。我还必须使用一些持久性机制来在不同的AJAX调用之间保留这些列表：根据浏览器功能，我假设会话数据或cookie。
请注意，在提交之前打开所有分支不是一个选项，因为这意味着分支查询服务器分支，其中一些树很大，而我想保留带宽和响应度。
我的第一个问题涉及检查和取消选中节点事件：它们似乎没有记录（我发现它们在谷歌上搜索），并且似乎并非所有浏览器都能正确处理它们。例如，在IE9中，事件似乎根本没有发生，而它们在FF中发生。无论如何，你能否提出更有效的方法解决这个问题？对于一个相对简单的任务来说，这似乎是很多代码，因为我将在不同的页面中使用几个树，我可能必须创建一个HTML帮助程序以避免我的MVC项目中的冗余。
通过反复试验，我进一步增强了JS代码，但我仍然面临一些问题。我必须补充一点，我需要将收到的分支与尚未提交的用户编辑同步：如果我打开一个分支，取消选中（预选）项并检查另一个，然后关闭分支并重新打开它，这不会触发新的ajax调用，所以我需要处理open_node事件，以便能够在显示它们之前修改节点复选框。无论如何，树似乎忽略了我的同步代码。首先，用于将节点ID添加到已检查或未检查的ID列表的函数，在会话存储（或cookie）中保留：
function addToCheckedOrUnchecked(id, checked) {
// get arrays of IDs from storage
var listChecked = getFromStore("checkedNodes");
if (listChecked === null) {
listChecked = [];
}
var listUnchecked = getFromStore("uncheckedNodes");
if (listUnchecked === null) {
listUnchecked = [];
}
// if checking, add ID to checked and remove from unchecked if present
if (checked) {
if ($.inArray(id, listChecked) == -1) {
listChecked.push(id);
}
var i = $.inArray(id, listUnchecked);
if (i > -1) {
listUnchecked.splice(i, 1);
}
// else add ID to unchecked and remove from checked if present
} else {
if ($.inArray(id, listUnchecked) == -1) {
listUnchecked.push(id);
}
var j = $.inArray(id, listChecked);
if (j > -1) {
listChecked.splice(j, 1);
}
}
// update storage
putInStore("checkedNodes", listChecked);
putInStore("uncheckedNodes", listUnchecked);
}
此功能只是从存储中读取列表，并根据收到的ID以及是否正在检查或取消选中ID来更新它们。
然后我添加了这个功能：
function synchChecks(data) {
var listChecked = getFromStore("checkedNodes");
var listUnchecked = getFromStore("uncheckedNodes");
$(data).each(function () {
var id = $(this).id;
if ($.inArray(id, listChecked) > -1) {
$(this).attr.selected = true;
console.log("overridden=1: " + id);
} else if ($.inArray(id, listUnchecked) > -1) {
$(this).attr.selected = false;
console.log("overridden=0: " + id);
}
});
}
这将从存储中获取列表并覆盖接收到的每个节点的attr.selected值（在数据中），以便与用户编辑同步。最后，我在jstree调用中将所有内容粘合在一起：
function fillTree() {
$("#tree").jstree({
checkbox: {
real_checkboxes: true,
checked_parent_open: true
},
plugins: ["themes", "json_data", "ui", "checkbox"],
json_data: {
"ajax": {
"type": 'GET',
"url": function(node) {
var url;
if (node == -1) {
url = "@Url.Action("GetTreeNodes", "Home")";
} else {
var nodeId = node.attr('id');
url = "@Url.Action("GetTreeNodes", "Home")" + "?id=" + nodeId;
}
return url;
},
"success": function (newData) {
synchChecks(newData);
return newData;
}
}
},
animation: 200
}).bind("open_node.jstree", function (event, data) {
openingNode = true;
var tree = $("#tree");
tree.jstree("check_node", "li[selected=selected]");
// get and synch children
var listChecked = getFromStore("checkedNodes");
var listUnchecked = getFromStore("uncheckedNodes");
$(data.inst._get_children(data.rslt.obj[0])).each(function () {
var id = $(this).attr("id");
if ($.inArray(id, listChecked) > -1) {
$(this).addClass("jstree-checked");
$(this).removeClass("jstree-unchecked");
} else if ($.inArray(id, listUnchecked) > -1) {
$(this).addClass("jstree-unchecked");
$(this).removeClass("jstree-checked");
}
});
openingNode = false;
}).bind("check_node.jstree uncheck_node.jstree", function (event, data) {
if (!openingNode) {
var id = data.rslt.obj[0].id;
addToCheckedOrUnchecked(id, event.type == "check_node");
}
});
}
在ajax调用成功时，我调用synchChecks来同步所接收的节点（尚未更新，因为没有任何内容发布到服务器）和用户编辑。此外，在open_node上，我检索已检查和未检查的ID列表，并使用它们覆盖正在打开的节点的每个子节点的检查状态。最后，当用户检查或取消选中某个节点时，我会调用addToCheckedOrUnchecked来更新我的ID列表。
无论如何，这似乎不起作用。例如，如果我打开一个分支，取消选中一个预先选择的节点，关闭它，然后重新打开它，我可以从调试器看到列表ID是预期的（未经检查的列表具有我未选中的节点的ID），并且从循环中的li中检索到的id是可以的，但我对li类的编辑似乎没有任何效果，我看到带有来自服务器的检查的分支。因此，假设没有其他可行的方法，您是否有任何提示让它按预期工作？
答案 0 :(得分：0)
似乎我设法让它至少在FF工作，但我愿意接受建议。我回答自己，因为这可能对其他读者有用，我花了很多时间在Google上搜索jsTree的所有特性。以下是1.0版本和MVC4。
首先，服务器部分：我有一个带有Tree动作的控制器，只返回View（）及其帖子对应部分：
[HttpPost]
public ActionResult Tree(string checkedNodes, string uncheckedNodes)
{
TempData["message"] = String.Format(CultureInfo.InvariantCulture,
"c=[{0}] | u=[{1}]",
checkedNodes, uncheckedNodes);
return RedirectToAction("Index");
}
此操作只是在TempData中设置一条消息，以显示索引页面中收到的节点。请注意，作为动态加载的树，操作接收的不是所选节点ID的列表，而是用户操作列表：需要选择的ID列表（checkedNodes）和需要取消选择的ID列表（uncheckedNodes）。在服务器端为存储库执行这些操作将使用户同时在jsTree中执行这些操作。
服务器部分的核心是按需返回节点的动作（由ajax调用），使用存储库从某个商店检索它们：
public JsonResult GetTreeNodes(string id)
{
// some sample categories to be preselected
string[] aSampleCategories = new[] {"categories-fun", "languages-ita"};
IEnumerable nodes = _repository.GetChildNodes(id);
return Json(
(from n in nodes
select new
{
id = n.Id,
data = n.Value,
attr = new
{
id = n.Id,
selected = aSampleCategories.Any(s => s == n.Id)
},
state = "closed"
}).ToArray(), JsonRequestBehavior.AllowGet);
}
现在，到客户端。以下是视图的形式：
@using (Html.BeginForm())
{
@Html.Hidden("checkedNodes")
@Html.Hidden("uncheckedNodes")
<div id="tree"></div>
<input id="submit" type="submit" value="Submit" />
}
JS代码如下（我使用了几个日志调用来检查发生了什么）：storeSelected通过从临时JS存储中检索它们来存储要选择或取消选择的节点的ID。 addToCheckedOrUnchecked获取节点ID和布尔值（告知是否应该选中或取消选中该节点）并相应地更新此存储。
然后，同步功能：当ajax调用成功完成时使用synchChecks，并覆盖从用户编辑的服务器收到的检查; open_node处理程序在打开节点时使用，其子节点需要以类似的方式进行同步。这是完整的代码，除了一些处理JS存储的实用程序函数（使用sessionStorage或在不可用时回退到cookie）。希望这可以帮助某人，如果有人建议更好的方法/实施我会很高兴知道。谢谢！
<script type="text/javascript">
var openingNode = false;
function storeSelected() {
$("#checkedNodes").val(getFromStore("checkedNodes").join(","));
$("#uncheckedNodes").val(getFromStore("uncheckedNodes").join(","));
}
function addToCheckedOrUnchecked(id, checked) {
console.log("[BEG addToCheckedOrUnchecked]");
// get arrays of IDs from storage
var listChecked = getFromStore("checkedNodes");
if (listChecked === null) {
listChecked = [];
}
var listUnchecked = getFromStore("uncheckedNodes");
if (listUnchecked === null) {
listUnchecked = [];
}
// if checking, add ID to checked and remove from unchecked if present
if (checked) {
if ($.inArray(id, listChecked) === -1) {
listChecked.push(id);
}
var i = $.inArray(id, listUnchecked);
if (i > -1) {
listUnchecked.splice(i, 1);
}
// else add ID to unchecked and remove from checked if present
} else {
if ($.inArray(id, listUnchecked) === -1) {
listUnchecked.push(id);
}
var j = $.inArray(id, listChecked);
if (j > -1) {
listChecked.splice(j, 1);
}
}
console.log("checked: " + listChecked + " | unchecked: " + listUnchecked);
// update storage
putInStore("checkedNodes", listChecked);
putInStore("uncheckedNodes", listUnchecked);
console.log("[END addToCheckedOrUnchecked]");
}
function synchChecks(data) {
console.log("[BEG synchChecks]");
var listChecked = getFromStore("checkedNodes");
var listUnchecked = getFromStore("uncheckedNodes");
$(data).each(function () {
var id = $(this).id;
if ($.inArray(id, listChecked) > -1) {
$(this).attr.selected = true;
console.log("overridden=1: " + id);
} else if ($.inArray(id, listUnchecked) > -1) {
$(this).attr.selected = false;
console.log("overridden=0: " + id);
}
});
console.log("checked: " + listChecked + " | unchecked: " + listUnchecked);
console.log("[END synchChecks]");
}
function fillTree() {
$("#tree").jstree({
checkbox: {
real_checkboxes: true,
checked_parent_open: true
},
plugins: ["themes", "json_data", "ui", "checkbox"],
json_data: {
"ajax": {
"type": 'GET',
"url": function(node) {
var url;
if (node == -1) {
url = "@Url.Action("GetTreeNodes", "Home")";
} else {
var nodeId = node.attr('id');
url = "@Url.Action("GetTreeNodes", "Home")" + "?id=" + nodeId;
}
return url;
},
"success": function (newData) {
synchChecks(newData);
return newData;
}
}
},
animation: 200
}).bind("open_node.jstree", function (event, data) {
console.log("[BEG open_node]");
openingNode = true;
var tree = $("#tree");
tree.jstree("check_node", "li[selected=selected]");
// get and synch children
var listChecked = getFromStore("checkedNodes");
var listUnchecked = getFromStore("uncheckedNodes");
console.log("checked: " + listChecked + " | unchecked: " + listUnchecked);
$(data.rslt.obj[0]).find("li").each(function () {
var id = $(this).attr("id");
if ($.inArray(id, listChecked) > -1) {
$(this).addClass("jstree-checked");
$(this).removeClass("jstree-unchecked");
console.log("overridden=1: " + id);
} else if ($.inArray(id, listUnchecked) > -1) {
$(this).addClass("jstree-unchecked");
$(this).removeClass("jstree-checked");
console.log("overridden=0: " + id);
}
});
openingNode = false;
console.log("[END open_node]");
}).bind("check_node.jstree uncheck_node.jstree", function (event, data) {
console.log("[BEG " + event.type + "]");
if (!openingNode) {
var id = data.rslt.obj[0].id;
addToCheckedOrUnchecked(id, event.type == "check_node");
}
console.log("[END " + event.type + "]");
});
}
$(function () {
// clear storage used for keeping track of checked nodes
removeFromStore("checkedNodes");
removeFromStore("uncheckedNodes");
// build tree
fillTree();
// attach store logic to submit
$("form:first").submit(function (e) {
storeSelected();
});
});
</script>