一个页面搞定几乎所有的列表需求的实现思路和一点代码。

简介:      前情回顾 分页控件的使用能不能再简单一点呢,能不能一个页面搞定所有的列表需求?        其实如果要单独实现一个能够显示数据的表格,那么是很简单的,写一个for循环,把DataTable里面数据循环出来就OK了。

 

     前情回顾 分页控件的使用能不能再简单一点呢,能不能一个页面搞定所有的列表需求?

 

     其实如果要单独实现一个能够显示数据的表格,那么是很简单的,写一个for循环,把DataTable里面数据循环出来就OK了。相信大家都会做吧,如果是从asp走过来的应该更不陌生吧。

     上一篇说了,我们要根据表里面的记录来确定显示哪些列,哪一列在前,哪一列在后。那么怎么做呢?我们先定义一个类来存放这些信息。

 

 public class GridColumnsInfo
    {
        public int ColumnID = 0;
      public string ColSysName = "";
        public string ColName = "";
        public string ColType = "";
        public string ColWidth = "";
        public string ColAlign = "";
        public string Format = "";
        public int MaxLength = 0;

    }

 

     然后我们继承 System.Web.UI.WebControls.DataBoundControl,来创建一个自己的显示数据的控件。GridView就是继承的这个基类,我们也先照猫画虎来一个吧。public class myGrid : DataBoundControl    {}

 

     DataBoundControl 已经为我们做了不少的事情,比如定义了DataSource属性,还有DataBind()事件,其他的属性、事件我们暂时用不到,就先不管了。DataSource直接用就可以了,不用修改;而DataBind()就需要override一下了。

 

     我们还要先定义一个 Dictionary,用于存放GridColumnsInfo集合。然后写一个public void LoadGridColumnsInfo()函数来加载信息。

 public Dictionary<int, GridColumnsInfo> dic_GridCols ;

 

DataBind() 里面主要分为两个部分,第一部分绘制页眉,第二部分就是循环数据了。

 #region 输出页眉
            str.Append("<TR class=\"css_GridTR\">");
           
            foreach (KeyValuePair<int, GridColumnsInfo> entry in dic_GridCols)
            {
                str.Append("<TD>");
                str.Append(((GridColumnsInfo)entry.Value).ColName);
                str.Append("</TD>");
            }
            str.Append("</TR>");
            #endregion


     然后是循环输出数据,感觉这些也没有什么好说的,自己都觉得挺苦燥的。还是说一下行交替颜色的实现方法吧。用控件的形式输出一个table,首先要处理的就是样式,表格的样式要足够的灵活,否则的话就会有不好用的感觉。GridView用了很多的属性来进行描述,这个太复杂了,不和人家学了,来个简单一点的吧。样式/CSS,恩,就交给CSS来处理吧,定义几个css:

 

css_Grid1 :描绘table,
css_GridTR:描绘页眉,
td:控制td,
css_TR_c1、css_TR_c2、css_TR_c3...css_TR_cn: 来定义行交替色,这个数量就看要用多少种颜色来进行

交替了。

css_TR_move :鼠标经过时的样式;
css_TR_CK: 鼠标单击杭的样式。

 

     最后就是写几个js函数来控制鼠标经过和单击的效果。

     这里有演示效果。http://www.cnblogs.com/jyk/archive/2008/07/28/1255077.html

 

     好像有点乱。这里主要是想说如何根据配置信息来显示table,但是好像变成了介绍如何实现行的交替变色和点击行变色了。

 

     在下面就要做表单控件了。整理成一个完整一点的示例,在提供源码吧。

 

附源码:

 

img_405b18b4b6584ae338e0f6ecaf736533.gif img_1c53668bcee393edac0d7b3b3daff1ae.gif /**/ /// <summary>
    
/// 专门显示数据的控件
    
/// </summary>

    [DefaultProperty( " Text " )]
    [ToolboxData(
" <{0}:myGrid runat=server></{0}:myGrid> " )]
    
public   class  myGrid : DataBoundControl 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif    
{
img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif        
==============================句柄==============================#region ==============================句柄==============================
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
/**//// <summary>
        
/// 访问数据库用的实例
        
/// </summary>

        private DataAccessHelp dal = null;
        
#endregion


img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif        
数据访问实例的设置#region 数据访问实例的设置
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
/**//// <summary>
        
/// 设置数据访问层的实例
        
/// </summary>

        public DataAccessHelp DAL
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
set { dal = value; }
            
get
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
{
                
if (dal == null)
                    dal 
= new DataAccessHelp();

                
return dal;
            }

        }

        
#endregion


img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif        
成员和属性#region 成员和属性

img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif        
模块ID#region 模块ID
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
/**//// <summary>
        
/// 模块ID
        
/// </summary>

        private string _FunctionID = "";

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
/**//// <summary>
        
/// 模块ID
        
/// </summary>

        [Bindable(true)]
        [Category(
"配置信息")]
        [Localizable(
true)]
        [Description(
"模块ID,用于提取配置信息")]
        
public string FunctionID
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
set { _FunctionID = value; }
            
get
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
{
                
return _FunctionID;
            }

        }

        
#endregion


        
#endregion



img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
/**//// <summary>
        
/// 存放列表用的字段的描述信息,key:字段ID,value:GridColumnsInfo
        
/// </summary>

        public Dictionary<int, GridColumnsInfo> dic_GridCols ;//= new Dictionary<int, GridColumnsInfo>();

img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif        
从数据库的配置信息里面提取列表用的字段信息#region 从数据库的配置信息里面提取列表用的字段信息
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
/**//// <summary>
        
/// 从数据库的配置信息里面提取列表用的字段信息
        
/// </summary>

        public void LoadGridColumnsInfo()
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
            
string sql = "select * from _V_Use_ListCol where FunctionID=" + FunctionID;

            DataTable dt 
= DAL.RunSqlDataTable(sql);
            
if (dal.ErrorMsg.Length > 2)
                
return;

            
if (dt.Rows.Count == 0)
                
return;

            dic_GridCols 
= new Dictionary<int, GridColumnsInfo>();

            
foreach (DataRow dr in dt.Rows)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
{
                GridColumnsInfo info 
= new GridColumnsInfo();
                info.ColumnID  
= Int32.Parse(dr["ColumnID"].ToString());
                info.ColSysName  
= dr["ColSysName"].ToString();
                info.ColName  
= dr["ColName"].ToString();
                info.ColWidth  
= dr["ColWidth"].ToString();
                info.ColAlign 
= dr["ColAlign"].ToString();
                info.ColType  
= dr["ColType"].ToString();
                info.Format 
= dr["Format"].ToString();
                info.MaxLength 
= Int32.Parse(dr["MaxLength"].ToString());

                dic_GridCols.Add(info.ColumnID, info);

            }


            
//dal.Dispose();
        }

        
#endregion


img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
/**//// <summary>
        
/// 绑定数据
        
/// </summary>

        public override void DataBind()
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
            
if ((base.Site != null&& base.Site.DesignMode)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
{
                
//设计模式,退出
                return;
            }


img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif            
加载配置信息#region 加载配置信息
            
if (dic_GridCols == null)
                LoadGridColumnsInfo();

            
//没有配置信息,退出
            if (dic_GridCols == null)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
{
                CommandClass.MsgBox(
"没有设置配置信息"true);
                
return;
            }

            
#endregion


            System.Text.StringBuilder str 
= new StringBuilder(1000);
            str.Append(
"<Table class=\"css_Grid\">");
                   
 
img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif            
输出页眉#region 输出页眉
            str.Append(
"<TR class=\"css_GridTR\">");
            
            
foreach (KeyValuePair<int, GridColumnsInfo> entry in dic_GridCols)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
{
                str.Append(
"<TD>");
                str.Append(((GridColumnsInfo)entry.Value).ColName);
                str.Append(
"</TD>");
            }

            str.Append(
"</TR>");
            
#endregion


img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif            
输出数据#region 输出数据
            
if (this.DataSource != null)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
{
                
//输出js脚本
                System.Text.StringBuilder js = new StringBuilder();
                js.Append(
"<script >var myGridDataID = \"\"</script>");
                
base.Page.Response.Write(js.ToString());

                
if (this.DataSource is DataTable)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                
{
                    DataTable dt 
= (DataTable)this.DataSource;
           
                    Int32 i 
= 0;
                    GridColumnsInfo info;   
//循环里面的字段信息
                    string tmpValue;        //循环里的字段值
                    string DataID = "";     //数据主键值
                    string IDColumn = "";   //主键的字段名

img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif                    
主键的字段名#region 主键的字段名
                    IDColumn 
= dal.RunSqlGetFirstColValue("select IDColumn from Manage_Function_Info where FunctionID= "+ this.FunctionID);
                    
#endregion


img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif                    
定义交替次数#region 定义交替次数
                    
int t = 0;
                    
#endregion


                    
foreach (DataRow dr in dt.Rows)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    
{
                        
//获取主键字段的值
                        DataID = dr[IDColumn].ToString();

                        str.Append(
"<TR class=\"css_TR_c");
                        str.Append(t % 2 + 1); t++;
                        str.Append(
"\" onmousemove=\"Move(this)\" onmouseout=\"Out(this)\" onclick=\"Ck(this,'");
                        str.Append(DataID);
                        str.Append(
"')\" ondblclick=\"DbCK(me)\">");

                        
foreach (KeyValuePair<int, GridColumnsInfo> entry in dic_GridCols)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                        
{
                            info 
= (GridColumnsInfo)entry.Value;

                            
                            str.Append(
"<TD ");
img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif                            
align#region align
                            
if (info.ColAlign != "left")
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                            
{
                                str.Append(
"Align=\"");
                                str.Append(info.ColAlign);
                                str.Append(
"\" ");
                            }

                            
#endregion


img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif                            
width#region width
                            
if (info.ColWidth != "0")
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                            
{
                                str.Append(
"width=\"");
                                str.Append(info.ColWidth);
                                str.Append(
"\" ");
                            }

                            
#endregion


                            str.Append(
">");

img_7a2b9a960ee9a98bfd25d306d55009f8.gifimg_2887d91d0594ef8793c1db92b8a1d545.gif                            
设置数据的长度和格式#region 设置数据的长度和格式
                            tmpValue 
= dr[info.ColSysName].ToString();
                            
if (info.MaxLength != 0)
                                tmpValue 
= Functions.strCal(tmpValue, info.MaxLength);

                            
if (info.Format.Length != 0)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                            
{
                                
//判断数据库的字段类型,然后先转换再格式化。
                                switch (info.ColType)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                
{
                                    
case "bigint":
                                        tmpValue 
= string.Format(info.Format, Int64.Parse(tmpValue));
                                        
break;
                                    
                                    
case "int":
                                    
case "smallint":
                                    
case "tinyint":
                                        tmpValue 
= string.Format(info.Format, Int32.Parse(tmpValue));
                                        
break;

                                    
case "datetime":
                                    
case "smalldatetime":
                                        
if (tmpValue.Length > 0)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                                        
{
                                            DateTime tmpTime 
= DateTime.Parse(tmpValue);
                                            
if (tmpTime <= DateTime.Parse("1900-1-2"))
                                                tmpValue 
= "";  //不显示1900-1-1这样的日期
                                            else
                                                tmpValue 
= string.Format(info.Format, tmpTime);
                                        }

                                        
break;

                                    
case "decimal":
                                    
case "money":
                                    
case "smallmoney":
                                    
case "numeric":
                                        tmpValue 
= string.Format(info.Format, decimal.Parse(tmpValue));
                                        
break;

                                    
case "float":
                                    
case "real":
                                        tmpValue 
= string.Format(info.Format, float.Parse(tmpValue));
                                        
break;

                                        
//其他类型不格式化
                                }

                            }

                            
#endregion


                            str.Append(tmpValue);
                            str.Append(
"</TD>"); 
                        }

                        str.Append(
"</TR>");
                    }

                }

            }

            
#endregion


            str.Append(
"</Table>");

            
this.Controls.Add(new LiteralControl(str.ToString()));

        }


    }

相关文章
|
3月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
59 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
小程序 前端开发
【易售小程序项目】项目介绍、小程序页面展示与系列文章集合
【易售小程序项目】项目介绍、小程序页面展示与系列文章集合
126 2
|
7月前
|
移动开发 前端开发 JavaScript
完整的页面代码包括哪些
一个完整的HTML页面通常包含以下几个基本部分,每个部分都有其特定的用途
|
前端开发
后台添加菜单信息如何在前端循环遍历?
后台添加菜单信息如何在前端循环遍历?
48 0
|
小程序 API
【小程序】案例 - 本地生活(列表页面)
【小程序】案例 - 本地生活(列表页面)
184 0
【小程序】案例 - 本地生活(列表页面)
|
JSON 前端开发 JavaScript
列表展示怎么做
列表展示怎么做
113 0
|
前端开发
前端项目实战172-根据disFlag的值判断是详情页面还是编辑
前端项目实战172-根据disFlag的值判断是详情页面还是编辑
79 0
|
前端开发 开发者
评论列表案例-创建 CmtList 组件并渲染基本页面结构|学习笔记
快速学习评论列表案例-创建 CmtList 组件并渲染基本页面结构
152 0
评论列表案例-创建 CmtList 组件并渲染基本页面结构|学习笔记
|
Web App开发 Windows
当UI走查说页面色值错误时,先别急着检查代码
颜色一直是UI设计师们非常敏感的问题,为何屏幕会出现色差?工作中如何避免?
|
前端开发
评论列表案例-创建CmtList组件并渲染基本页面结构
评论列表案例-创建CmtList组件并渲染基本页面结构
评论列表案例-创建CmtList组件并渲染基本页面结构

相关实验场景

更多