`

如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能

HTMLF#UIWebASP.net 
阅读更多
作者：未知   请作者速与本人联系

步入IT业已经有几年的时间了,从最早接触pb6.0到现在.Net技术,计算机技术不论是从硬件还是软件都有巨大的进步.而中国程序员总体水平在世界上也是远远落后，其中缺乏完善的体系、必要的交流和程序员个人英雄主义的思想是主要原因.前不久在工作中遇到一个关于用DataGrid分类显示数据的问题，显示的样式入下图所示: 希望能为遇到类似问题的朋友提供一个解决方案,并掌握类似问题的解决方法.

<!----><v:shapetype o:spt="75" coordsize="21600,21600" filled="f" stroked="f" id="_x0000_t75" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:extrusionok="f" o:connecttype="rect" gradientshapeok="t"></v:path><!----><o:lock v:ext="edit" aspectratio="t"></o:lock></v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" o:ole="" style="WIDTH: 6in; HEIGHT: 120.75pt"></v:shape>问题剖析:

以上为例,每门课程属于不同的类别,需要将显示数据的第一项类别进行汇总显示.用标准的DataGrid是难于实现上述功能的.显然需要依靠自身来解决.

思路:

       归根到底,不论何种样式的表格显示,表现到前台都是Html的Table元素,因此如果能够在读取数据时动态确定Html样式,并通过Div将html生成到前台显示的话,就可以控制复杂的显示.这里面其实包含了从已有显示的html反推到动态html生成的过程.

源代码及注释:

定义类保存类别名字和数据条数

     public class KeyVal
 {
  private string m_Skey;
  private string m_SVal;
  public string strKey
  {
   get
   {
    return m_Skey;
   }
   set
   {
    m_Skey=value;
   }
  }
  public string strVal
  {
   get
   {
    return m_SVal;
   }
   set
   {
    m_SVal=value;
   }
  }
  public KeyVal()
  {}
  public KeyVal(string SKey,string SVal)
  {
   strKey=SKey;
   strVal=SVal;
  }
 }

测试页代码和相关函数

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Security.Principal;
using Microsoft.Web.UI.WebControls; 
using System.Text;

namespace EisWebSite.WebInternet
{
 /// <summary>
 /// ClassCourse 的摘要说明。
 /// </summary>
 public class ClassCourse : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.DropDownList SpecialtyID;
  protected System.Web.UI.HtmlControls.HtmlGenericControl MainDiv;
  
  //
  #region 页面初始化
  private void Page_Load(object sender, System.EventArgs e)
  {
   
   if (!Page.IsPostBack)
   {
    AppGlobal.CBoxFillSpecialtyData(ref this.SpecialtyID,true);
   }
  }

  #endregion

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.SpecialtyID.SelectedIndexChanged += new System.EventHandler(this.SpecialtyID_SelectedIndexChanged);
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

  private string CreateOutHtml()
  {
   

   //取出类型数目以及名称
   DataSet dSet=new DataSet();
    
   dSet=添加自己的获取数据集的函数(灵活设计Sql语句)结果为类型、数目

//AppGlobal.AppSysWebService.ClassCourseTeacherMainFilters(Item);
   

ArrayList mList=new ArrayList();
   
   foreach(DataRow dRow in dSet.Tables[0].Rows)
   {
    KeyVal mObj=new KeyVal();
    mObj.strKey=dRow[0].ToString();
    mObj.strVal=dRow[1].ToString();
    mList.Add(mObj);
   }
   
    StringBuilder OutHtml=new StringBuilder();
   dSet=添加自己的数据集函数.注意数据的排序方式与上同

//AppGlobal.AppSysWebService.ClassCourseTeacherFilters(Item);
   //添加固定表头
   OutHtml.Append("<table cellspacing='0' cellpadding='0' align='center' rules='all' bordercolor='black' border='1'"
    +"id='GRid'"+
    " style='word-break:break-all; BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px solid; BORDER-LEFT:black 1px solid; WIDTH:100%; BORDER-BOTTOM:black 1px solid; BORDER-COLLAPSE:collapse'>"
    );
   OutHtml.Append("<table cellspacing='0' cellpadding='0' align='center' rules='all' bordercolor='black' border='1'"
    +"id='AGRid'"+
    " style='word-break:break-all;BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px solid; BORDER-LEFT:black 1px solid; WIDTH:100%; BORDER-BOTTOM:black 1px solid; BORDER-COLLAPSE:collapse'>");
   OutHtml.Append("<tr align='center'>"+
    "<td width='87' style='WIDTH: 87px; HEIGHT: 34px'>类别</td>"+
    "<td style='WIDTH: 253px; HEIGHT: 34px'>课程编号</td>"+
    "<td style='WIDTH: 280px; HEIGHT: 34px'>课程名称</td>"+
    "<td style='WIDTH: 86px; HEIGHT: 34px'>学分</td>"+
    "<td style='WIDTH: 140px; HEIGHT: 34px' >"+
    "<table width='100%' height='100%' cellpadding='0' cellspacing='0'>"+
    "<tr>"+
    "<td align='center'width='33%' ></td>"+
    "<td align='center'width='33%'>学期</td>"+
    
    "<td align='center'width='33%' ></td>"+
    "</tr>"+
    "<tr>"+
    "<td align='center' width='33%'>I</td>"+
    "<td align='center' width='33%'>II</td>"+
    "<td align='center' width='33%'>III</td>"+
    "</tr>"+
    "</table>"+
    "</td>"+
    "<td style='WIDTH: 86px; HEIGHT: 34px'>教师名称</td>"+
    "</tr>");
   OutHtml.Append("</table><table cellspacing='0' cellpadding='0' align='center' rules='all' bordercolor='black' border='1'"
    +"id='bGRid'"+
    " style='word-break:break-all;BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px solid; BORDER-LEFT:black 1px solid; WIDTH:775px; BORDER-BOTTOM:black 1px solid; BORDER-COLLAPSE:collapse'>");
   
   string SrcType="";
   string NewType="";
   foreach(DataRow dRow in dSet.Tables[0].Rows)
   {
    OutHtml.Append("<tr align='center' height='24px' style='word-break:break-all;'> ");
    
    NewType=dRow["KeyValue"].ToString();

    if (SrcType!=NewType)
     OutHtml.Append("<td width='80' style='WIDTH: 80px; HEIGHT: 34px' rowspan="+SeachObj(dRow["KeyValue"].ToString(),mList).strVal+">"+SeachObj(dRow["KeyValue"].ToString(),mList).strKey+"</td>");
    SrcType=NewType;
    
    OutHtml.Append("<td width=231px >"+dRow["courseID"].ToString()+"</td>");
    OutHtml.Append("<td width=255px>"+dRow["courseName"].ToString()+"</td>");
    OutHtml.Append("<td width=80px>"+dRow["credit"].ToString()+"</td>");
    //    OutHtml.Append("<td width=100px>");
    //    OutHtml.Append("<table width='110' height='100%' cellpadding='0' cellspacing='0' bordercolor='black' border='1'>"+
    //     "<tr>");
    switch (Convert.ToInt16(dRow["coursetime"].ToString(),10))
    {
      
     case 1:
      OutHtml.Append("<td width=43px>√"+"</td>");
      OutHtml.Append("<td width=43px></td>");
      OutHtml.Append("<td width=43px></td>");
      break;
     case 2:
      OutHtml.Append("<td width=43px></td>");
      OutHtml.Append("<td width=43px>√"+"</td>");
      OutHtml.Append("<td width=43px></td>");
      break;
     case 3:
      OutHtml.Append("<td width=43px></td>");
      OutHtml.Append("<td width=43px></td>");
      OutHtml.Append("<td width=3px>√"+"</td>");
      break;
     default:
      OutHtml.Append("<td width=43px></td>");
      OutHtml.Append("<td width=43px></td>");
      OutHtml.Append("<td width=43px></td>");
      break;
    }
//    OutHtml.Append("</tr></table>");
    //    OutHtml.Append("</td>");
    OutHtml.Append("<td width=79px style='word-break:break-all;'>"+dRow["TName"].ToString()+"</td>");
    OutHtml.Append("</tr>");
   }
   //添加固定表尾部
   OutHtml.Append("</table>");
   OutHtml.Append("</table>");
   //
   //   DGRid.DataSource=dSet;
   //   DGRid.DataBind();
   return OutHtml.ToString();
  }
  private KeyVal SeachObj(string strKey, ArrayList mList)
  {
   for (int i=0;i<=mList.Count-1;i++)
   {
    if (((KeyVal)mList[i]).strKey==strKey)
     return (KeyVal)mList[i];
   }
   return null;
  }

  

  }

}

分享到：
| VB.NET and C# 语法比较手册
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    datagrid 多表头及动态生成的实现

    本篇文章将详细介绍如何使用JQuery EasyUI插件中的datagrid组件实现多表头以及动态生成表格的功能。 #### 技术背景 - **JQuery EasyUI**：是一款基于jQuery的UI工具包，用于简化网页界面的开发。它提供了多种用户...

    基于siverlight实现动态生成DataGrid模板列源码例子

    在.NET框架中，Silverlight是一种强大的富互联网应用程序（RIA...通过阅读和运行这个示例，你不仅可以学习到如何操作DataGrid，还能掌握动态生成UI的技巧，这对于处理数据驱动且需要高度定制界面的项目来说非常有价值。

    MVVM实现WPF中DataGrid动态列与编辑器

    通过以上步骤，你就能在MVVM模式下实现一个功能完善的动态列和编辑功能的WPF DataGrid了。这种实现方式不仅保持了界面与逻辑的分离，也使得代码更加清晰和易于维护。在实际项目中，你还可以根据需求扩展功能，如排序...

    通过PHP实现DataGrid功能

    通过以上步骤，不仅可以在MySQL环境下轻松实现DataGrid功能，还可以扩展支持Oracle数据库，从而满足不同场景的需求。这种灵活性使得phpMyDataGrid成为一个值得推荐的选择，尤其是在需要快速构建具有复杂数据管理功能...

    wpf动态列datagrid

    在Windows Presentation Foundation (WPF) 中，`DataGrid` 是一个强大的控件，常用于显示和...通过理解和实践这些知识点，你将能够有效地在WPF应用程序中创建和管理具有动态列的`DataGrid`，以满足灵活的数据展示需求。

    FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc

    在Flex4中，动态生成DataGrid以及应用客户化itemRenderer是一项关键技能，它允许开发者根据运行时的数据结构灵活地创建用户界面。以下是对这个主题的详细解释： 首先，`DataGrid`组件是Flex中用于展示表格数据的...

    WPF动态添加行列DATAGRID

    本文将深入探讨如何在WPF中实现DataGrid的动态添加行列功能。 首先，我们需要理解DataGrid的基本用法。DataGrid可以通过绑定到一个数据源（如ObservableCollection或List）来自动生成列，而行则会根据数据源中的...

    flex动态生成datagrid表头

    在Flex开发中，数据网格（DataGrid）是一种常用的组件，用于显示...总的来说，通过学习Flex中的动态生成DataGrid表头和LineChart的简单操作，开发者可以更好地理解和应用Flex组件，实现更丰富的用户界面和数据可视化。

    动态datagrid xml动态datagrid xml动态datagrid xml动态datagrid xml

    动态DataGrid是编程领域中一个常见的话题，尤其是在Web开发中，它允许用户在运行时根据数据源自动生成列和行，极大地增强了用户界面的灵活性。本文将深入探讨动态DataGrid与XML之间的结合，以及如何利用XML数据源来...

    wpf通过datagrid操作数据库，实现datagrid增删改操作。

    在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中使用DataGrid控件来操作数据库，实现数据的添加、删除和修改功能。DataGrid是WPF中的一个强大控件，它允许用户以表格的形式展示和编辑...

    easyui datagrid 动态隐藏显示列

    jquery easyui 扩展 datagrid 自定义动态隐藏显示列

    DataGrid自动生成代码

    DataGrid自动生成代码 可以自动生成DataGrid不要控件

    DataGrid实现tooltip功能

    ### DataGrid实现tooltip功能 #### 一、简介 在Web开发中，为了提供更好的用户体验，开发者经常需要在用户界面中加入提示信息。其中，`tooltip`（工具提示）是一种非常实用的功能，它可以在用户鼠标悬停在某个元素...

    WPF之DataGrid动态生成列实例

    通过以上步骤，你可以实现一个动态生成列的DataGrid，从而提高了程序的灵活性和适应性。在实际应用中，可能还需要考虑排序、筛选、分页等功能的实现，以及优化性能和用户体验。在提供的DemoDynamicBinding示例中，你...

    实现DataGrid多层嵌套.doc

    总的来说，实现DataGrid多层嵌套需要理解数据结构的层次关系，利用服务器端代码动态生成和绑定DataGrid，以及为每个嵌套的DataGrid添加适当的事件处理程序。这种方法虽然不能通过Visual Studio的可视化工具直接生成...

    动态可编辑的DataGrid

    在IT行业中，动态可编辑的DataGrid是一种常见且强大的组件，尤其在开发用户界面时，用于展示和操作大量数据。Flex作为Adobe推出的一种开源富互联网应用程序（RIA）框架，提供了丰富的UI组件库，其中就包括了DataGrid...

    wpf datagrid 单元格颜色 根据datatable动态显示datagrid内容

    掌握这些技术，你就能在WPF应用程序中创建出既美观又功能丰富的数据展示界面，根据业务逻辑动态调整DataGrid的单元格颜色，提升用户体验。在实际项目中，可以根据具体需求进行扩展，例如添加更多的DataTriggers，...

    JS EasyUI DataGrid动态加载数据

    通过以上步骤，可以实现JS EasyUI DataGrid的动态加载数据功能。在test.html和test2.html示例文件中，你可以找到具体实现这些功能的代码实例，通过查看和学习，加深对动态加载数据的理解和运用。

    c# WPF DataGrid 底部汇总行合计

    在C# WPF环境中，DataGrid控件是一个非常强大的数据展示工具，它可以用来显示和编辑表格数据。在处理大量数据时，我们...通过合理的设计和编码，我们可以创建一个直观且高效的数据显示界面，满足用户对数据统计的需求。

Magicbox
Global site tag (gtag.js) - Google Analytics