jstree checkbox проверяется при загрузке

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 как категории селектор для моих news Item, когда я создаю новый элемент новостей, все в порядке, и когда я хочу обновить этот элемент, мне нужен jsTree с выбранными категориями, и я не могу найти какой-либо пример выбора узлов при загрузке jsTree.

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

Answer 1

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

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

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

все нормально :)

удачи ;)

Answer 2

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

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

Answer 3

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

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

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

Здесь связаны ссылка:

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

Answer 4

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

Answer 5

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

и добавьте в конфиг для CheckBox раздела

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

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

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

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

] 

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