用户投稿先上结果图片跟测试连结: 线上测试连结
第一版(JsonNet and DataTable):
目前要写一个内部使用的报表系统，维护人员只要写SQL从DB捞取资料
或是在其他程式逻辑中组成的集合
系统就会自动把集合物件转成table html的字串
所以写了一个简单的table generator
code不长但需要用到JsonNet跟DataTable
原理:
先藉由JsonCovert序列化集合物件再反序列化成DataTable物件藉由DataTabl的Columns跟Rows来组合出table的表头表身做成扩充方法，方便使用假如已经是DataTable物件会直接呼叫ConvertDataTableToHTML方法就可以(省去JSON转换过程)Code:
public static string ToHtmlTable(this HashSet<dynamic> obj){return ToHtmlTableConverter(obj);}public static string ToHtmlTable(this ICollection obj) {return ToHtmlTableConverter(obj);}public static string ToHtmlTable(this System.Data.DataTable obj){return ConvertDataTableToHTML(obj);}private static string ToHtmlTableConverter( object obj ) {var jsonStr = JsonConvert.SerializeObject(obj);var data = JsonConvert.DeserializeObject<System.Data.DataTable>(jsonStr);var html = ConvertDataTableToHTML(data);return html;}private static string ConvertDataTableToHTML(System.Data.DataTable dt){var html = new StringBuilder("<table>");//表头html.Append("<thead><tr>");for (int i = 0; i < dt.Columns.Count; i++)html.Append("<th>" + dt.Columns[i].ColumnName + "</th>");html.Append("</tr></thead>");//表身html.Append("<tbody>");for (int i = 0; i < dt.Rows.Count; i++){html.Append("<tr>");for (int j = 0; j < dt.Columns.Count; j++)html.Append("<td>" + dt.Rows[i][j].ToString() + "</td>");html.Append( "</tr>");}html.Append("</tbody>");html.Append("</table>");return html.ToString();}经过以下实测，支援Array、HashSet、List、不支援Enumerable
var colls1 = collections.ToArray().ToHtmlTable(); //Run Successvar colls2 = collections.ToHashSet().ToHtmlTable();//Run Succesvar colls_list = collections.ToList().ToHtmlTable();//Run Succesvar colls3 = collections.AsEnumerable().ToHtmlTable();//Error doesn't contain defined 补充:
因为包含html标籤
所以在cshtml要使用@Html.Raw(生成字串)来填写(注意安全性喔!)
第二版(JS版本):
直接转JSON让前端用JS去转成Table
效能可以让使用者来吃下，节省Server负担
结果图片跟测试连结: 线上测试连结
View改成:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>var myList = @Html.Raw(ViewBag.Table);// Builds the HTML Table out of myList.function buildHtmlTable(selector) { var columns = addAllColumnHeaders(myList, selector); for (var i = 0; i < myList.length; i++) { var row$ = $('<tr/>'); for (var colIndex = 0; colIndex < columns.length; colIndex++) { var cellValue = myList[i][columns[colIndex]]; if (cellValue == null) cellValue = ""; row$.append($('<td/>').html(cellValue)); } $(selector).append(row$); }}// Adds a header row to the table and returns the set of columns.// Need to do union of keys from all records as some records may not contain// all records.function addAllColumnHeaders(myList, selector) { var columnSet = []; var headerTr$ = $('<tr/>'); for (var i = 0; i < myList.length; i++) { var rowHash = myList[i]; for (var key in rowHash) { if ($.inArray(key, columnSet) == -1) { columnSet.push(key); headerTr$.append($('<th/>').html(key)); } } } $(selector).append(headerTr$); return columnSet;}</script><body onLoad="buildHtmlTable('#DataTable')"> <table id="DataTable" border="1"> </table></body>以上JS CODE是Manish Mulani大大的:
javascript - Convert json data to a html table - Stack Overflow
以上是粗糙的版本
假如大大们有更好的做法都可以讨论、纠正.
微信扫一扫打赏
支付宝扫一扫打赏
