数据下拉单选、多选控件

最近写了两个控件

都是数据集有关的，调用方式与代码基本上类似

一个是下拉列表单、多选，我给起名为：ComboGrid

二个是数据导出Office控件

二者都是自定义数据集，只要继承了IEnumerable 或 IListSource的数据集都可以使用

以下是二者的效果图

1. ComboGrid

2. 导出Office

 

下面看下调用代码（数据导出控件与ComboGrid调用差不多，只粘贴一种了）

ComboGrid 样式定义

<title>ComboGrid 数据下拉多选/单选 控件</title>
    <style type="text/css">
       .ComboGrid {}
       .ComboGrid .TextBox{width:240px; border:solid 1px green;vertical-align:bottom;}
       .ComboGrid .ImageButton{border:0;vertical-align:bottom;}
       .ComboGrid .TableCss{width:100%; background-color:orange;}
       .ComboGrid .HeaderCss {font-weight:bold; font-size:13px; height:22px; text-align:center; color:white; background-color:black;}
       .ComboGrid .ItemCss {font-size:12px; text-align:center; background-color:white;}
       .ComboGrid .AlternatingItemCss {font-size:12px; text-align:center; background-color:gray;}
       .ComboGrid .ItemArea {border:solid 0px Blue; width:260px;overflow-y:auto;overflow-x:auto;}
       .ComboGrid .Pager {width:100%; text-align:center; background-color:gray;}
       .ComboGrid .PagerButton {border:none; cursor:pointer; background-color:Transparent; color:white; padding:1px 0px 1px 0px; margin-right:4px;}
       .ComboGrid .PagerNumber {}
       .ComboGrid .PagerNumber input {width:20px; text-align:center;border:none;font-weight:bold; background-color:Transparent;}
    </style>

 

ComboGrid 客户端取值方法

 

<script type="text/javascript">
        function getValue()
        {
           var obj = GetComboGridContent("ComboGrid1");
           
           alert(obj.Text + " - " + obj.Value);
        }
    </script>

 

ComboGrid 控件调用代码

 

<DDControl:ComboGrid ID="ComboGrid1" DataTextField="Name" DataValueField="Id" CSS="ComboGrid" runat="server" IsShowHead="True" IsPager="True" PageSize="3" Language="Chinese" SelectMode="Single">
                <DDControl:ComboParameter ColumnName="Id" HeaderName="ID" />
                <DDControl:ComboParameter ColumnName="Name" HeaderName="姓名" />
                <DDControl:ComboParameter ColumnName="EnglishName" HeaderName="英文名" />
                <DDControl:ComboParameter ColumnName="Age" HeaderName="年龄" />
            </DDControl:ComboGrid>

 

 

ComboGrid 赋值代码

 

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //这是一个泛型列表作为数据源
                List<Person> ls = new List<Person>();
                ls.Add(new Person("张三", "Three Zhang", 26, 1));
                ls.Add(new Person("李四", "Four Lee", 25, 2));
                ls.Add(new Person("王五", "Five Wang", 36, 3));

                //这是一个DataTable作为数据源
                DataTable dt = new DataTable();
                DataColumn dc = new DataColumn("EnglishName", typeof(string));
                dt.Columns.Add(dc);
                dc = new DataColumn("Name", typeof(string));
                dt.Columns.Add(dc);
                dc = new DataColumn("Age", typeof(int));
                dt.Columns.Add(dc);
                dc = new DataColumn("Id", typeof(int));
                dt.Columns.Add(dc);

                dt.Rows.Add(new object[4] { "Three Zhang", "张三", 25, 1 });
                dt.Rows.Add(new object[4] { "Four Lee", "李四", 22, 2 });
                dt.Rows.Add(new object[4] { "Five Wang", "王五", 36, 3 });
                dt.Rows.Add(new object[4] { "Six Zhao", "赵六", 26, 4 });
                dt.Rows.Add(new object[4] { "Seven Qian", "钱七", 26, 5 });

                ComboGrid1.DataSource = dt;
                ComboGrid1.SelectedValue = "3";
                ComboGrid2.DataSource = ls;
                ComboGrid2.SelectedValue = "1,2";
            }
        }
        
        //服务器端取值的方法
        protected void Button2_Click(object sender, EventArgs e)
        {
            Response.Write("<script>alert('Index:"+ComboGrid1.SelectedIndex+"-Value:"+ComboGrid1.SelectedValue+"-Text:"+ComboGrid1.SelectedText+"');</script>");
        }

 

ComboGrid 两种取值结果

<1> 客户端js脚本取值结果 （obj对象包括Text与Value）

<2>服务器控件按钮取值结果

 

:)只是我本人在开发的时候，感觉需要类似的东西，不知道大家有没有遇到过需要的

 

【Updated】

这两个控件又完善了

地址: http://dev.aspxwiki.com