EXT Dynamic Tree details

I recently studied ext and read many articles from other people in the garden. Today I am working on a dynamic tree myself. First, let's take a look.

 

 

 

 

 

 

 

The effect is shown above. Let's implement it step by step! Only key parts of the Code are posted!

The design of the first database table is shown in the figure.

For a very simple table, let alone it.

The second data layer uses the LINQ file: treelinqaccess

Code

         public List<TreeItem> GetTreeByPid(string pid)
        {
var q = from t in db.TreeItem
where t.pid == pid
select t;
return q.ToList();
        }

The third data layer interacts with ext using a general ashx-type processing program.

 

Code

 Public void gettreenode ()
{
Object node = convert. tostring (request ["Node"]);

If (node! = NULL)
{
Stringbuilder jsondata = new stringbuilder ();
String pid = request ["Node"]. Trim ();
List <treeitem> ls = access. gettreebypid (PID );

If (LS. Count> 0)
{
Jsondata. append ("[");

Foreach (treeitem nodes in LS)
{
{
Jsonconvert <treeitem> JSON = new jsonconvert <treeitem> ();
Bool isleaf = access. gettreebypid (nodes. ID). Count = 0? True: false;
String nodejsonstring = JSON. totreenode (nodes. ID, nodes. Text, isleaf). tostring ();
Jsondata. append (nodejsonstring );
Jsondata. append (",");
}

}

// Remove "," from the end
If (jsondata [jsondata. Length-1] = ',')
{
Jsondata. Remove (jsondata. Length-1, 1 );
}

Jsondata. append ("]");
}

Response. Write (jsondata );
Response. End ();
}
}

Here is a brief description:

1 access is the above LINQ instance, such as: treelinqaccess access = new treelinqaccess ()

2. the node received by request ["Node"] corresponds to the ID of the ext tree.

3. totreenode is the method in app_code.

Code

     public StringBuilder ToTreeNode(string id, string text, bool isLeaf)
    {
        StringBuilder jsonData = new StringBuilder();

        jsonData.Append("{");
        jsonData.Append("id:'");
        jsonData.Append(id);
        jsonData.Append("',text:'");
        jsonData.Append(text);
        jsonData.Append("'");
        jsonData.Append(",leaf:");
        jsonData.Append(isLeaf.ToString().ToLower());
        jsonData.Append("}");

return jsonData;
    }

Fourth ext code

 

Code

 VaR dtree = new Ext. Tree. treepanel ({
ID: 'mydynamictree ',
Renderto: 'maintab _ dynamictree ',
Title: 'ext dynamic tree ',
Width: 150,
Animate: True, // stretch as an animation to contract the child node
Collapsible: True,
Autoheight: True,
Autoscroll: True,
Rootvisible: True,
// Lines: True,
// Usearrows: True, // The default value of the Small Arrow style is +-
Loader: New Ext. Tree. treeloader ({
Dataurl: "../service/treeservice. ashx? Method = gettreenode"
}),
Root: New Ext. Tree. asynctreenode ({
ID: '0 ',
Text: 'root node ',
Expanded: True
}),
Listeners: // listens for events
{
'Click': function (node, e ){
Ext. MessageBox. Alert ("clicked node", "text:" + node. Text + "|" + "ID:" + node. ID );
}
}
});

 

This is the end of a dynamic tree. You are welcome to give your comments.