Pole wyboru jstree zaznaczone przy ładowaniu

Question

Walczę z wtyczką jQuery jsTree. Ok, dowiedziałem się, jak obsługiwać zdarzenia podczas zaznaczania lub odznaczania pola wyboru. Jeśli jego przydatna mogę wkleić kod:

.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; 
     }) 

Mając to wszystko jest ok, ale wiem, nie mogę znaleźć nigdzie jak zaznaczone pola wyboru na obciążenia drzewa, na przykład, jeśli używam jsTree jak selektora kategorii dla mojego news Przedmiot, kiedy tworzę nowy news, wszystko jest w porządku, a kiedy chcę go zaktualizować, potrzebuję jsTree z wybranymi kategoriami i nie mogę znaleźć żadnego przykładu, jak wybrać węzły podczas ładowania jsTree.

Jakąkolwiek pomoc w uzyskaniu tego pytania?

Answer 1

Znalazłem rozwiązanie przez ustawienie wyboru opcji two_state wtyczki do prawdziwej

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

a następnie, jeśli używasz danych XML dodać class="jstree-checked" w params

wszystko wyśmienite :)

powodzenia ;)

Answer 2

Jeśli używasz JSON_DATA, dodaj class:jstree-checked do obiektu attr węzła:

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

Answer 3

Spróbuj tego:

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

on pracował dla mnie.

Oto pokrewne:

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

Answer 4

Może to pomoże ci więcej - 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> 

poniżej - dla sprawdzenia i odznacz wiążą zdarzeń dla 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> 

Strona serwera Asp.net MVC

Answer 5

Aktualne JSTREE wersję 3.2.1 i danych JSON musimy użyć stan: {sprawdzone: true}

i dodać do config dla sekcji checkbox

"checkbox": { "tie_selection": false }

ten przykład działają dobrze

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

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

] 

Answer 6

"state" : { "selected" : true } sprawia, że ​​pole wybrany

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