sample of jstree ajax call code farm

$("#treenode").jstree({ "core": { "data": { "url": url, "type":"post", "data": function (node) { return { "ParentId": node.id }; } } }, "search": { "show_only_matches": true, ajax: { "url": url, "type": "post", "data": function (str) { return { "str": str }; } } }, "plugins": ["search"], }); var searching = false; $('#datasearch').keyup(function () { if (!searching) { searching = true; setTimeout(function () { searching = false; var v = $('#datasearch').val(); $("#treenode").jstree(true).search(v); }, 1000); } });

[HttpPost]
public JsonResult GetTreeNode(Dictionary<string,string> search)
{           
    List<TreeNode> tree = new List<TreeNode>();
    tree.Add(new TreeNode() {id="1",text="",state=new TreeState() { } });
    if(search.ContainsKey("str"))
    {
        //Do your search by name here
        //Format return is List<string> of all Id include with parent id
        //Please make sure the parent id is exist
        //Format ["idA","idAChild1","idAChild2","idAChild2Child1"]
        return Json(tree.Select(x=> x.id).ToList());
    } else if(search.ContainsKey("Parentid"))
    {
        // do your search server side here
        //Format is List<TreeNode>
        return Json(tree);
    }
  
}
Client Side Script jstree
var url ="/controllerName/GetTreeNode";
$("#treenode").jstree({
       "core": {
           "data": {
               "url": url,
               "type":"post",
               "data": function (node) {
                   return { "ParentId": node.id };
               }
           }
       },
       "search": {        
           "show_only_matches": true,
           ajax: {
               "url": url,
               "type": "post",
               "data": function (str) {
                   return { "str": str };
 
               }        
           }
       },
       "plugins": ["search"],
   });
   var searching = false;
   $('#datasearch').keyup(function () {
 
       if (!searching) {
           searching = true;
           setTimeout(function () {
               searching = false;
               var v = $('#datasearch').val();
               $("#treenode").jstree(true).search(v);         
        
            }, 1000);
       }
 
   });

Posted by: Guest on December-04-2020

Source

public class TreeState { public bool loaded { set; get; } public bool opened { set; get; } public bool selected { set; get; } public bool disbled { set; get; }

Code answers related to "sample of jstree ajax call code farm"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "sample of jstree ajax call code farm"

Code answers related to "sample of jstree ajax call code farm"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us