samedi 5 novembre 2016

How to check a checkbox in a jsTree (JavaScript)

I'm using a jsTree and having a problem to preset the checkboxes via data stored in a cookie.

I'm able to store the clicked checkboxes in a cookie but now I do not know how to check the checkboxes with the data saved within the cookie.

Maybe the problem is the way I create the jsTree because none of the samples I tried up to now work.

To give you some code to understand what I did just have a look at my submit function. This iterates over all of the checked checkboxes and just creates an array of ID's but the ID field is stored in METADATA this way and maybe that's the reason why it do not work the way expected.

<script>


        $(document).ready(function(){
            $("#treeViewDiv").jstree({
              "core" : { // core options go here
                    "multiple" : true, // no multiselection
                    "themes" : {
                    "dots" : false // no connecting dots between dots
                    }
                },

                "json_data" : {
                    "data":[
                        {
                            "data" : "Options",
                            "metadata":{"group":"1"},
                            "children" :[
                                        {"data":"Option 1", "metadata":{"id":"1"}},
                                        {"data":"Option 2", "metadata":{"id":"2"}},
                                        {"data":"Sub Option",
                                        "children":[
                                                        {"data":"Option 3", "metadata":{"id":"3"}},
                                                        {"data":"Option 4", "metadata":{"id":"4"}},
                                                        {"data":"Option 5","metadata":{"id":"5"}}
                                                    ],
                                        "metadata" : {"group":"Master Control"}}
                                        ]
                        }
                    ]
                },
                "plugins" : [ "themes", "json_data", "ui" ,"checkbox" ]
            }).bind("select_node.jstree", function(e, data)
                {
                    if(jQuery.data(data.rslt.obj[0], "href"))
                    {
                        //alert("Go on..");

                    }
                    else
                    {
                        //alert("No href defined for this element");
                    }
                })
        });

I'm able to retrieve the checked nodes and create a list they way below and I guess that there is just a methode just to loop over all of the tree objects, identify them by their ID and just check them but all I tried and found at the web did not help.

function submitMe() {
                  var checked_ids = [];                   
                  var checked_ids_meta = [];               
                  var group;

                   checked_ids.push("( null "); 

                  $("#treeViewDiv").jstree("get_checked",null,true).each(function(i, e){
                  if ($(this).data("group")+"" != "undefined")
                  {
                  group=$(this).data("group")+"";                     
                  }               
                  if ( $(this).data("id")+"" != "undefined"  )
                  {               
                      checked_ids.push($(this).data("id")); 
                  }               
                  });                                   

                  checked_ids.push(" null )"); 

                  document.getElementById("jsfields").value = checked_ids.join(",");                      
                  alert (document.getElementById("jsfields").value);
              return true;
        }

Selection is stored within HTML in

<input  name="jsfields" id="jsfields" size=80 maxlength=256 >

What I want to do now is just to implement the reverse function to just check the checkboxes by same ID.

Thanks for help.




Aucun commentaire:

Enregistrer un commentaire