Question

我正在使用带有复选框主题的jsTree jQuery插件。有谁知道如何使用表单发布所选值？

谢谢！

Answer 1

在上一个版本（3.0）中，API已更改。

如果您只需要所选ID的数组（如此节点中的示例），现在非常简单：

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

如果您需要迭代选定的元素，您只需要传递额外的“true”参数

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

Answer 2

你有答案吗？如果没有，则此处出现在jstree google groups

中

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

Answer 3

与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(",");
}

现在，我们将其设置在隐藏字段中：

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

Answer 4

在我的情况下，谷歌小组建议的解决方案对部分检查的节点不起作用。我不得不离开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);
    }

});

Answer 5

使用jQuery，您只需执行以下操作：

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

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

Answer 6

您可以使用：

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

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

Answer 7

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

Answer 8

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

Answer 9

我这样做了：

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 
}

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

Answer 10

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

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

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

Answer 11

我这样做是为了获取选中复选框的id，parentid和文本。希望它将对某人有所帮助：）

function myFunction(elmnt,clr){
         elmnt.style.color =clr;
         var selectedElmsinfo = [];

         var selectedElms = $('#SimpleJSTree').jstree("get_selected", true);
            $.each(selectedElms, function() {
                selectedElmsinfo.push(this.id,this.text,this.parent);

            });
             alert(selectedElmsinfo);
        }

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

11 个答案: