【前言】:
在之前的项目中对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的官网进行学习。