Флажок jstree проверен при загрузке

Question

Я борюсь с флажком плагина 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.

Любая помощь с этим вопросом?

Answer 1

Если вы используете JSON_DATA, добавьте class:jstree-checked к объекту attr узла:

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

Answer 2

Для текущей версии JSTREE 3.2.1 и данных JSON нам нужно использовать состояние: {проверено: true}

и добавьте в конфиг для секции флажка

"флажок": { "tie_selection": ложь }

этот пример отлично работает

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

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

]

Answer 3

Попробуйте это:

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

Это сработало для меня.

Вот соответствующие ссылки:

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

Answer 4

Я нашел решение, установив параметр плагина флажка two_state в true

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

, а затем, если вы используете данные XML, добавьте class="jstree-checked" в параметры

все в порядке:)

удачи;)

Answer 5

Чтобы завершить более ранние ответы выше, по крайней мере с последней версией v3.3.7, спецификация BOTH state.selected и a_attr.class необходимы для инициализации конечного флажка, как проверено с помощью плагина checkbox. Похоже, это объясняет, почему функция 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);

Answer 6

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

Answer 7

Может быть, это поможет вам больше - 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