生成HTML表格的后台模板代码

有时候，我们需要在后台拼接生成前端的html表格，一般的做法就是各种string、StringBuilder的拼接（例子省略...），这样的话如果表头不同就没法做到代码的重用，增加代码的冗余，下面我分享我的做法，以达到各位大牛抛砖引玉的效果。

首先新建一个公共配置静态类CommonConfiguration：

 public static class CommonConfiguration{public static string Width { get { return "Width"; } }public static string HeaderName { get { return "HeaderName"; } }/// <summary>/// 定义表格单元/// </summary>public static string TableTdBody { get { return "<td>{0}</td>"; } }}

接着定义一个公共帮助类：

public class CommonHelper{private const string FormatString = "<table style=\"{0}\" class=\"{1}\">";private const string FormatTableHeader = "<th style=\"width:{0}px;\">{1}</th>"; // 定义表头字符串/// <summary>/// 生成前端table模板/// </summary>/// <typeparam name="T">表头实体</typeparam>/// <param name="style">样式</param>/// <param name="className">类名</param>/// <param name="bodyString">表身</param>/// <param name="tableHeader">表头实体数据</param>/// <returns>Table模板</returns>public static string HtmlResult<T>(string style, string className, string bodyString,List<T> tableHeader) where T : class{var builder = new StringBuilder();builder.AppendFormat(FormatString, style, className);builder.Append("<tr>");foreach (var item in tableHeader){builder.AppendFormat(FormatTableHeader, GetPropertyValue(item, CommonConfiguration.Width),GetPropertyValue(item, CommonConfiguration.HeaderName));}builder.Append("</tr>");builder.Append(bodyString);builder.Append("</table>");return builder.ToString();}/// <summary>/// 根据属性名取得值/// </summary>/// <param name="entity">泛型实体</param>/// <param name="propertyName">属性名</param>/// <returns>对应属性值</returns>public static string GetPropertyValue<T>(T entity, string propertyName) where T : class{var type = entity.GetType();var propertyInfo = type.GetProperty(propertyName);var value = (string)propertyInfo.GetValue(entity);return value;}}public class TableHeader{/// <summary>/// 表头宽度/// </summary>public string Width { get; set; }/// <summary>/// 表头名/// </summary>public string HeaderName { get; set; }}

类TableHeader可定义自己喜欢的位置，我定义在这里是为了方便，代码很清晰，相信很容易看懂。

最后新建一个控制器HomeController用于调用这些代码生成html表格：

public ActionResult Index(){string tableBody = CommonConfiguration.TableTdBody;StringBuilder sb = new StringBuilder();var tableList = new List<TableHeader>{new TableHeader { Width = "10", HeaderName = "Id" },new TableHeader { Width = "20", HeaderName = "CustomerGuid" },new TableHeader { Width = "30", HeaderName = "Username" },new TableHeader { Width = "40", HeaderName = "Email" },new TableHeader { Width = "50", HeaderName = "Password" },new TableHeader { Width = "60", HeaderName = "PasswordSalt" },new TableHeader { Width = "70", HeaderName = "Active" },new TableHeader { Width = "80", HeaderName = "Deleted" },new TableHeader { Width = "90", HeaderName = "LastIpAddress" },new TableHeader { Width = "100", HeaderName = "CreatedOn" },};var customers = _customerService.GetCustomers().ToArray();customers.ForEach(c =>{sb.AppendFormat("<tr class=\"{0}\">", c.Active ? "success" : "warning");sb.AppendFormat(tableBody, c.Id);sb.AppendFormat(tableBody, c.CustomerGuid);sb.AppendFormat(tableBody, c.Username);sb.AppendFormat(tableBody, c.Email);sb.AppendFormat(tableBody, c.Password);sb.AppendFormat(tableBody, c.PasswordSalt);sb.AppendFormat(tableBody, c.Active);sb.AppendFormat(tableBody, c.Deleted);sb.AppendFormat(tableBody, c.LastIpAddress);sb.AppendFormat(tableBody, c.CreatedOn.ToString("yyyy-MM-dd"));sb.Append("</tr>");});var htmlResult = CommonHelper.HtmlResult("border-color: solid 1px #008000", "table table-striped", sb.ToString(), tableList);ViewBag.Result = MvcHtmlString.Create(htmlResult);return View();}

视图页：

@{ViewBag.Title = "Index";
}<h2>Index</h2>
<div class="container">@ViewBag.Result
</div>

最后查看生成的html格式效果：

  <table style="border-color: solid 1px #008000" class="table table-striped"><tbody><tr><th style="width:10px;">Id</th><th style="width:20px;">CustomerGuid</th><th style="width:30px;">Username</th><th style="width:40px;">Email</th><th style="width:50px;">Password</th><th style="width:60px;">PasswordSalt</th><th style="width:70px;">Active</th><th style="width:80px;">Deleted</th><th style="width:90px;">LastIpAddress</th><th style="width:100px;">CreatedOn</th></tr><tr class="success"><td>1</td><td>bee62ba2-9d53-495f-80d4-af4fe6ddaa16</td><td>Allen</td><td>875755898@qq.com</td><td>0D59DB9C0211A16786F5EFD6B5809B6984B2AF96</td><td>TW0lAH4=</td><td>True</td><td>False</td><td>127.0.0.1</td><td>2016-06-18</td></tr></tbody></table>

这里我用了bootstrap作为表格的样式，你们可自定义class。

--鱼头鱼尾

--QQ：875755898

转载于:https://www.cnblogs.com/YUTOUYUWEI/p/5734790.html

生成HTML表格的后台模板代码相关推荐

java生成PDF（图片，模板，表格）
刚接到了一个需求,生成一个pdf,一开始以为挺简单的,通过模板生成嘛,我也发过相应的文章,根据模板直接生成pdf,响应到前端或者根据模板生成pdf,直接指定下载位置,这两种方案都可以,不过这篇文章主要 ...
apache poi 修改docx表格_word 模板内容的替换和生成word 表格（使用poi）
1. maven 相关依赖和模板 org.apache.poi poi-ooxml 3.15-beta2 org.apache.poi ooxml-schemas 1.1 2. 工具类中的方法 / ...
Net-snmp开发流程：MG-SOFT套件生成C语言snmp set/get代码
C语言Net-snmp开发流程:实现SNMP set/get RToax 2020年9月 >参考资料<深入理解net-snmp书籍>. >本文提供编写&编译MIB文件的 ...
[开源] FreeSql.AdminLTE.Tools 根据实体类生成后台管理代码
前言 FreeSql 发布至今已经有9个月,功能渐渐完善,自身的生态也逐步形成,早在几个月前写过一篇文章<ORM 开发环境之利器:MVC 中间件 FreeSql.AdminLTE>,您可以 ...
POI利用word模板动态生成word报表以及动态生成word表格
目录核心依赖动态表格测试类工具类动态数据测试类工具类核心依赖 <dependency><groupId>org.apache.poi</groupId&g ...
Java后台生成Excel表格
Java后台生成Excel表格功能简述需求目标实现 1.首先在项目中导入jxl相关jar包,并引入 2.编写代码 3.结果后记功能简述由于公司业务需求,我需要实现一个完全通过Java后台 ...
vue文件快速生成模板代码
vue文件快速生成模板代码输入 vue 按 tab 键
修改自动生成get/set方法模板代码
今天看到面对接口脏数据你还在V层if str==null else setText? 一文,觉着写得挺好,开发过程中多思考多动手,会带来意想不到的效果.底下评论大家也都说了各自的方法和见解,文中有一 ...
帝国cms后台模板编辑器辅助增强插件代码高亮格式化显示
先来看一下效果图使用方式: 此工具是安装在基于webkit内核的浏览器里面,可适用于谷歌,qq浏览器,360浏览器等. 激活方式: 使后台模板编辑器获得焦点,然后同时按住:Alt+win即可激活. ...

生成HTML表格的后台模板代码

生成HTML表格的后台模板代码相关推荐

最新文章

热门文章