开发学院 WEB开发 ASP.NET 实现可编辑下拉框的ComboBox asp.net控件方法阅读

实现可编辑下拉框的ComboBox asp.net控件方法

　2010-10-17 14:32:09　来源：WEB开发网　闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷

闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�

婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷　　闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫岄梺璇茬箲濮樸劑鍩€椤掍礁鍤柛鎾跺枎椤繐煤椤忓嫬鐎銈嗘礀閹冲酣宕滄导瀛樷拺闂侇偆鍋涢懟顖涙櫠椤斿墽纾煎璺猴功缁夎櫣鈧鍠栭…閿嬩繆濮濆矈妲烽梺绋款儐閹瑰洤螞閸愩劉妲堟繛鍡楃箲濞堟﹢姊绘担椋庝覆缂傚秮鍋撴繛瀛樼矤閸撶喖宕洪埀顒併亜閹烘垵鈧綊寮抽鍕厱閻庯綆浜烽煬顒傗偓瑙勬磻閸楀啿顕ｉ崐鐕佹Ь闂佸搫妫寸粻鎾诲蓟閵娾晜鍋嗛柛灞剧☉椤忥拷

核心提示：好久没更新了，发个有意思的，实现可编辑下拉框的ComboBox asp.net控件方法，可编辑dropdownlist 控件，感觉自己写的挺牛的呵呵，主要原因在于不同浏览器select下拉框的下箭头区域大小不一致，使用时候也比较简单，跟大家共享下 public class ComboBox:System.Web.

好久没更新了，发个有意思的，可编辑dropdownlist 控件，感觉自己写的挺牛的呵呵。跟大家共享下

    public class ComboBox:System.Web.UI.WebControls.CompositeControl
    {

        private TextBox input;
        private DropDownList select;

        public TextBox TextBox {

            get { this.EnsureChildControls(); return input; }
        }

        public DropDownList DropDownList {

            get { this.EnsureChildControls(); return select; }
        }



        protected override void CreateChildControls()
        {
            //base.CreateChildControls();

            this.Controls.Clear();
            input = new TextBox();
            input.ID = "input";

            select = new DropDownList();
            select.ID =  "select";

            this.Controls.Add(select);
            this.Controls.Add(input);
            this.ChildControlsCreated = true;
        }
        protected override void RenderContents(System.Web.UI.HtmlTextWriter writer)
        {
            this.EnsureChildControls();

  //           <select id="test1" style="width:100px;height:20px;">
  //<option>中国</option>
  //<option>aaaaa</option>
  //<option>ccccc</option>
  //<option>香港</option>
  //</select>  
  //<div style="width:80px; height:20px; position:absolute;" >
  //<iframe frameborder="0" style="width:100%; height:100%;"></iframe>
  //<input type="text" style="width:78px;height:17px;position:absolute; padding:0;" />
  //</div>
            select.Width = 100;
            select.Height = 20;
            select.RenderControl(writer);
            //div
            writer.AddStyleAttribute("width", "80px");
            writer.AddStyleAttribute("height", "20px");
            writer.AddStyleAttribute("position", "absolute");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            //iframe
            writer.AddStyleAttribute("width", "100%");
            writer.AddStyleAttribute("height", "100%");
            writer.AddAttribute("frameborder", "0");
            writer.RenderBeginTag(HtmlTextWriterTag.Iframe);
            writer.RenderEndTag();
            //input
            input.Width = 78;
            input.Height = 15;
            input.Style.Add(HtmlTextWriterStyle.Position, "absolute");
            input.RenderControl(writer);
            //end div
            writer.RenderEndTag();

    //            <script  type="text/javascript">
    //    $(function () {
    //        var select = $('#test1');
    //        var offset = select.offset();
    //        select.change(function () { $(this).next().find('input').val($(this).val()); })
    //        .next().css({ left: offset.left, top: offset.top, zindex: 1000 })
    //        .find('input').css({ left: 0, top: 0, zindex: 1001 });
    //    })
    //</script>
            writer.AddAttribute("type", "text/javascript");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.Write("$(function () {var select = $('#" + this.ID + "_" + this.select.ID + "'); var offset = select.offset();");
            writer.Write("select.change(function () { $(this).next().find('input').val($(this).find(':selected').text()); })");
            writer.Write(".next().css({ left: offset.left, top: offset.top, zindex: 1000 })");
            writer.Write(".find('input').css({ left: 0, top: 0, zindex: 1001 });})");
            writer.RenderEndTag();
        
            


        }

    }

实现方法比较简单，用的是组合控件。里面包着TextBox和DropDownList。技巧在于客户端。使用js和css将input正好定位到下拉框上面，遮住下拉框的显示区域，只留下下箭头区域。ie6下还得使用iframe来遮挡select.经测试在ie6先显示完美。ie8,获取显示有点小问题。仔细校对下可以修改过了，主要原因在于不同浏览器select下拉框的下箭头区域大小不一致。

使用时候也比较简单，直接操作控件的DropDownList属性和TextBox属性即可。

            ComboBox1.DropDownList.DataSource = new List<object>() { new { Text = "111", value = 1 }, new { Text = "222", value = 2 } };
            ComboBox1.DropDownList.DataTextField = "Text";
            ComboBox1.DropDownList.DataValueField = "Value";
            ComboBox1.DropDownList.DataBind();