由于日常WEB开发中常会用到树形来完成以下主要功能。

主要解决以下一些功能

经过几个插件的比较最后决定使用dynatree。来完成以上功能。

dynatree项目网站https://code.google.com/p/dynatree/

本文中dynatree的版本为1.2.4

首先通常代码中会有一个树形结构的实体对象如下代码：

publicclassNode{publicintID{get;set;}publicstringName{get;set;}publicstringDescription{get;set;}publicList<Node>Children{get;set;}publicNodeParent{get;set;}}

由于我们采用AJAX方式所以我打算在后台的controller中返回json的方式来完成对tree的数据加载
于是为了方便dynatree的前台接受，我做了一个封装类代码如下

publicclassDynatreeNode{privateDynatreeNode(){children=newList<DynatreeNode>();}#regionproperty///<summary>///(required)Displayednameofthenode(htmlisallowedhere)///</summary>publicstringtitle{get;set;}///<summary>///tooltip:null,//Showthispopuptext.///</summary>publicstringtooltip{get;set;}///<summary>///href:null,//Addedtothegeneratedatag.///</summary>publicstringhref{get;set;}///<summary>///icon:null,//Useacustomp_w_picpath(filenamerelativetotree.options.p_w_picpathPath).'null'fordefaulticon,'false'fornoicon.///</summary>publicstringicon{get;set;}///<summary>///addClass:null,//Classnameaddedtothenode'sspantag.///</summary>publicstringaddClass{get;set;}///<summary>///children:null//Arrayofchildnodes.///</summary>publicList<DynatreeNode>children{get;set;}///<summary>///unselectable:false,//Preventselection.///</summary>publicboolunselectable{get;set;}///<summary>///hideCheckbox:false,//Suppresscheckboxdisplayforthisnode.///</summary>publicboolhideCheckbox{get;set;}///<summary>///select:false,//Initialselectedstatus.///</summary>publicboolselect{get;set;}///<summary>///Maybeusedwithactivate(),select(),find(),...///</summary>publicstringkey{get;set;}///<summary>///expand:false,//Initialexpandedstatus.///</summary>publicboolexpand{get;set;}///<summary>///focus:false,//Initialfocusedstatus.///</summary>publicboolfocus{get;set;}///<summary>///Useafoldericon.Alsothenodeisexpandablebutnotselectable.false///</summary>publicboolisFolder{get;set;}///<summary>///isLazy:false,CallonLazyRead(),whenthenodeisexpandedforthefirsttimetoallowfordelayed///</summary>publicboolisLazy{get;set;}///<summary>///noLink:false,//Usespaninsteadofatagforthisnode///</summary>publicboolnoLink{get;set;}///<summary>///activate:false,//Initialactivestatus.///</summary>publicboolactivate{get;set;}#endregionpublicstaticDynatreeNodeCreate(Nodenode){DynatreeNodedynatreeNode=newDynatreeNode{title=node.Name,tooltip=node.Name,activate=false,addClass=null,expand=false,focus=false,icon=null,href=null,key=null,unselectable=false,select=false,noLink=false,isLazy=false,hideCheckbox=false,isFolder=false};foreach(variteminnode.Children){dynatreeNode.isFolder=true;dynatreeNode.children.Add(DynatreeNode.Create(item));}returndynatreeNode;}}

因为javascript对大小写敏感所以这里我将属性都改成小写已达到和dynatree的children参数统一。

接下来控制器很简单的返回json即可，代码如下：

publicActionResultAjaxTree(){root=GetTreeRoot();vardynatreeNode=DynatreeNode.Create(root);returnJson(dynatreeNode,JsonRequestBehavior.AllowGet);}

在view视图中我们只要加载jquery，jqueryUI和dynatree.js
由于dynatree的checkbox等使用样式写的，所以也必须引用dynatree.css
视图view的代码如下：

@{ViewBag.Title="Index";Layout="~/Views/Shared/_Layout.cshtml";}<h3>Index</h3><divid="tree"></div>@sectionscripts{<linkhref="~/Content/skin-vista/ui.dynatree.css"rel="stylesheet"/><scriptsrc="~/Scripts/jquery.dynatree.js"></script><scripttype="text/ecmascript">$(function(){$("#tree").dynatree({checkbox:true,selectMode:2,initAjax:{url:'/home/ajaxTree'},onSelect:function(select,node){if(select){alert(node.data.title)}}});});</script>}

一颗简单的多选树就这么完成了，如果要单选只需将参数selectMode设置为1