jstree select node

Question

Привет, Я использую jsTree для генерации своих иерархических данных. JsTree формируется следующим образом:

$(function() { 
$("#industries").tree({ 
     data: { 
      type: "json", 
      opts: { 
       url: "/Admin/GetIndustries/" 
      } 
     } 
    }); 
}); 

работает найти и JsonResult что-то вроде:

[{"attributes":[],"data":{"title":"Adwokaci, Notariusze","id":"1a051101-c3fa-48f2-b2e1-c60d1b67ea22"},"children":[{"attributes":[],"data":{"title":"Kancelarie adwokackie","id":"26d6cff1-3c7f-4a2f-bf5a-422e08127b43" 

мой вопрос: как я могу сохранить идентификатор выбранного узла в некотором скрытом поле? Я делаю что-то вроде этого:

<script type="text/javascript"> 
    $("#industries").click(function() { 
     var tree = $.tree.reference("industries"); 
     var t = $.tree.focused(); if (t.selected) t.selected; else alert("Select a node first"); 
     alert(t.id); 

    }); 

но он не работает. Я попал в окно предупреждения «undefined». Может кто-нибудь, пожалуйста, помогите мне?

EDIT: Я изменил jstree экземпляр следующим образом:

$(function() { 
$("#industries").tree({ 
     callback: { 
      onselect: function(NODE, TREE_OBJ) { 
        alert(NODE.id); 
       } 
      }, 
     data: { 
      type: "json", 
      opts: { 
       url: "/Admin/GetIndustries/" 
      } 
     } 
    }); 
}); 

и я получаю пуст alertt

Answer 1

Или просто связать выберите узел:

$("#industries").tree({ 
     callback: { 
      onselect: function(NODE, TREE_OBJ) { 
        alert(NODE.id); 
       } 
      }, 
     data: { 
      type: "json", 
      opts: { 
       url: "/Admin/GetIndustries/" 
      } 
     } 
    }) 
.bind("select_node.jstree", function (NODE, REF_NODE) { 
      var a = $.jstree._focused().get_selected(); 
     } 
    }); 

Попробуйте посмотреть на переменной а для ID, или NODE. Я фактически использовал REF_NODE, чтобы получить

Answer 2

Постарайся обратные вызовы упомянуты здесь: http://www.jstree.com/documentation

Он должен работать что-то вроде этого:

$("#industries").tree({ 
    //..... your other stuff ..... 
    callback: { 
     onselect: function(NODE, TREE_OBJ) { 
         node_id = NODE.id; 
        } 
    } 
}); 

Answer 3

Теперь, когда вы изменили свой код для использования обратного вызова onselect, у вас все еще есть проблемы? Я не могу сказать, означает ли ваше редактирование, что вы решили проблему или нет. Если у вас есть, вы должны пометить этот вопрос как ответ.

Лично я использую onchange вместо onselect, но я уверен, что либо сработает. Вы также можете использовать функции jquery's data() для хранения значений вместе с элементом на странице вместо скрытого поля, если только вы не хотите отправить форму со значением.

Но если вам нужно, чтобы сохранить его в скрытом поле, попробовать что-то вроде этого:

$("#industries").tree({ 
    //..... your other stuff ..... 
    callback: { 
     onchange: function(NODE, TREE_OBJ) { 
      $("#hidden_field").val(NODE.id); 
     } 
    } 
}); 

Answer 4

являются идентификаторами быть назначен любой из HTML-объектов в данный момент?

В моем решении я устанавливаю идентификатор атрибута элемента, а не данные, который устанавливает идентификаторы на каждом <li>. Как так:

[{"data":"Origination","attributes":{"id":"10"}",children":[ 
        {"data":"New Connection","attributes":{"id":"11"}}, 
        {"data":"Disconnection","attributes":{"id":"12"}}, 
        {"data":"Load Change","attributes":{"id":"13"}}, 
        {"data":"Corporate","attributes":{"id":"14"}} 
        ]}] 

и имеет эффект рендеринга этот HTML (я также использую флажок плагин jsTree):

<UL class=ltr sizcache="2" sizset="4"> 
    <LI id=10 class=" open" selected="false"><A class=undetermined href=""><INS>&nbsp;</INS>Origination</A> 
    <UL sizcache="2" sizset="0"> 
    <LI id=11 class=leaf selected="false"><A href=""><INS>&nbsp;</INS>New Connection</A></LI> 
    <LI id=12 class=leaf selected="true"><A class=checked href=""><INS>&nbsp;</INS>Disconnection</A></LI> 
    <LI id=13 class=leaf selected="false"><A href=""><INS>&nbsp;</INS>Load Change</A></LI> 
    <LI style="MARGIN-TOP: 0px" id=14 class="last leaf" selected="true"><A class=checked href=""><INS>&nbsp;</INS>Corporate</A></LI> 

Answer 5

Как Мэтт, я также поместить идентификатор в атрибуты объекта, поэтому он привязывается к узлу li (пример скопирован с Мэтта).

{"data":"Origination", 
"attributes":{"id":"10"}, 
"children":[ 
    { "data":"New Connection", 
    "attributes":{"id":"11"} 
    }, 
    { "data":"Disconnection", 
    "attributes":{"id":"12"} 
    } 
] 
} 

Тогда в моей onselect функции, я первый обернуть узел Ли в JQuery (параметр функции не обернуты), то получить его идентификатор.

    treeObject.callback = { 
     onselect: function(liNode, oTree) { 
      var id = $(liNode).attr('id'); 
      var script = ComParentSet.getScript(id); 
      script.doXYZ(); 
     } 
    } 

Answer 6

Вы можете использовать его в bind() функции, как это:

.bind("check_node.jstree", function(e, data) { 
    //console.log(data.rslt.obj.attr(\'id\')); 

    if (data.rslt.obj !== undefined && data.rslt.obj.attr(\'id\') !== undefined) { 
     jQuery.ajax({ 
      async: false, 
      type: "POST", 
      dataType: "json", 
      url: "' . Yii::app()->createUrl('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, checked\'); 
       } 
      } 
     }); 
    } 

    return true; 
}); 

То же самое с действием снимите флажок.

Answer 7

Я не проверить все ответы, но видел, что вы вратарь выбрать любого поэтому решил опубликовать метод, который работал для меня

$(function() { 
     $("#demo1") 
     .bind("select_node.jstree", function (event, data) { 
          var selectedObj = data.rslt.obj; 
      alert(selectedObj.attr("id") + selectedObj.attr("data")); 
      }) 

это, если вы хотите идентификатор и название узла. надеюсь, это поможет

Answer 8

$('#jstree-api').on('changed.jstree', function (e, data) { 
    var objNode = data.instance.get_node(data.selected); 
    var note; 
    note = 'Selected Node Data(Id: <strong>' + objNode.id + '</strong>, Name: <strong>' + objNode.text + '</strong>)'; e = 'Selected Category(Id: <strong>' + objNode.id + '</strong>, Name: <strong id="api-data" data-parent="' + objNode.parent + '" data-id="' + objNode.id + '">' + objNode.text + '</strong>)'; 

    $('#footer-api').html(note); 
}); 

Это даст вам информацию о выбранном узле.

Here is a series of article Вы должны следовать, если используете jsTree.