单条目选择控件
2013-06-09 18:59 Carl Xing 阅读(248) 评论(0) 编辑 收藏 举报using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; namespace Gyyx.EOV3.Web.UserControl { /// <summary> /// 键值对选择 /// </summary> public class ItemSelector : CompositeControl { private TextBox tbItemText; private HtmlInputHidden hiItemValue; private Label lbItemText; // private HtmlInputHidden hiItemText; private HtmlGenericControl spanClose; /// <summary> /// 构造 /// </summary> public ItemSelector() { tbItemText = new TextBox() { ID = "tbItemText" }; hiItemValue = new HtmlInputHidden() { ID = "hiItemValue" }; lbItemText = new Label() { ID = "lbItemText" }; //hiItemText = new HtmlInputHidden() { ID = "hiItemText" }; spanClose = new HtmlGenericControl("span") { ID = "spanClose", InnerText = " ×" }; this.Controls.Add(tbItemText); this.Controls.Add(hiItemValue); this.Controls.Add(lbItemText); this.Controls.Add(spanClose); //this.Controls.Add(hiItemText); } /// <summary> /// 初始化控件 /// </summary> /// <param name="e"></param> protected override void OnInit(EventArgs e) { base.OnInit(e); spanClose.Attributes.Add("style", "cursor:pointer;display:none;width:10px;"); this.addClick = string.IsNullOrEmpty(AddClick) ? this.ClientID + "_AddItem" : AddClick; this.closeClick = string.IsNullOrEmpty(CloseClick) ? this.ClientID + "_DeleteItem" : CloseClick; this.Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), this.ClientID + "_registerScripts", @" <script type='text/javascript'> function " + this.addClick + @"() { var txt = document.getElementById('" + tbItemText.ClientID + @"'); var span = document.getElementById('" + lbItemText.ClientID + @"'); var close = document.getElementById('" + spanClose.ClientID + @"'); txt.style.display = 'none'; span.innerHTML = txt.value; close.style.display = ''; } function " + this.closeClick + @"() { var txt = document.getElementById('" + tbItemText.ClientID + @"'); var span = document.getElementById('" + lbItemText.ClientID + @"'); var close = document.getElementById('" + spanClose.ClientID + @"'); var itemVal = document.getElementById('" + hiItemValue.ClientID + @"'); txt.style.display = ''; txt.value=''; itemVal.value=''; span.innerHTML = ''; close.style.display = 'none'; } function " + this.ClientID + @"_CheckVal() { var close = document.getElementById('" + spanClose.ClientID + @"'); var txt = document.getElementById('" + tbItemText.ClientID + @"'); var spanTxt=document.getElementById('" + lbItemText.ClientID + @"'); var hiVal=document.getElementById('" + hiItemValue.ClientID + @"'); if(txt.value!='') { " + this.addClick + @"() } else if(spanTxt.innerHTML=='') { hiVal.value=''; " + this.closeClick + @"() } else { close.style.display=''; txt.style.display='none'; txt.value=''; } } </script> "); this.spanClose.Attributes.Add("onclick", CloseClick + "()"); tbItemText.CssClass = this.TextCssClass; this.Page.ClientScript.RegisterStartupScript(Page.GetType(), this.ClientID+"ckval", this.ClientID + "_CheckVal();", true); } private string addClick; /// <summary> /// 添加键值对时触发的前端事件 /// </summary> public string AddClick { get { return addClick; } } private string closeClick; /// <summary> /// 删除键值对时触发的前端事件 /// </summary> public string CloseClick { get { return closeClick; } } /// <summary> /// 控件值 /// </summary> public ListItem Value { get { return new ListItem(tbItemText.Text, hiItemValue.Value); } set { tbItemText.Text = value.Text; hiItemValue.Value = value.Value; } } /// <summary> /// 输入框的样式 /// </summary> public string TextCssClass { get; set; } /// <summary> /// 输入框客户端id /// </summary> public string TextBoxClientID { get { return tbItemText.ClientID; } } /// <summary> /// 值控件客户端ID /// </summary> public string HiddenValueClientID { get { return hiItemValue.ClientID; } } } }
注:火狐不支持innerText属性,使用innerHTML