获取jsTree的选中值 - 使用表单发布

I'm using the jsTree jQuery plugin with the checkbox theme. Does anyone know how to get the selected values with a form post?

我正在使用带有复选框主题的jsTree jQuery插件。有谁知道如何使用表格帖子获取所选值?

Thank you!

10 个解决方案

#1

Have you got your answer ? If not, here is one that appears in the jstree google groups

你有答案吗?如果没有,这里是一个出现在jstree谷歌组

    function submitMe(){ 
        var checked_ids = []; 
        $("#server_tree").jstree("get_checked",null,true).each 
            (function () { 
                checked_ids.push(this.id); 
            }); 
           doStuff(checked_ids);

#2

In the last version (3.0), the API was changed.

在上一个版本(3.0)中,API已更改。

If you need just array of selected IDs (like in examples in this node), it is now very easy:

如果您只需要选定ID的数组(如此节点中的示例),现在非常简单:

var selectedElmsIds = $('#tree').jstree("get_selected");

If you need to iterate over the selected elements, you just need to pass additional "true" parameter.

如果需要遍历所选元素,则只需传递其他“true”参数。

var selectedElmsIds = [];
var selectedElms = $('#tree').jstree("get_selected", true);
$.each(selectedElms, function() {
    selectedElmsIds.push(this.id);
});

#3

Everyone, who worked with Jstree’s may face to this question: How to get the checked Ids of Jstree in form submit? here is the solution:

与Jstree合作的每个人都可能会遇到这样的问题:如何在表单提交中检查Jstree的ID?这是解决方案:

function submitMe() {
    var checked_ids = [];
    $('#your-tree-id').jstree("get_checked",null,true).each(function(){
        checked_ids.push(this.id);
    });
    //setting to hidden field
    document.getElementById('jsfields').value = checked_ids.join(",");
}

Now, we set it in a hidden field:

现在,我们将它设置在一个隐藏的字段中:

<input type="hidden" name="jsfields" id="jsfields" value="" />

#4

The suggested solution from google groups however didn't work for partially checked nodes, in my case. I had to leave the get_checked out and do the following to get fully selected and partially selected nodes.

根据我的情况,谷歌小组建议的解决方案不适用于部分检查的节点。我不得不离开get_checked并执行以下操作以获得完全选择和部分选择的节点。



$(".sector-tree").find(".jstree-undetermined").each(function(i,element){            
    checked_ids.push($(element).attr("id"));

    if ($(this).find(".jstree-undetermined").length == 0) {  
        $(this).find(".jstree-checked").each(function(i, element){          
            checked_ids.push({$(element).attr("id"));
        });         
    }
});

// collect the rest of the checked nodes that exist under checked parents
$(".sector-tree").find(".jstree-checked").each(function(i, element){ //also includes the ones below 'undetermined' parent

    var selectedElement = $(element).attr("id");
    if ( hasItem(selectedElement, checked_ids ) < 0 ) {             
        checked_ids.push(selectedElement);
    }

});

#5

With jQuery you can simply do:

使用jQuery,您可以简单地执行:

$('.jstree-checked,.jstree-undetermined').each(function(){
    var rawCheckedID = $(this).find('a').attr('id');
});

This will get the undetermined and checked at the same time. soumya's solution above may be more efficient.

这将得到未确定和同时检查。上面的soumya解决方案可能更有效率。

#6

//click button show nodes checked
$(document).on('click','#showme',function() {
    var checked_ids = [];
    var checked_ids_meta = [];
    $('#demo_0').jstree("get_checked",null,true).each(function(i, e){
        checked_ids.push($(this).data("param")); // json metadata
        checked_ids_meta.push($(this).attr("href")); // json attr
    });     
    console.log(checked_ids)
    console.log(checked_ids_meta)       
});

#7

var selectedElmsIds = [];
$("#jstree2").find("li").each(function(i, element) { //also includes the ones below 'undetermined' parent
  if ($(this).attr("aria-selected") == "true") {
    selectedElmsIds.push($(this).attr('id'));
  }
});
console.log(selectedElmsIds);

#8

This I did:

我这样做了:

function getSelectedItems()
{
    var checked_ids = [];

    checkedNodes = $("#MyTree").jstree("get_checked", null, true); 

    for(var i = 0; i < checkedNodes.length; i++)
    {
        var id = $(checkedNodes[i].outerHTML)[0].id;

        checked_ids.push(id);
    }

     // Do whatever you want with the checked_ids 
}

This will give you an array of all selected node and their sub nodes and leafs; as well as single leafs selected under other nodes.

这将为您提供所有选定节点及其子节点和叶子的数组;以及在其他节点下选择的单个叶子。

#9

$(document).ready(function(){
var jsfields = $('#myTree').jstree('get_selected');
$('.jsfields').val(JSON.stringify([jsfields]));
})

<input type="hidden" class="jsfields" value=""/>

Change the value of $('#myTree') to you respective tree, this is best working for me in ajax call. slight modification may be needed to populate input field of simple form.

将$('#myTree')的值更改为相应的树,这最适合我在ajax调用中工作。可能需要稍微修改来填充简单形式的输入字段。

#10

You can use this:

你可以用这个:

var result = $('#your_tree').jstree('get_selected');

https://*.com/a/22499278/1883345

#1