【项目实战】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的官网进行学习。