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

左手的ㄟ右手 2022-01-22 13:11 422阅读 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 条评论，422人围观）

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

相关阅读

相关 IDEA页面展示

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

た入场券/ 2023年09月30日 20:07/ 0 赞/ 35 阅读

相关 IDEA页面展示

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

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

相关 python ppt表格样式展示

本篇文章是对另一篇文章的补充，好多情况下会遇到样式的改变。在这里出现情况较多的时候可以封装为函数，方便调用，复写。 \ -\- coding: utf-8 -\- fr

àì夳堔傛蜴生んèń/ 2023年06月13日 09:44/ 0 赞/ 1 阅读

相关 Web 界面展示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关【C#】个性化设置

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

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

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

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

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