对于习惯使用GridView的人来说,前台页面需要动态添加表格的行数,是一件痛苦的事。GridView处理这种事情相当麻烦,你点击“新增一行”,需要回传到服务器。服务器再把GridView反构造成DataTable, 再给DataTable增加一行之后,绑定到GridView,然后发回客户端...
能不能简单一点呢?
在使用Ajax数据请求数据,通常都是简单格式,比如String,信息量较少。当然也可以请求回XML,但是XML数据冗余多,取到客户端处理比json麻烦的多。
能不能简单一点呢?
上面这些问题,如果DataTable与JSON类型可以方便的相互转换,都可以迎刃而解了。
优点:1)避免不必要的回传;
2)精简异步请求数据的大小 ;
3)解决数据量较大时,数据发送与接收繁琐的问题。
既然好处这么多,我们上代码吧。
前台代码:
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
< head runat ="server" >
< title ></ title >
< script type ="text/javascript" src ="js/jquery-1.4.2.min.js" ></ script >
< script type ="text/javascript" src ="js/json2.js" ></ script >
< script type ="text/javascript" >
// onload
$( function () {
// 点击botton1
$( " #botton1 " ).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 " )
});
});
// 生成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 + " he\nll\ " ow " ;
dtb.push(row);
}
return dtb;
}
//显示Json中的数据
function createTable(json) {
var table = $( " < table border = ' 1 ' >< / table>");
for ( var i = 0 ; i < json.length; i ++ ) {
o1 = json[i];
var row = $( " <tr></tr> " );
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 ="botton1" type ="button" value ="button" />
< div id ="back" >
</ div >
</ div >
</ form >
</ body >
</ html >
< head runat ="server" >
< title ></ title >
< script type ="text/javascript" src ="js/jquery-1.4.2.min.js" ></ script >
< script type ="text/javascript" src ="js/json2.js" ></ script >
< script type ="text/javascript" >
// onload
$( function () {
// 点击botton1
$( " #botton1 " ).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 " )
});
});
// 生成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 + " he\nll\ " ow " ;
dtb.push(row);
}
return dtb;
}
//显示Json中的数据
function createTable(json) {
var table = $( " < table border = ' 1 ' >< / table>");
for ( var i = 0 ; i < json.length; i ++ ) {
o1 = json[i];
var row = $( " <tr></tr> " );
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 ="botton1" type ="button" value ="button" />
< div id ="back" >
</ div >
</ div >
</ form >
</ body >
</ html >
后台代码:
/// <summary>
///
页面加载时
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load( object sender, EventArgs e)
{
// 判断是否异步请求
if (Request.QueryString[ " ajax " ] == " 1 " )
{
ProcessRequest();
}
}
/// <summary>
/// 处理异步请求
/// </summary>
private void ProcessRequest()
{
Response.ContentType = " text/html " ;
string json = Request.Form[ " json " ];
// 反序列化DataTable
DataTable newdtb = Json2Dtb(json);
// 序列化DataTable为JSON
string back = Dtb2Json(newdtb);
Response.Write(back);
Response.End();
}
/// <summary>
/// DataTable转Json
/// </summary>
/// <param name="dtb"></param>
/// <returns></returns>
private string Dtb2Json(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 Json2Dtb( string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize < ArrayList > (json);
DataTable dtb = new DataTable();
if (dic.Count > 0 )
{
foreach (Dictionary < string , object > drow in dic)
{
if (dtb.Columns.Count == 0 )
{
foreach ( string key in drow.Keys)
{
dtb.Columns.Add(key, drow[key].GetType());
}
}
DataRow row = dtb.NewRow();
foreach ( string key in drow.Keys)
{
row[key] = drow[key];
}
dtb.Rows.Add(row);
}
}
return dtb;
}
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load( object sender, EventArgs e)
{
// 判断是否异步请求
if (Request.QueryString[ " ajax " ] == " 1 " )
{
ProcessRequest();
}
}
/// <summary>
/// 处理异步请求
/// </summary>
private void ProcessRequest()
{
Response.ContentType = " text/html " ;
string json = Request.Form[ " json " ];
// 反序列化DataTable
DataTable newdtb = Json2Dtb(json);
// 序列化DataTable为JSON
string back = Dtb2Json(newdtb);
Response.Write(back);
Response.End();
}
/// <summary>
/// DataTable转Json
/// </summary>
/// <param name="dtb"></param>
/// <returns></returns>
private string Dtb2Json(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 Json2Dtb( string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize < ArrayList > (json);
DataTable dtb = new DataTable();
if (dic.Count > 0 )
{
foreach (Dictionary < string , object > drow in dic)
{
if (dtb.Columns.Count == 0 )
{
foreach ( string key in drow.Keys)
{
dtb.Columns.Add(key, drow[key].GetType());
}
}
DataRow row = dtb.NewRow();
foreach ( string key in drow.Keys)
{
row[key] = drow[key];
}
dtb.Rows.Add(row);
}
}
return dtb;
}
再附一个下载文件,觉得有用的可以下载看看