我正在使用jQuery jsTree插件复选框。好的，我已经找到了如何处理检查或取消选中复选框的事件。如果有用，我可以粘贴代码：
.bind("check_node.jstree", function(e, data)
{
if(data.rslt.obj !== undefined && data.rslt.obj.attr(\'id\') !== undefined)
{
jQuery.ajax({
async : false,
type: "POST",
dataType: "json",
url: "adsmanager/adsfields/ajaxappendcategory",
data:
{
"id" : data.rslt.obj.attr(\'id\'),
"itemId" : "' . Yii::app()->getRequest()->getParam('id') . '",
},
success: function(r)
{
if(r === undefined || r.status === undefined || !r.status)
{
data.rslt.obj.removeClass(\'jstree-checked\');
data.rslt.obj.addClass(\'jstree-unchecked\');
}
else
{
niceBox(\'ok\');
}
}
});
}
return true;
})
有了这一切都没关系，但知道我无法找到任何地方如何检查树加载的复选框，例如，如果我使用jsTree类似于我的新闻条目的选择器项目当我创建新的新闻项目时一切正常，当我想更新该项目我需要jsTree选择的类别，这是我无法找到任何示例如何在加载jsTree时选择节点。
对此问题的任何帮助？
答案 0 :(得分：8)
如果您使用的是JSON_DATA，请将class:jstree-checked添加到节点的attr对象：
{
"data": "node name",
"attr": { "id": "node id", "class":"jstree-checked" }
}
答案 1 :(得分：4)
对于当前的JSTREE版本3.2.1和JSON数据，我们需要使用state：{checked：true}
并添加到配置选项复选框部分
＆＃34;复选框＆＃34;：{ ＆＃34; tie_selection＆＃34;：false }
这个例子很好用
data : [
{ "text" : "Root", state : { opened : true }, children : [
{ "text" : "Child 2", state : { checked : true },
]
答案 2 :(得分：3)
我通过将复选框插件选项two_state设置为true
"checkbox" => array( "two_state" => true)
然后如果您使用Xml数据，请在参数
中添加class="jstree-checked"
一切都很好:)。
祝你好运;）答案 3 :(得分：3)
试试这个：
$("#jstree").jstree(true).load_node('#');
它对我有用。
以下是相关参考：
答案 4 :(得分：0)
这可能会对你有所帮助 - jstree v1
<script src="@Url.Content("~/Scripts/jquery.jstree.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>
下面 - 用于检查和取消选中jstree的事件绑定
<script type="text/javascript">
$(document).ready(function () {
Refresh();
});
function Refresh() {
var dataId = {};
$('#MainTree')
.bind("before.jstree", function (e, data) {
})
.jstree({
"json_data": {
ajax: {
"url": function (node) {
var url;
if (node == -1) {
url = "";
} else {
var id = $(node).data("id");
url = "?categoryId=" + id;
}
var productId = $("#Product_ProductId").val();
if (!productId) {
url = "/Products/GetTreeData" + url;
} else {
url = "/Products/GetTreeData/" + productId + url;
}
return url;
},
//"url": "@Url.Action("GetTreeData", "Categories")",
"type": "GET",
//"data": JSON.stringify(dataId),
"dataType": "json",
"contentType": "application/json charset=utf-8",
},
progressive_render: true
},
"themes": {
"theme": "classic",
"dots": true,
"icons": true,
"url": "@Url.Content("~/content/themes/classic/style.css")"
},
"types": {
"max_depth": -2,
"max_children": -2,
"valid_children": ["folder"],
"types": {
"default": {
"valid_children": "none",
"icon": {
"image": "@Url.Content("~/gfx/file.png")"
}
},
"folder": {
"valid_children": ["default", "folder"],
"icon": {
"image": "@Url.Content("~/gfx/folder.png")"
}
}
}
},
"plugins": ["themes", "json_data", "ui", "types", "checkbox"]
})
.bind("load_node.jstree", function (event, data) {
var productId = $("#Product_ProductId").val();
if (!productId || productId < 1) {
data.inst.hide_checkboxes();
} else
data.inst.change_state('li[selected=selected]', false);
})
.bind("check_node.jstree", function (e, data) {
var productId = $("#Product_ProductId").val();
if (!productId)
return;
$.post(
"@Url.Action("ProductCategoriesSaveData", "Products")",
{
"ProductCategory.ProductId": productId,
"ProductCategory.CategoryId": $(data.rslt.obj).data("id")
},
function (r) {
//Display message if any
if (r.Message) {
alert(r.Message);
}
//Display error if any
if (r.ValidationError) {
$.jstree.rollback(data.rlbk);
alert(r.ValidationError);
} else {
if (r.NewCreatedId) {
$(data.rslt.obj).data("mapId", r.NewCreatedId);
}
}
});
})
.bind("uncheck_node.jstree", function (e, data) {
var productId = $("#Product_ProductId").val();
if (!productId)
return;
var mapId = $(data.rslt.obj).data("mapId");
$.ajax({
async: false,
type: 'POST',
url: "@Url.Action("ProductCategoryDelete", "Products")",
data: {
"id": mapId
},
success: function (r) {
//Display message if any
if (r.Message) {
alert(r.Message);
}
//Display error if any
if (r.ValidationError) {
alert(r.ValidationError);
} else {
data.inst.refresh();
}
}
});
});
}
</script>
服务器端Asp.net MVC
答案 5 :(得分：0)
"state" : { "selected" : true }选中一个复选框
$('#frmt').jstree( {
'core' : {
'data' : [{
"text" : "root text",
"state" : { "opened" : true } ,
"children" : [{
"text" : "child text",
"id" : "idabc",
"state" : { "selected" : true } ,
"icon" : "jstree-file",
}]
},
]},
'checkbox': {
three_state: true
},
'plugins': ["checkbox"]
});
答案 6 :(得分：0)
要完成上述较早的回答，至少对于最新的v3.3.7，需要使用BOTH state.selected和a_attr.class的规范来初始化叶复选框，如使用复选框插件检查的那样。这似乎可以解释为什么mytree.node_select（“ leafId”）函数本身不能以编程方式完成此操作的原因，大概是因为子类的class属性也必须设置为jstree_checked。
var mytree = $( "myjstreediv" ).jstree();
var leafParentId = "#";
var name = "My test node";
var visible = true;
if (visible)
leafId = mytree.create_node(leafParentId, {
text: name,
state: { selected: visible },
a_attr: { class: "jstree-checked" }
});
else
leafId = mytree.create_node(leafParentId, name);
答案 7 :(得分：0)
试试这个：
$('#jstree').jstree({
core : {
data : [
{ "text" : "Root", state : { opened : true },
children : [
{ "text" : "Child 1", state : { selected : true } },
{ "text" : "Child 2", state : { checked : false, opened : true },
children : [
{ "text" : "a", state : { checked : true, opened : true }},
{ "text" : "b", state : { checked : false, opened : true }}
]}
]}
],
},
checkbox : {
tie_selection : false
},
plugins : ['checkbox']
});
查找数据：
var jsonNodes = $('#jstree').jstree(true).get_json('#', { flat: true });
$.each(jsonNodes, function (i, val) {
if($("#jstree").find("a#" + this.id + "_anchor").hasClass("jstree-checked")){
console.log("Selected:" + this.id);
}
else if($("#jstree").find("a#" + this.id + "_anchor i:first-child").hasClass("jstree-undetermined")){
console.log("Selected:" + this.id);
}
else {
console.log("Un Selected:" + this.id);
}
}