一个组件就代表一个类。
写一个类（.CS）文件，其次需要在类的后面继承一下基类和接口，
在类里面写一个继承基类的构造函数例如：
public 类名():base("标签名")
1.组件的属性uiproperties
首先需要声明定义一个常量的属性其次要把属性给封装一下。最后把这些属性在组件重写OnLoad的方法里注册一下。
2.组件的事件events
和封装属性一样，也是同样需要先声明定义一个事件其次要把属性给封装一下，再次把这些属性在组件的override的onload事件里注册一下。
3如果这个组件需要连接数据库需要添加一些属性properties
跟组件的属性一样需要定义常量然后封装一下最近在onload事件里注册一下。
例如： #region properties
public const string SqlProperty = "sql";
/// <summary>
/// 配置树状数据SQL，例如：
/// select pkey,name,parentid,icon,url,[orderbyfields] from T
/// </summary>
public string Sql { get; set; }
public const string OrderByProperty = "orderby";
/// <summary>
/// 排序表达式
/// </summary>
public string OrderBy { get; set; }
#endregion
4onload事件
override一下onload方法，在这个方法里需要base.noload(e)；其次写这个组件的uiclass样式。再次注册一下方法、事件events。最后调用获取数据的方法。
5.绑定数据uidatabind()
6.获取数据getdata()
首先判断一下sql语句是否为空，其次调用一下绑定例如
private void GetData()
{
if (!string.IsNullOrEmpty(Sql))
{
this.UiData = DataAccess.ExecuteDataTable(Sql);
}
}
完整代码如下：
namespace 命名空间
{
[ToolboxData("<{0}:EosAccordion runat=server></{0}:EosAccordion>")]
public class EosAccordion : EosEasyUiBase, IBindControl<DataTable>
{
public EosAccordion()
: base("div") //div可以根据自己的需要来自己设置，如果是表格可以写成table如果是按钮可以写成A
{
this.OrderBy = "orderno";
this.ItemTitleStyle = "text-align:center";
}
#region uiproperties
public const string FitProperty = "fit";
/// <summary>
/// 如果设置为true，可伸缩面板所在容器将铺满它所在的父容器（浏览器）
/// </summary>
public bool? Fit { get; set; }
public const string BorderProperty = "border";
/// <summary>
/// 定义是否显示边框。
/// </summary>
public bool? Border { get; set; }
public const string AnimateProperty = "animate";
/// <summary>
/// 定义当延伸或者折叠面板时是否显示动画效果。
/// </summary>
public bool? Animate { get; set; }
#endregion
#region events
public const string OnSelectEvent = "onSelect";
/// <summary>
/// 当一个可伸缩面板被选择时触发。function(title){}
/// </summary>
public string OnSelect { get; set; }
public const string OnAddEvent = "onAdd";
/// <summary>
/// 在一个新面板被添加时触发。function(title){}
/// </summary>
public string OnAdd { get; set; }
public const string OnBeforeRemoveEvent = "onBeforeRemove";
/// <summary>
/// 在可伸缩面板被移除之前触发，返回false将取消移除。function(title){}
/// </summary>
public string OnBeforeRemove { get; set; }
public const string OnRemoveEvent = "onRemove";
/// <summary>
/// 在一个可伸缩面板被移除时触发。function(title){}
/// </summary>
public string OnRemove { get; set; }
#endregion
#region properties
public const string SqlProperty = "sql";
/// <summary>
/// 配置树状数据SQL，例如：
/// select pkey,name,parentid,icon,url,[orderbyfields] from T
/// </summary>
public string Sql { get; set; }
public const string OrderByProperty = "orderby";
/// <summary>
/// 排序表达式
/// </summary>
public string OrderBy { get; set; }
public const string ItemTemplateProperty = "itemtemplate";
/// <summary>
/// 子项模板
/// </summary>
public string ItemTemplate { get; set; }
/// <summary>
/// 子项标题样式
/// </summary>
public string ItemTitleStyle { get; set; }
#endregion
#region onload
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
this.UiClass = "easyui-accordion";//组建的样式
this.RegistProperty(FitProperty, this.Fit);
this.RegistProperty(BorderProperty, this.Border);
this.RegistProperty(AnimateProperty,this.Animate);
this.RegistProperty(OnSelectEvent,this.OnSelect);
this.RegistProperty(OnAddEvent,this.OnAdd);
this.RegistProperty(OnBeforeRemoveEvent,this.OnBeforeRemove);
this.RegistProperty(OnRemoveEvent,this.OnRemove);
// 获取导航数据
this.GetData();
}
private void GetData()
{
if (!string.IsNullOrEmpty(Sql))
{
this.UiData = DataAccess.ExecuteDataTable(Sql);
}
}
#endregion
#region IBindControl
public DataTable UiData { get; set; }
public void UiDataBind()
{
if (this.UiData == null) return;
EosAccordionPanel panel = null;
DataRow[] parents = this.UiData.Select("isnull(ParentId,'')=''", OrderBy);
foreach (DataRow parent in parents)
{
// 添加父级导航
panel = new EosAccordionPanel();
panel.Attributes["title"] = parent["name"].ToString();
panel.Attributes["style"] = this.ItemTitleStyle;
if (parent["icon"] != Convert.DBNull)
{
panel.IconCls = parent["icon"].ToString();
}
DataRow[] childs = this.UiData.Select(string.Format("ParentId='{0}'", parent["pkey"]), OrderBy);
foreach (DataRow child in childs)
{
// 添加子级导航，并生成URL
ItemTemplate = ItemTemplate.Replace("[", "<").Replace("]", ">").Replace("|", "\"");
panel.Controls.Add(new LiteralControl(string.Format(ItemTemplate, child["name"], child["url"])));
}
// 添加到Accordion中
this.Controls.Add(panel);
}
}
#endregion
}
未完待续····
