获取 jsTree 的检查值 - 使用表单提交提交答案

【问题标题】：get checked values for jsTree - submit with form post获取 jsTree 的检查值 - 使用表单提交提交
【发布时间】：2011-05-18 16:32:50
【问题描述】：

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

谢谢！

【问题讨论】：

标签： jquery jquery-plugins jstree

【解决方案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);
});

【讨论】：

对我来说，在 3.3.4 上我需要使用 get_checked，而不是 get_selected。
使用3.3.8版本的jsTree，是get_selected。有关完整且有效的源代码，您可以查看everyething.com/Example-of-jsTree-to-get-all-checked-nodes

【解决方案2】：

你有答案吗？如果没有，这里有一个出现在jstree google groups

函数提交我（）{ 变种检查ID = []； $("#server_tree").jstree("get_checked",null,true).each （功能（） { check_ids.push(this.id); }); doStuff(checked_ids);

【讨论】：

【解决方案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="" />

【讨论】：

嗨，this.id 到底指的是什么？如果我想获取 a 标签的文本怎么办？谢谢。
我明白了 :) 它指的是标签 li 的 id。
这是否也会使项目处于“未确定”状态？

【解决方案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);
    }

});

【讨论】：

【解决方案5】：

使用jQuery，您可以这样做：

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

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

【讨论】：

【解决方案6】：

你可以用这个：

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

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

【讨论】：

【解决方案7】：

我这样做是为了获取所选复选框的 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);
        }

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

这是我做的：

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 
}

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

【讨论】：

【解决方案11】：

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

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

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

【讨论】：