easyui tree树

关于Easyui中tree 的那点破事

先看官网的提供的说明：

• id: 节点的ID
• text: 节点显示的文字
• state: 节点状态，有两个值  'open' or 'closed', 默认为'open'. 当为‘closed’时说明此节点下有子节点否则此节点为叶子节点
• checked: Indicate whether the node is checked selected.
• attributes: 节点中其他属性的集合
• children: 子节点集合

接收的JSON格式如下：

[{      "id" :1,      "text" : "Folder1" ,      "iconCls" : "icon-save" ,      "children" :[{          "text" : "File1" ,          "checked" : true      },{          "text" : "Books" ,          "state" : "open" ,          "attributes" :{              "url" : "/demo/book/abc" ,              "price" :100          },          "children" :[{              "text" : "PhotoShop" ,              "checked" : true          },{              "id" : 8,              "text" : "Sub Bookds" ,              "state" : "closed"          }]      }] },{      "text" : "Languages" ,      "state" : "closed" ,      "children" :[{          "text" : "Java"      },{          "text" : "C#"      }] }]

 

 我们在应用时，程序只要返这样的格式给tree 就可以了

如果tree 节点不多，建议一次取出所有数据。如果想异步加载数据。可以使用如下代码：

html:

 

< ul  id="tree"></ ul >

 

JS:

$( function (){       $( '#tree' ).tree({            url: 'treedata.ashx' ,            onClick: function (node){                  alert(node.text);            }       }) })

代码很简单吧，其实复杂的都在处理JSON数据中，后端要生tree指定格式的字符串，这棵树才会正常运转.

大多数据在设计的时候不会专门为此树设计相应的字段。 比如：text 在我们的数据库中可能是title 那我们就需要在生成字符串后替换下，将title 替换为 text 。 很多同学认为在点击节点时需要把此节点的ID传给后端程序，这一点很多同学在初次接触时会有误解，在点击节点时会自动检查是否有子节点，如有会自动调用url并将父ID传过去地。