我正在与 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 时选择节点的示例。
这个问题有帮助吗？
如果您使用 JSON_DATA，请将
class:jstree-checked{
"data": "node name",
"attr": { "id": "node id", "class":"jstree-checked" }
}
对于当前的 JSTREE 版本 3.2.1 和 JSON 数据，我们需要使用 state : {checked: true }
并添加到复选框部分的配置
“复选框”：{ “tie_selection”：假 }
这个例子工作正常
data : [
{ "text" : "Root", state : { opened : true }, children : [
{ "text" : "Child 2", state : { checked : true },
]
试试这个：
$("#jstree").jstree(true).load_node('#');
它对我有用。
相关参考资料如下：
我通过将复选框插件选项
two_state"checkbox" => array( "two_state" => true)
然后如果您使用 Xml 数据，请在参数中添加
class="jstree-checked"一切都好:)
祝你好运；）
为了完成上面的早期答案，至少在最新的 v3.3.7 中，需要使用 state.selected 和 a_attr.class 来初始化叶复选框，以使用复选框插件进行检查。 这似乎解释了为什么 mytree.node_select("leafId") 函数单独不能以编程方式完成此操作，大概是因为子类属性也必须设置为 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);
也许这会对你有更多帮助 - 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
"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"]
});
试试这个：
$('#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);
}
}
在节点的每个项目中使用 state -> selected: true 或 false 来选中或不选中复选框。
// 节点的预期格式（没有必填字段）
{
id : "string" // will be autogenerated if omitted
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
children : [] // array of strings or objects
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}
链接参考：https://www.jstree.com/docs/json/ -> 转到“JSON 数据”选项卡