C# web页面展示个性化表格

左手的ㄟ右手 2022-01-22 13:11 353阅读 0赞

有时候，我们需要在网页上按照一定格式做下类似Excl表格的单元格合并操作，用来展示表格，如下所示

<table style="width:340pt;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;width:120pt;"><span style="color:#000000;">类型</span></td> 
   <td colspan="2" style="text-align:center;vertical-align:middle;width:96pt;"><span style="color:#000000;">商品</span></td> 
   <td style="text-align:center;vertical-align:middle;width:124pt;"><span style="color:#000000;">说明</span></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">数量</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">金额</span></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">日用品</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">5</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">40</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">洗漱</span></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">体育用品</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">8</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">64</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">跳绳</span></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">文化用品</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">9</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">81</span></td> 
   <td style="text-align:center;vertical-align:middle;"><span style="color:#000000;">文件夹</span></td> 
  </tr> 
 </tbody> 
</table>

这时候，可以采用在网页注册使用Excel组件，在网页的相关位置，输入如下信息，

<OBJECT id="abc" classid="clsid:0002E551-0000-0000-C000-000000000046">

abc 为后期需要使用的对象名称，clsid:0002E551-0000-0000-C000-000000000046 为Excel 的组件注册码

挂载了组件后，就可以在前台页面 使用<Workbook> 标签定义相关的工作内容，再在<Workbook> 内定义<Worksheet>、<Table >,形成如下的对应机制

<Workbook>
        <Worksheet>
            <Table>
                <Column>
                <Row>
                  <Cell>
                  </Cell>
                </Row>
            </Table>
        </Worksheet>
    </Workbook>

同时，在后台加载的datatable中需要做相应的单元格处理，使用类似如下的信息配置相应的单元格（注意要使用RowSpan与ColumnSpan 做对应的表格单元格合并操作）

TableCell je = new TableCell();
                je.Text = "金额";
                je.ColumnSpan = 1;
                je.Style["Width"] = "150px";
                je.HorizontalAlign = HorizontalAlign.Center;
                je.VerticalAlign = VerticalAlign.Middle;

### 相关问题 ###

1，Microsoft Office Spreadsheet Component 不能加载XML 数据

在加载页面时出现如下错误：

![20190606145635497.png][]

该问题主要是由于在页面的table配置单元格时使用的ss:MergeDown或者ss:MergeAcross 时与后台的对应的RowSpan与ColumnSpan未做对应，需要说明的是ss:MergeDown=2 表示的是3行合并而非2行合并。

2，处于A2的单元格位于一合并区域内

![20190606152101782.png][]

该问题出现在有合并单元格时，第二行在单元格页面处理时未使用ss:Index 指定位置造成

[20190606145635497.png]: /images/20220122/0a56e1c164384598acab1ebb4d357b03.png
[20190606152101782.png]: /images/20220122/d0b8ef84652e44a29156c961cde22c9e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，353人围观）

还没有评论，来说两句吧...

相关阅读

相关用户数据视图编程指南：创建个性化数据展示

用户数据视图是一种描述个别用户数据展示的方式，它允许开发人员根据用户的偏好和需求，定制化地展示数据。本文将介绍如何通过编程来创建用户数据视图，以及提供相应的源代码示例。 1.

客官°小女子只卖身不卖艺/ 2024年02月27日 04:46/ 0 赞/ 29 阅读

相关 IDEA页面展示

【1】项目下内容： ➢工程下的src类似于Eclipse下的src目录，用于存放代码。。 ➢工程下的.idea 和TestProject.iml文件都是IDEA工程特有的。

冷不防/ 2023年09月27日 15:37/ 0 赞/ 140 阅读

相关 Web 界面展示

Web界面一、概况模块整体趋势页面二、用户分析模块新增用户页面活跃用户页面启动次数页面

- 日理万妓/ 2022年11月24日 14:08/ 0 赞/ 156 阅读

相关 Spring Boot Web编写的个性化ErrorPage页面

SpringBoot内置了一套错误页面：白板错误页面(Default Whitelabel Error Page)，如下图： ![Center][] 但是是实际

旧城等待，/ 2022年06月09日 13:15/ 0 赞/ 303 阅读

相关 SpringBoot页面展示Thymeleaf

开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言 Thymelea

港控/mmm°/ 2022年02月21日 12:21/ 0 赞/ 239 阅读

相关 chrome扩展-打造个性化的web页面

今天介绍一下如何开发一款简单的chrome插件 1. 什么是chrome插件 chrome插件也叫chrome扩展。其实chrome插件就是一个以chrome浏览器为宿

叁歲伎倆/ 2022年02月20日 10:45/ 0 赞/ 371 阅读

相关 C# web页面展示个性化表格

有时候，我们需要在网页上按照一定格式做下类似Excl表格的单元格合并操作，用来展示表格，如下所示 <table style="width:340pt;"> <tbody>

左手的ㄟ右手/ 2022年01月22日 13:11/ 0 赞/ 354 阅读

相关 js实现表格动态数据展示在其他页面上

1.需求：这个表格可以动态的添加，添加完毕后可以在另一个页面显示指定数据 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

川长思鸟来/ 2021年09月30日 05:40/ 0 赞/ 235 阅读

相关【C#】个性化设置

1.修VS2019怎么修改颜色主题 a. ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

妖狐艹你老母/ 2021年09月21日 01:04/ 0 赞/ 292 阅读

相关 HTML表格：日常消费账单表格展示网页

HTML表格：日常消费账单表格展示网页任务描述相关知识最基本的表格带边框的表格带表头的表格 s

曾经终败给现在/ 2021年05月16日 20:37/ 0 赞/ 959 阅读