htmlTable 模拟实现datagrid等的部分功能.

项目介绍:xx 资源管理 

时间:2007年6月开始

本项目,有个自定义报表的功能,要用到一些类似datagrid这样的控件来显示数据，但是，由于这些控件不能够满足系统一些需求,因此,希望能够做出一个轻量级的东西来实现这些控件的一些功能.

因此,才有了本文章:

相信大家都知道,用datagrid等控件,做自定义表头,是很麻烦的事情,并且,考虑一些效率上(个人认为,程序很大部分的时间都花费在数据绑定到控件上).

 好了,废话不多说,见代码吧:

 

/**/ /// <summary>
    /// 生成页面表格
    /// </summary>
    /// <param name="dt">保存告警基本信息的表</param>
    /// <param name="strUrl">本页面</param>
    /// <param name="tempTableOfColumnName">保存本页面要显示的列的表，其中，第一列对应数据库中的列名，第二列及为页面上要显示的列的名称</param>
    /// <param name="PageRowCounts">每一页要显示多少条记录，不能小于等于0</param>
    /// <returns></returns>
     private   string  InitPage(DataTable dt,  string  strUrl, DataTable tempTableOfColumnName,  int  PageRowCounts)
     ... {
        StringBuilder strBuilder = new StringBuilder();
        StringBuilder strTableBuilder = new StringBuilder();
        string pagerHeader = "";
        string strTemp = "";
        strTemp = string.Format(@"<table width='98%' border='0' cellpadding='0' cellspacing='1' class='tableBg' align='center'>");
        strBuilder.Append(strTemp);
        strBuilder.Append("<tr width='100%'>");
        strBuilder.Append("<td bgcolor='#FFFFFF'>   &nbsp;&nbsp;");//加上分页按钮


        strTemp = string.Format(@" <table cellspacing='1' cellpadding='0' width='100%' align='center' class='tableBg' border='0'>");
        strTableBuilder.Append(strTemp);
        strTableBuilder.Append("<tr class='HeadStyle' >");

        //生成页眉
        int iColumnsCount = tempTableOfColumnName.Columns.Count;//计算列数
        iColumnsCount = (int)100 / iColumnsCount;

        foreach (DataRow tempRow in tempTableOfColumnName.Rows)
        ...{
            strTemp = string.Format(@"<td width='{0}%' class='tdBg' nowrap >{1}</td>", iColumnsCount.ToString(), tempRow["ColumnValue"].ToString());
            strTableBuilder.Append(strTemp);
        }
        strTableBuilder.Append("</tr>");

        if (dt == null || dt.Rows.Count == 0)// 没有数据
        ...{
            strTemp = "<strong><font color='red'>对不起，没有您要查询的记录</font></strong>";
            string temp = string.Format(@"<tr align='center'><td colspan='{0}' bgcolor='#FFFFFF'>{1}</td></tr></table></td></tr></table>", iColumnsCount.ToString(), strTemp);
            strTableBuilder.Append(temp);
            strTemp = strBuilder.ToString() + strTableBuilder.ToString();
            return strTemp;
        }
        int offset;
        int length = PageRowCounts;
        string pageOffset = Request.QueryString["pager.offset"];
        if (pageOffset == null || pageOffset.Equals(""))
        ...{
            offset = 0;
        }
        else
        ...{
            offset = Int32.Parse(pageOffset);
        }
        if (dt.Rows.Count < length + 1)
            offset = 0;
        if (dt.Rows.Count > 0)
        ...{
            for (int i = offset; i < (length + offset) && i < dt.Rows.Count; i++)
            ...{
                DataRow row = dt.Rows[i];
                strTableBuilder.Append("<TR >");
                foreach (DataRow rows in tempTableOfColumnName.Rows)
                ...{
                    if (row.Table.Columns.Contains(rows["ColumnName"].ToString()))
                    ...{
                        strTemp = string.Format("<TD bgcolor='#FFFFFF' nowrap>{0}</TD>", row[rows["ColumnName"].ToString()].ToString());
                        strTableBuilder.Append(strTemp);
                    }
                    else
                        if (rows["ColumnName"].ToString() == "Edit")//查看 
                        ...{
                            strTemp = string.Format("<td align='center' bgcolor='#FFFFFF' ><A href='#' onClick=ShowAlarmInfo('{0}')><IMG alt='编辑' src='../Images/Browse.gif' border='0'></A> </td>", row["id"].ToString());
                            strTableBuilder.Append(strTemp);
                        }
                }
                strTableBuilder.Append("</tr>");
            }
            strTableBuilder.Append("</table></td></tr></table>");
        }
        //这个地方及为分页按钮部分
        int size = dt.Rows.Count;
        pagerHeader = Pager2.Generate(offset, size, length, strUrl);
        strBuilder.Append(pagerHeader);
        //
        //生成整个页面信息
        strTemp = strBuilder.ToString() + strTableBuilder.ToString();
        return strTemp.ToString().Trim();
    }

 

生成分页按钮的代码:

 

public   sealed   class  Pager2
... {
    // Fields
    private static string HEADER = "结果记录集:";
    private static int MAX_PAGE_INDEX = 200;

    // Methods
    public static string Generate(int offset, int length, int size, string url)
    ...{
        string pref;
        int start;
        string pref1 = "&";
        string param = "page.size" + length;
        if (url.IndexOf("?") > -1)
        ...{
            pref = "&";
        }
        else
        ...{
            pref = "?";
        }
        int pageNum = 0;
        int pageNo = (offset / size) + 1;
        if ((length % size) == 0)
        ...{
            pageNum = length / size;
        }
        else
        ...{
            pageNum = (length / size) + 1;
        }
        StringBuilder header = new StringBuilder();
        header.Append(HEADER + ": ");
        header.Append("共&nbsp;");
        header.Append(length.ToString() + "&nbsp;");
        header.Append("条&nbsp;");
        header.Append(pageNum.ToString() + "&nbsp;");
        header.Append("页记录 当前在第&nbsp;");
        header.Append("<select name="page" οnchange="goPage();">");
        for (int i = 1; i <= pageNum; i++)
        ...{
            header.Append("<option value='" + ((i - 1) * size) + "'");
            if (pageNo == i)
            ...{
                header.Append(" selected");
            }
            header.Append(">" + i + "</option>");
        }
        header.Append("</select>页&nbsp;&nbsp;");
        if (offset > 0)
        ...{
            header.Append(string.Concat(new object[] ...{ "&nbsp;<a href="", url, pref, param, pref1, "pager.offset=", offset - size, "">上一页</a> " }));
        }
        int radius = (MAX_PAGE_INDEX / 2) * size;
        if (offset < radius)
        ...{
            start = 0;
        }
        else if (offset < (length - radius))
        ...{
            start = offset - radius;
        }
        else
        ...{
            start = ((length / size) - MAX_PAGE_INDEX) * size;
        }
        if (offset < (length - size))
        ...{
            header.Append(string.Concat(new object[] ...{ "&nbsp;<a href="", url, pref, param, pref1, "pager.offset=", offset + size, "">下一页</a> " }));
        }
        header.Append(" ");
        header.Append("<script language="javascript"> ");
        header.Append("<!-- ");
        header.Append("function goPage() {window.location="" + url + pref + param + pref1 + "pager.offset=" + document.all.page.value;} ");
        header.Append("--> ");
        header.Append("</script>");
        return header.ToString();
    }

    public static string Generate2(int offset, int length, int size, string url, string param)
    ...{
        string pref;
        int start;
        string pref1 = "&";
        if (url.IndexOf("?") > -1)
        ...{
            pref = "&";
        }
        else
        ...{
            pref = "?";
        }
        int pageNum = 0;
        int pageNo = (offset / size) + 1;
        if ((length % size) == 0)
        ...{
            pageNum = length / size;
        }
        else
        ...{
            pageNum = (length / size) + 1;
        }
        StringBuilder header = new StringBuilder();
        header.Append(HEADER + ": ");
        header.Append("共&nbsp;");
        header.Append(length.ToString() + "&nbsp;");
        header.Append("条&nbsp;");
        header.Append(pageNum.ToString() + "&nbsp;");
        header.Append("页记录 当前在第&nbsp;");
        header.Append("<select name="page" οnchange="goPage();">");
        for (int i = 1; i <= pageNum; i++)
        ...{
            header.Append("<option value='" + ((i - 1) * size) + "'");
            if (pageNo == i)
            ...{
                header.Append(" selected");
            }
            header.Append(">" + i + "</option>");
        }
        header.Append("</select>页&nbsp;&nbsp;");
        if (offset > 0)
        ...{
            header.Append(string.Concat(new object[] ...{ "&nbsp;<a href="", url, pref, param, pref1, "pager.offset=", offset - size, "">上一页</a> " }));
        }
        int radius = (MAX_PAGE_INDEX / 2) * size;
        if (offset < radius)
        ...{
            start = 0;
        }
        else if (offset < (length - radius))
        ...{
            start = offset - radius;
        }
        else
        ...{
            start = ((length / size) - MAX_PAGE_INDEX) * size;
        }
        if (offset < (length - size))
        ...{
            header.Append(string.Concat(new object[] ...{ "&nbsp;<a href="", url, pref, param, pref1, "pager.offset=", offset + size, "">下一页</a> " }));
        }
        header.Append(" ");
        header.Append("<script language="javascript"> ");
        header.Append("<!-- ");
        header.Append("function goPage() {window.location="" + url + pref + param + pref1 + "pager.offset=" + document.all.page.value;} ");
        header.Append("--> ");
        header.Append("</script>");
        return header.ToString();
    }
}

 
Collapse Methods
 

 

使用介绍:

 

 DataTable dt  =  alarmMonitor.GetAlarmInfoByRegionIdAndBusiType(strRegionId, strAlarmtype, strRedefineSeverity);
             /**/ ////页面url
             string  strUrl  =   string .Format( " ShowAlarmInfo.aspx?CityId={0}&BusiType={1} " , strRegionId, strAlarmtype);
             // 页面上要显示的列的设置 以后可以考虑从 配置文件获得
            DataTable tempTableOfColumnName  =   new  DataTable();
            tempTableOfColumnName.Columns.Add( " ColumnName " ,  typeof (System.String));
            tempTableOfColumnName.Columns.Add( " ColumnValue " ,  typeof (System.String));

            tempTableOfColumnName.Rows.Add( " Edit " ,  " 查看 " );
            tempTableOfColumnName.Rows.Add( " RegionName " ,  " 地市名 " );
            tempTableOfColumnName.Rows.Add( " CityName " ,  " 城市名 " );
            tempTableOfColumnName.Rows.Add( " userlabel " ,  " 设备名称 " );
            tempTableOfColumnName.Rows.Add( " alarm_title_text " ,  " 告警标题 " );
            tempTableOfColumnName.Rows.Add( " EVENT_TIME " ,  " 告警发生时间 " );
            tempTableOfColumnName.Rows.Add( " vendor_type " ,  " 厂家告警类型 " );
            tempTableOfColumnName.Rows.Add( " redefineType " ,  " 重定义告警类型 " );

            tempTableOfColumnName.Rows.Add( " vendor_severity " ,  " 厂家告警级别 " );
            tempTableOfColumnName.Rows.Add( " redefineSeverity " ,  " 重定义级别 " );

            tempTableOfColumnName.Rows.Add( " subAlarmType " ,  " 专业类型 " );

            tempTableOfColumnName.Rows.Add( " probable_cause_txt " ,  " 可能原因正文 " );
            tempTableOfColumnName.Rows.Add( " locate_info " ,  " 定位信息 " );

             this .lblBtsInfo.Text  =  InitPage(dt, strUrl, tempTableOfColumnName,  20 );

 

本程序,现能够满足的功能包括:

可以实现简单分页,可以生成复杂的表头等.

需要优化以及添加的功能:

一:本程序分页后，如果要查看后面的页,程序从新读了次数据库,本可以用网上的存储过程返回几条数据,但是，如果这样,就需要修改程序,最后的结果是界面上只能够显示上一页下一页,不能够显示下拉筐.

2:还没有实现排序的功能.个人考虑在表头上,添加一个图片或者什么的,用javascript实现.

3:本程序,可以满足动态列的显示,但是，由于要实现这个功能.列的宽度也就只有按比列.

4:如要实现鼠标动作,只需strTableBuilder.Append("<TR >");中添加javascript就行了