【项目实战】EasyUI Tree树

【前言】：

在之前的项目中对EasyUI的Tree树应用的不多，在这几天的一个项目模块中用到了tree树，刚开始还是有些畏惧的，不过还好，站在巨人的肩膀上应用起来还是能行的。

【用法】：

树是定义在<ul>元素中的，该标记可定义叶节点和子节点。

可以用JS加载，如下：

<ul id="tt"></ul>

$('#tt').tree({    url:'tree_data.json'});

【场景】：

根据combobox中所选的一项，动态加载出该项下的对应信息，都是以Tree的形式展现。

【核心代码】：

页面：

<div id="panel" class="easyui-panel" style="width: 200px; height: 400px;margin-top:10px; padding: 10px;

 background: #fafafa;" data-options="">   <ul id="tree" class="easyui-tree" data-options="animate:true,checkbox:true" ></ul></div>

JS:

窗体加载的时候执行加载树的方法：

function GetVolunGroup() {    var prjID = $("#cmbProject").combobox('getValue');     if (prjID=="") {         prjID = 0;     }      $('#tree').tree({         checkbox: true,         url: '/Ctrl_Volun_Basic_MultiplayerAnalysis/GetVolunGroup?prjID='+prjID,     });}

DAL层：

Con_Database db = new Con_Database();       public DataTable GetVolunGroup(int prjID)        {                       var Result = from a in db.V_Business_Project_VolunteerGroup                              select new { prjID = a.PrjID, VolunteerGroupID = a.VolunteerGroupID, VolunteerID=a.AutoID,VolunName=a.UserName,VolunGroupName=a.ZName};            if (prjID != 0)            {                Result = Result.Where(a => a.prjID == prjID);            }            return ToDataTable(Result);        }        /// <summary>        /// LINQ返回DataTable类型        /// </summary>        /// <typeparam name="T"> </typeparam>        /// <param name="varlist"> </param>        /// <returns> </returns>        public static DataTable ToDataTable<T>(IEnumerable<T> varlist)        {            DataTable dtReturn = new DataTable();            // column names            PropertyInfo[] oProps = null;            if (varlist == null)                return dtReturn;            foreach (T rec in varlist)            {                if (oProps == null)                {                    oProps = ((Type)rec.GetType()).GetProperties();                    foreach (PropertyInfo pi in oProps)                    {                        Type colType = pi.PropertyType;                        if ((colType.IsGenericType) && (colType.GetGenericTypeDefinition()                             == typeof(Nullable<>)))                        {                            colType = colType.GetGenericArguments()[0];                        }                        dtReturn.Columns.Add(new DataColumn(pi.Name, colType));                    }                }                DataRow dr = dtReturn.NewRow();                foreach (PropertyInfo pi in oProps)                {                    dr[pi.Name] = pi.GetValue(rec, null) == null ? DBNull.Value : pi.GetValue                    (rec, null);                }                dtReturn.Rows.Add(dr);            }            return dtReturn;        }

【总结】：

这个小例子仅仅是用到了树的定义加载，也没有做太多的修饰，它还可以设置点击触发事件、选中树的复选框触发事件等等，具体的应用可以结合EasyUI的官网进行学习。