新增createTable 函数以及示例；

Author: YanZhiwei

YanZhiwei.JavaScript.Utilities/YanZhiwei.JavaScript.Utilities.csproj

@@ -531,6 +531,7 @@
     <Content Include="jquery\datatables\1.10.2\plugins\bootstrap\dataTables.bootstrap.css" />
     <Content Include="jquery\datatables\1.10.2\plugins\bootstrap\dataTables.bootstrap.js" />
     <Content Include="jquery\zTree\3.5\zTree_example1.aspx" />
+    <Content Include="jqUtilsDemo.aspx" />
     <Content Include="JsDemo.aspx" />
     <Content Include="JsDemo2.aspx" />
     <Content Include="jsUtilsTest.html" />
@@ -728,6 +729,7 @@
     <Content Include="bs\v3\css\bootstrap-rtl.css.map" />
     <Content Include="bs\v3\css\bootstrap.css.map" />
     <Content Include="BackHandler\BaseHandler.ashx" />
+    <Content Include="data.json" />
     <None Include="jquery\jquery-1.9.1.intellisense.js" />
     <Content Include="jquery\jquery-1.9.1.js" />
     <Content Include="jquery\jquery-1.9.1.min.js" />
@@ -1312,6 +1314,13 @@
     <Compile Include="jquery\zTree\3.5\zTree_example1.aspx.designer.cs">
       <DependentUpon>zTree_example1.aspx</DependentUpon>
     </Compile>
+    <Compile Include="jqUtilsDemo.aspx.cs">
+      <DependentUpon>jqUtilsDemo.aspx</DependentUpon>
+      <SubType>ASPXCodeBehind</SubType>
+    </Compile>
+    <Compile Include="jqUtilsDemo.aspx.designer.cs">
+      <DependentUpon>jqUtilsDemo.aspx</DependentUpon>
+    </Compile>
     <Compile Include="JsDemo.aspx.cs">
       <DependentUpon>JsDemo.aspx</DependentUpon>
       <SubType>ASPXCodeBehind</SubType>

YanZhiwei.JavaScript.Utilities/data.json

@@ -0,0 +1,72 @@
+[
+  {
+    "Model": "Iphone 18",
+    "Name": "iOS",
+    "Share": 57.56,
+    "Price Range": "$800 - $1000",
+    "Brand": "Apple"
+  },
+  {
+    "Model": "Nexus 23",
+    "Name": "Android",
+    "Share": 24.66,
+    "Price Range": "$600 - $800",
+    "Brand": "Samsung"
+  },
+  {
+    "Model": "Tom-tom",
+    "Name": "Java ME",
+    "Share": 10.72,
+    "Price Range": "$200 - $900",
+    "Brand": "X Brand"
+  },
+  {
+    "Model": "Nokia 66610",
+    "Name": "Symbian",
+    "Share": 2.49,
+    "Price Range": "$100 - $500",
+    "Brand": "Nokia"
+  },
+  {
+    "Model": "Blackberry",
+    "Name": "Blackberry",
+    "Share": 2.26,
+    "Price Range": "$100 - $1000",
+    "Brand": "Blackberry"
+  },
+  {
+    "Model": "Lumia",
+    "Name": "Windows Phone",
+    "Share": 1.33,
+    "Price Range": "$200 - $600",
+    "Brand": "Nokia"
+  },
+  {
+    "Model": "iPhone 6",
+    "Name": "Java ME",
+    "Share": 10.72,
+    "Price Range": "$200 - $900",
+    "Brand": "X Brand"
+  },
+  {
+    "Model": "Nokia 66610",
+    "Name": "Symbian",
+    "Share": 2.49,
+    "Price Range": "$100 - $500",
+    "Brand": "Nokia"
+  },
+  {
+    "Model": "Micromax",
+    "Name": "Blackberry",
+    "Share": 2.26,
+    "Price Range": "$100 - $1000",
+    "Brand": "Blackberry"
+  },
+  {
+    "Model": "Lumia ",
+    "Name": "Windows Phone",
+    "Share": 1.33,
+    "Price Range": "$200 - $600",
+    "Brand": "Nokia"
+  }
+]

YanZhiwei.JavaScript.Utilities/jqUtils.js

@@ -120,6 +120,44 @@
             if (_tableObj.length > 0) {
                 _tableObj[rowIndex][cellIndex].html(cellValue);
             }
+        },
+        createHeaderRow: function (id, json) {
+            /// <summary>
+            /// 创建Table Header
+            /// </summary>
+            /// <param name="id">table id</param>
+            /// <param name="json">json数据</param>
+            /// <returns type="">Table Header Header</returns>
+            var columnSet = [];
+            var headerTr$ = $('<tr/>');
+            for (var i = 0; i < json.length; i++) {
+                var rowHash = json[i];
+                for (var key in rowHash) {
+                    if ($.inArray(key, columnSet) == -1) {
+                        columnSet.push(key);
+                        headerTr$.append($('<th/>').html(key));
+                    }
+                }
+            }
+            $("#" + id).append(headerTr$);
+            return columnSet;
+        },
+        createTable: function (id, json) {
+            /// <summary>
+            /// 创建Table
+            /// </summary>
+            /// <param name="id">table id</param>
+            /// <param name="json">json数据</param>
+            var columns = this.createHeaderRow(id, json);
+            for (var i = 0; i < json.length; i++) {
+                var row$ = $('<tr/>');
+                for (var colIndex = 0; colIndex < columns.length; colIndex++) {
+                    var cellValue = json[i][columns[colIndex]];
+                    if (cellValue == null) { cellValue = ""; }
+                    row$.append($('<td/>').html(cellValue));
+                }
+                $("#" + id).append(row$);
+            }
         }
     }
     jqUtils.Ajax = {

YanZhiwei.JavaScript.Utilities/jqUtilsDemo.aspx

@@ -0,0 +1,27 @@
+<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqUtilsDemo.aspx.cs" Inherits="YanZhiwei.JavaScript.Utilities.jqUtilsDemo" %>
+
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head runat="server">
+    <title>jqUtils Demo</title>
+    <script src="jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
+    <script src="jqUtils.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        $(document).ready(function () {
+
+            $.getJSON("data.json", function (data) {
+                jqUtils.UITable.createTable('jsonTable', data);
+            });
+        });
+    </script>
+</head>
+<body>
+    <form id="form1" runat="server">
+        <div style="margin: 20px auto; width: 500px;">
+            <table id="jsonTable" style="border-collapse: collapse;" border="1" cellpadding="5">
+            </table>
+        </div>
+    </form>
+</body>
+</html>

YanZhiwei.JavaScript.Utilities/jqUtilsDemo.aspx.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.UI;
+using System.Web.UI.WebControls;
+
+namespace YanZhiwei.JavaScript.Utilities
+{
+    public partial class jqUtilsDemo : System.Web.UI.Page
+    {
+        protected void Page_Load(object sender, EventArgs e)
+        {
+
+        }
+    }
+}