加载时选中的jstree复选框答案

【问题标题】：jstree checkbox checked on load加载时选中的jstree复选框
【发布时间】：2011-05-06 22:18:24
【问题描述】：

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

对这个问题有帮助吗？

【问题讨论】：

我发现可以将配置中的“选定”选项设置为数组，但它不起作用。

标签： jquery user-interface jquery-plugins jstree

【解决方案1】：

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

{
  "data": "node name",
  "attr": { "id": "node id", "class":"jstree-checked" }
}

【讨论】：

如果您在此处使用 JSON 格式：jstree.com/docs/json，而不是 'attr'，请使用 'a_attr'
刚刚注意到这仅表明它已检查它并没有将其设置为已检查。因此，要取消选中它，您必须单击两次。这是没有意义的。要解决这个问题，您需要在 state 属性中设置 checked : true 。所以“状态”：{检查：真}

【解决方案2】：

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

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

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

这个例子很好用

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

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

]

【讨论】：

如何使 html 数据相同？你懂的？谢谢

【解决方案3】：

试试这个：

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

它对我有用。

【讨论】：

感谢您的链接，因为回复是由 JsTree 的创建者提供的

【解决方案4】：

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

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

如果您使用 Xml 数据，则在参数中添加 class="jstree-checked"

一切都好:)

祝你好运；）

【讨论】：

【解决方案5】：

要完成上述较早的答案，至少在最新的 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);

【讨论】：

【解决方案6】：

也许这会对你有更多帮助 - 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

【讨论】：

【解决方案7】：

"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"]
     });

【讨论】：

【解决方案8】：

试试这个：

 $('#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);
                }
        }

【讨论】：