原文來自：http://kb.cnblogs.com/page/74416/
前臺：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
$(function () {
$("#button1").click(function () {
var url = "Default.aspx?ajax=1";
var dtb = generateDtb();
//序列化對象
var postdata = JSON.stringify(dtb);
//異步請求
$.post(url, { json: postdata }, function (json) {
createTable(json);
}, "json")
});
});
//刪除選中行
$(function () {
$("#button2").click(function () {
if ($(":checked").length == 0) alert("請選擇行");
$(":checked").parent().parent().remove();
});
});
//生成DataTable對象
function generateDtb() {
var dtb = new Array();
for (var i = 0; i < 10; i++) {
var row = new Object();
row.col1 = i;
row.col2 = i % 2 == 0 ? true : false;
row.col3 = i + "hello";
dtb.push(row);
}
return dtb;
}
//顯示json中的數據
function createTable(json) {
var table = $("<table border='1'><tr><td>選擇</td><td>td1</td><td>td2</td><td>td3</td></tr></table>");
for (var i = 0; i < json.length; i++) {
o1 = json[i];
var row = $("<tr></tr>");
$("<td><input id='Checkbox"+i+"' type='checkbox' /></td>").appendTo(row);
for (key in o1) {
var td = $("<td></td>");
td.text(o1[key].toString());
td.appendTo(row);
}
row.appendTo(table);
}
table.appendTo($("#back"));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="button1" type="button" value="生成表格" />
<input id="button2" type="button" value="刪除選中行" />
<div id="back">
</div>
</div>
</form>
</body>
</html>
後臺：
using System;
using System.Collections.Generic;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
/*
*
*
* 查詢數據庫,生成Table
* 可以刪除選中行
*
*
*/
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["ajax"] == "1")
{
ProcessRequest();
}
}
private void ProcessRequest()
{
Response.ContentType = "text/html";
string json = Request.Form["json"];
//反序列化datatable
DataTable newdtb = Json2DataTable(json);
//序列化datatable爲json
string back = DataTable2Json(newdtb);
Response.Write(back);
Response.End();
}
/// <summary>
/// 將DataTable轉化成json格式
/// </summary>
/// <param name="dtb"></param>
/// <returns></returns>
private string DataTable2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize(dic);
}
/// <summary>
/// 將Json數據轉化成DataTable
/// </summary>
/// <param name="json"></param>
/// <returns></returns>
private DataTable Json2DataTable(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList list = jss.Deserialize<ArrayList>(json);
DataTable dtb = new DataTable();
if (list.Count > 0)
{
foreach (Dictionary<string, object> dic in list)
{
if (dtb.Columns.Count == 0)
{
foreach (string key in dic.Keys)
{
dtb.Columns.Add(key, dic[key].GetType());
}
}
DataRow row = dtb.NewRow();
foreach (string key in dic.Keys)
{
row[key] = dic[key];
}
dtb.Rows.Add(row);
}
}
return dtb;
}
}