jstree выбирают узел
Поздравления, я использую jsTree для generatate мои иерархические данные. 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);
});
но это не работает. Я вхожу в свое аварийное "неопределенное" окно. Кто-то может помочь мне?
Править: Я изменил jstree экземпляр следующим образом:
$(function() {
$("#industries").tree({
callback: {
onselect: function(NODE, TREE_OBJ) {
alert(NODE.id);
}
},
data: {
type: "json",
opts: {
url: "/Admin/GetIndustries/"
}
}
});
});
и я получаю пустое предупреждение
4 ответа
Попробуйте упомянутые здесь обратные вызовы: http://www.jstree.com/documentation
Это должно работать примерно так:
$("#industries").tree({
//..... your other stuff .....
callback: {
onselect: function(NODE, TREE_OBJ) {
node_id = NODE.id;
}
}
});
Теперь, когда вы изменили свой код для использования обратного вызова onselect, у вас все еще есть проблемы? Я не могу сказать, означает ли ваша правка, что вы решили проблему или нет. Если да, то отметьте этот вопрос как ответ.
Лично я использую onchange вместо onselect, но уверен, что любой из них сработает. Вы также можете рассмотреть возможность использования функций jquery data () для хранения значений вместе с элементом на странице вместо скрытого поля, если только вы не хотите отправить форму со значением.
Но если вам нужно сохранить его в скрытом поле, попробуйте что-нибудь вроде этого:
$("#industries").tree({
//..... your other stuff .....
callback: {
onchange: function(NODE, TREE_OBJ) {
$("#hidden_field").val(NODE.id);
}
}
});
Как и Мэтт, я также помещаю идентификатор в объект атрибутов, чтобы он был привязан к узлу li (пример скопирован из Мэтта).
{"data":"Origination",
"attributes":{"id":"10"},
"children":[
{ "data":"New Connection",
"attributes":{"id":"11"}
},
{ "data":"Disconnection",
"attributes":{"id":"12"}
}
]
}
Затем в моей функции onselect я сначала оборачиваю узел li в jQuery (параметр функции не обертывается), а затем получаю его идентификатор.
treeObject.callback = {
onselect: function(liNode, oTree) {
var id = $(liNode).attr('id');
var script = ComParentSet.getScript(id);
script.doXYZ();
}
}
Назначаются ли идентификаторы любому из объектов HTML в данный момент?
В моем решении я устанавливаю идентификатор в атрибуте элемента, а не в данных, которые устанавливают идентификаторы каждого
[{"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> </INS>Origination</A>
<UL sizcache="2" sizset="0">
<LI id=11 class=leaf selected="false"><A href=""><INS> </INS>New Connection</A></LI>
<LI id=12 class=leaf selected="true"><A class=checked href=""><INS> </INS>Disconnection</A></LI>
<LI id=13 class=leaf selected="false"><A href=""><INS> </INS>Load Change</A></LI>
<LI style="MARGIN-TOP: 0px" id=14 class="last leaf" selected="true"><A class=checked href=""><INS> </INS>Corporate</A></LI>