sample of jstree ajax call code farm

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

View another examples Add Own solution

3.8

Awgiedawgie 440215 points

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

Thank you! 5

3.8 (5 Votes)

3.71

Krish 100200 points

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

Thank you! 7

3.71 (7 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Javascript

Javascript 2023-04-21 22:52:36
Javascript 2022-03-27 22:25:20 javascript download string as file
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
Javascript 2022-03-27 21:15:02 javascript regex french phone number
Javascript 2022-03-27 21:05:03 cypress custom error message
Javascript 2022-03-27 21:00:05 create element javascript with id
Javascript 2022-03-27 20:40:57 feather icons react
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

sample of jstree ajax call code farm

sample of jstree ajax call code farm

Welcome Back!

Create a Free Account