12

我正在与 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 时选择节点。

这个问题有什么帮助吗？

4

8 回答 8

8

如果您使用的是 JSON_DATA，请添加class:jstree-checked到节点的 attr 对象：

{
  "data": "node name",
  "attr": { "id": "node id", "class":"jstree-checked" }
}
于 2012-08-01T05:30:43.857 回答
7

对于当前的 JSTREE 版本 3.2.1 和 JSON 数据，我们需要使用 state : { checked : true }

并添加到复选框部分的配置

“复选框”：{“tie_selection”：假}

这个例子工作正常

data : [
            { "text" : "Root", state : { opened : true }, children : [

                { "text" : "Child 2", state : { checked : true },

]
于 2015-09-03T05:32:40.733 回答
4

尝试这个：

$("#jstree").jstree(true).load_node('#');

它对我有用。

以下是相关参考：

https://groups.google.com/forum/#!topic/jstree/bPv19DwQYFU

于 2014-04-08T19:13:47.433 回答
3

我通过将复选框插件选项设置two_state为 true找到了解决方案

"checkbox" => array(  "two_state" => true)

然后如果您使用 Xml 数据添加class="jstree-checked"参数

一切都很好 ：）

祝你好运 ;）

于 2010-11-09T14:20:12.617 回答
1

要完成上述较早的答案，至少在最新的 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);
于 2019-01-14T08:07:17.387 回答
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);
                }
        }
于 2021-02-16T07:17:57.460 回答
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

于 2015-08-11T17:31:53.913 回答
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"]
     });
于 2016-09-18T09:58:33.353 回答