不再为无限级树结构烦恼,且看此篇s
2024-10-21 04:10:41
很久都没有写点什么出来分享了,最近在做多级树的时候,发现来来回回写过很多遍,于是封装成用户控件,以方便日后重复使用.
首先上效果:
我们看到以上2种效果,都是支持任意级的,这里源码中使用的是递归,以便高效的完成HTML的渲染.
下面上代码,代码中解释的都很详细了,我就不再细说.下面将有示例调用演示:
public partial class UC_MultiLevelTree : System.Web.UI.UserControl
{
#region 数据相关属性 /// <summary>
/// 要绑定的数据源
/// </summary>
public DataTable DataSource { get; set; } /// <summary>
/// 多级树显示文本所在列列名
/// </summary>
public string TextFeild { get; set; } /// <summary>
/// 多级树单条数据识别列列名(即选择项的值)
/// </summary>
public string ValueFeild { get; set; } /// <summary>
/// 多级树层级区别列列名(仅限单个列区分层级)
/// </summary>
public string LevelFeild { get; set; } /// <summary>
/// 多级树顶级的父项值
/// </summary>
public string TopLevelFeildValue { get; set; } #endregion #region 显示相关属性 /// <summary>
/// 是否显示多选框,默认为显示
/// </summary>
public bool ShowCheckBox { get; set; } /// <summary>
/// 是否显示自定义根节点
/// </summary>
public bool ShowCustomerRoot { get; set; } /// <summary>
/// 自定义根节点文本
/// </summary>
public string CustomerRootText { get; set; } /// <summary>
/// 多级树宽度,可为像素或者百分比
/// </summary>
public string Width { get; set; } /// <summary>
/// 多级树高度,可为像素或者百分比
/// </summary>
public string Height { get; set; } /// <summary>
/// 展开符号(可为HTML代码)
/// </summary>
public string ExtendSign { get; set; } /// <summary>
/// 收缩符号(可为HTML代码) /// </summary>
public string ShrinkSign { get; set; } /// <summary>
/// 每级与上级空格个数
/// </summary>
public int LevelSeparatorCount { get; set; } /// <summary>
/// 默认展开级别
/// </summary>
public int ExtendLevelNum { get; set; } #endregion #region 私有变量 /// <summary>
/// 扩展标记的HTML
/// </summary>
private string StrExtendSign; /// <summary>
/// 收缩标记的HTML
/// </summary>
private string StrShrinkSign; /// <summary>
/// 多选框的HTML
/// </summary>
private string StrCheckbox; /// <summary>
/// 子层级开始符号的HTML
/// </summary>
private string LevelSeparator = " "; #endregion protected override void OnInit(EventArgs e)
{
base.OnInit(e);
this.ShowCheckBox = true;
this.Width = "100%";
this.Height = "100%";
this.ExtendSign = "[+]";
this.ShrinkSign = "[-]";
this.TopLevelFeildValue = CRMCommon.strNullGuid;
this.LevelSeparatorCount = ;
this.ExtendLevelNum = ;
} protected void Page_Load(object sender, EventArgs e)
{ } public void DataBind()
{
this.StrCheckbox = this.ShowCheckBox ? "<input type='checkbox' class='MLT_Checkbox'/>" : "";
this.StrExtendSign = "<span class='MLT_ExtendSign' {0}>" + this.ExtendSign + "</span>";
this.StrShrinkSign = "<span class='MLT_ShrinkSign' {0}>" + this.ShrinkSign + "</span>";
this.ltMultiLevelTreeHtml.Text = RenderTree(this.TopLevelFeildValue, );
} private string RenderTree(string parentValue, int level)
{
StringBuilder sb = new StringBuilder(); string extendSignHtml = "";
string shrinkSignHtml = ""; //收缩,展开按钮的显示控制
if (level < this.ExtendLevelNum)
{
extendSignHtml = string.Format(this.StrExtendSign, "style='display:none;'");
shrinkSignHtml = string.Format(this.StrShrinkSign, "");
}
else
{
extendSignHtml = string.Format(this.StrExtendSign, "");
shrinkSignHtml = string.Format(this.StrShrinkSign, "style='display:none;'");
} //自定义根节点
if (level == )
{
sb.AppendFormat("<div class='MLT_Panel' style='width:{0};height:{1}'>", this.Width, this.Height);
if (this.ShowCustomerRoot)
{
sb.AppendFormat("<div class='MLT_Item' level='{0}' rel=''>{1}<span class='MLT_Item_Text'>{2}</span></div>", level, extendSignHtml + shrinkSignHtml + this.StrCheckbox, this.CustomerRootText); level += ;
}
sb.Append(RenderTree(parentValue, level));
sb.Append("</div>");
} else if (level != )
{
//数据项绑定
if (this.DataSource != null && this.DataSource.Rows.Count > )
{
string levelSeparator = ""; if (level > )
{
levelSeparator += "<span class='MLT_LevelSeparator'>";
for (int i = ; i <= (level - ) * this.LevelSeparatorCount; i++)
{
levelSeparator += this.LevelSeparator;
}
levelSeparator += "</span>";
} DataRow[] drList = this.DataSource.Select(string.Format("{0}='{1}'", this.LevelFeild, parentValue)); if (drList != null && drList.Length > )
{
level += ;
foreach (DataRow dr in drList)
{
string childHtml = RenderTree(dr[ValueFeild].ToString(), level); string signs = string.IsNullOrWhiteSpace(childHtml) ? "<span class='MLT_ExtendSignPlaceholder'></span>" : extendSignHtml + shrinkSignHtml; sb.AppendFormat("<div class='MLT_Item' level='{0}' rel='{1}' parent='{2}' {3}>{4}<span class='MLT_Item_Text'>{5}</span></div>", level - , dr[ValueFeild], dr[LevelFeild], level - > this.ExtendLevelNum ? "style='display:none;'" : "", levelSeparator + signs + this.StrCheckbox, dr[TextFeild]); if (!string.IsNullOrWhiteSpace(childHtml))
{
sb.Append(childHtml);
}
}
}
}
}
return sb.ToString(); }
}
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UC_MultiLevelTree.ascx.cs" Inherits="UC_MultiLevelTree" %>
<asp:Literal runat="server" ID="ltMultiLevelTreeHtml"></asp:Literal>
<script>
$(function () {
$(".MLT_Item").click(function (e) {
e.stopPropagation();
$(".MLT_Item").removeClass("MLT_Item_hover");
$(this).addClass("MLT_Item_hover");
extendItem(this);
}); $(".MLT_ExtendSign").click(function (e) {
e.stopPropagation();
var event = e.currentTarget;
var item = $(event).parent();
extendItem(item);
}) $(".MLT_ShrinkSign").click(function (e) {
e.stopPropagation();
var event = e.currentTarget;
var item = $(event).parent();
shrinkItem(item);
}) $(".MLT_Checkbox").click(function (e) {
e.stopPropagation();
var event = e.currentTarget;
var item = $(event).parent();
var checked = $(event).attr("checked");
checkItems(item, checked);
});
}); //展开项
function extendItem(obj) {
var rel = $(obj).attr("rel");
if (rel != undefined && rel.length > 0) {
$(obj).siblings("div[parent=" + rel + "]").each(function () {
$(this).show();
});
}
else {
$(obj).siblings("div[level=2]").show();
}
$(obj).find(".MLT_ExtendSign").hide();
$(obj).find(".MLT_ShrinkSign").show();
} //收缩项
function shrinkItem(obj) {
var rel = $(obj).attr("rel");
if (rel != undefined && rel.length > 0) {
$(obj).siblings("div[parent=" + rel + "]").each(function () {
$(this).hide();
$(this).find(".MLT_ExtendSign").show();
$(this).find(".MLT_ShrinkSign").hide();
shrinkItem(this);
});
}
else {
$(obj).siblings("div[level!=1]").hide();
$(obj).siblings("div[level!=1]").find(".MLT_ExtendSign").show();
$(obj).siblings("div[level!=1]").find(".MLT_ShrinkSign").hide();
}
$(obj).find(".MLT_ExtendSign").show();
$(obj).find(".MLT_ShrinkSign").hide();
} //选择项
function checkItems(obj, checked) {
var rel = $(obj).attr("rel");
if (rel != undefined && rel.length > 0) {
if (checked) {
$(obj).siblings("div[parent=" + rel + "]").each(function () {
$(this).find("input[type=checkbox]").attr("checked", "checked");
checkItems(this, checked);
});
}
else {
$(obj).siblings("div[parent=" + rel + "]").each(function () {
$(this).find("input[type=checkbox]").removeAttr("checked");
checkItems(this, checked);
});
}
}
else {
if (checked) {
$(obj).parent().find("input[type=checkbox]").attr("checked", "checked");
}
else {
$(obj).parent().find("input[type=checkbox]").removeAttr("checked");
}
}
}
</script>
<style type="text/css">
.MLT_Panel
{
white-space: nowrap;
overflow: auto;
} .MLT_Item
{
font-size: 12px;
line-height: 20px;
cursor: pointer;
} .MLT_Item_hover
{
background-color: rgb(167, 205, 240);
} .MLT_Item span
{
line-height: 20px;
display: inline-block;
} .MLT_Checkbox
{
position: relative;
width: 12px;
height: 12px;
margin: 0 2px;
bottom: 2px;
} .MLT_ExtendSign, .MLT_ShrinkSign, .MLT_ExtendSignPlaceholder
{
font-family: "宋体";
width: 18px;
text-align: center;
}
</style>
示例:
使用原数据:
生成HTML中,每一级每一条都包含在使用相同class的DIV当中,不同之外在于自定义的level,parent,rel等属性,请参见代码.
下列为调用代码方法,各参数可自行设定,说见用户控件CS代码:
由于时间问题,可能很多地方不便细说.如有更多疑问,请加QQ群:ASP.NET高级群,群号: 261882616
最新文章
- UIWebView保存网页中的图片(转载)
- 【开源EFW框架】框架中自定义控件GridBoxCard使用实例说明
- MoSCoW Method
- 异步请求---Get
- 5 DML语言
- 在Mac上使用vundle自动安装vim插件，并用vim代替sourceinsight
- ASP.NET - List<> 绑定 DropDownList
- Android中振动器(Vibrator)的使用
- 201521123025《java程序设计》第14周学习总结
- dispatch_barrier_async--屏障是一个同步点
- 关于HttpClient上传中文乱码的解决办法
- Java内存管理 -JVM 垃圾回收
- 第27月第27天 https
- C++课程学习建议
- ng-repeat不添加容器标签
- 可变数组（PLSQL）
- Mybatis返回值类型是hashmap，输入键值对为空时，key 丢失的问题
- 社交类APP原型模板分享——QQ
- 【Codeforces】CF 2 B The least round way（dp）
- 自定义JSP标签示例