Jstree select node

Ответ 1

Или просто привяжите select node:

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

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

Ответ 2

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

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

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

Ответ 3

Вы можете использовать его в своей функции 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;
});

То же самое с отменой действия.

Ответ 4

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

Он должен работать примерно так:

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

Ответ 5

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

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

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

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

Ответ 6

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

В моем решении я устанавливаю id в атрибуте элемента, а не в данных, который устанавливает идентификаторы на каждом <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 checkbox):

<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>

Ответ 7

Как и Мэтт, я также помещаю id в объект атрибутов, поэтому он привязывается к li node (пример скопирован из Matt).

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

Затем в моей функции onselect я сначала завершаю li node в jQuery (параметр функции не завернут), а затем получите его id.

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

Ответ 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);
});

Это даст вам выбранные данные node.

Вот серия статей, за которой следует следовать, если вы используете jsTree.