数据下拉单选、多选控件

最近写了两个控件

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

一个是下拉列表单、多选，我给起名为：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

 

转载于:https://www.cnblogs.com/xjfhnsd/archive/2010/08/13/1799204.html