web-dev-qa-db-ja.com

jsTreeのチェックされた値を取得-フォームポストで送信

チェックボックステーマでjsTree jQueryプラグインを使用しています。誰かがフォーム投稿で選択された値を取得する方法を知っていますか？

ありがとうございました！

jqueryjquery-pluginsjstree
20
dzm

答えはありますか？そうでない場合、これは 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）;
19
soumya

前のバージョン（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);
});
26
Lukas Jelinek

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="" />
14
Jamshid Hashimi

Googleグループから提案されたソリューションは、私の場合、部分的にチェックされたノードでは機能しませんでした。完全に選択されたノードと部分的に選択されたノードを取得するには、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);
    }

});
3
soumya

jQueryを使用すると、簡単に次のことができます。

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

これにより、未決定とチェックが同時に行われます。上記のsoumyaのソリューションはより効率的です。

3
Fostah

あなたはこれを使うことができます：

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

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

2
Majid Basirati
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);
0
Qiol Noon
_$(document).ready(function(){
var jsfields = $('#myTree').jstree('get_selected');
$('.jsfields').val(JSON.stringify([jsfields]));
})

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

$('#myTree')の値をそれぞれのツリーに変更します。これは、私にとってajax呼び出しで最適に機能します。単純なフォームの入力フィールドに入力するには、わずかな変更が必要になる場合があります。

0
Waqas Bukhary

選択したチェックボックスのID、親ID、テキストを取得するためにこれを行いました。うまくいけば、それは誰かを助けるでしょう:)

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);
        }
0
Aamir Awan.

これは私がやった：

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 
}

これにより、選択したすべてのノードとそのサブノードおよびリーフの配列が得られます。他のノードの下で選択された単一の葉と同様に。

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