flexigrid在asp.net中的应用

原文地址:http://salaman.blog.51cto.com/1351943/397898


FlexigridPage.aspx

 

  
  
  
  
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FlexigridPage.aspx.cs" Inherits="webControlDemo.demo.FlexigridPage" %> 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml"> 
  6. <head runat="server"> 
  7.     <title>FlexigridDemo</title> 
  8.     <script type="text/javascript" src="../control/jquery.js"></script> 
  9.     <script type="text/javascript" src="../control/jquery/flexigrid.js"></script> 
  10.     <script type="text/javascript" src="../control/jquery.json.js"></script> 
  11.     <link type="text/css" rel="Stylesheet" href="../control/jquery/flexigrid.css" /> 
  12.     <style  type="text/css"> 
  13.         body 
  14.         { 
  15.         font-family: Arial, Helvetica, sans-serif; 
  16.         font-size: 12px; 
  17.         } 
  18.         
  19.    
  20.     </style> 
  21.     <script type="text/javascript"> 
  22.         $(function () { 
  23.             $("#flex1").flexigrid 
  24.             ( 
  25.             { 
  26.                 url:"griddata.ashx?r="+Math.random(), 
  27.                 dataType: 'json',               
  28.                 colModel: [ 
  29.                 { display: '信息编号', name: 'RINO', width: 100, sortable: false, align: 'center' }, 
  30.                 { display: '信息标题', name: 'RITITLE', width: 250, sortable: true, align: 'center' }, 
  31.                 { display: '信息类别', name: 'ICNAME', width: 100, sortable: true, align: 'center' }, 
  32.                 { display: '信息热点', name: 'RIHOTPOINT', width: 100, sortable: true, align: 'center' }, 
  33.                 { display: '发布作者', name: 'RIAUTHOR', width: 100, sortable: true, align: 'center' } 
  34.                 ], 
  35.                 width: 800, 
  36.                 height: 600, 
  37.                 title: '信息发布管理'                    
  38.                  
  39.             } 
  40.             ); 
  41.         }); 
  42.     </script> 
  43. </head> 
  44. <body> 
  45.     <div> 
  46.         <table id="flex1" style="display:none"></table>     
  47.     </div> 
  48. </body> 
  49. </html> 

griddata.ashx

 

  
  
  
  
  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Linq; 
  4. using System.Web; 
  5.  
  6. using System.Text; 
  7.  
  8. namespace webControlDemo.demo 
  9.     /// <summary> 
  10.     /// Summary description for griddata 
  11.     /// </summary> 
  12.     public class griddata : IHttpHandler 
  13.     { 
  14.  
  15.         public void ProcessRequest(HttpContext context) 
  16.         {      
  17.  
  18.             HttpResponse Response = context.Response; 
  19.             Response.Clear(); 
  20.             Response.ClearContent(); 
  21.             Response.ContentType = "text/plain"
  22.             Response.Charset = "utf-8"
  23.  
  24.             StringBuilder json = new StringBuilder(); 
  25.             json.Append("{\n");           
  26.             json.Append("\"rows\":["); 
  27.  
  28.             for (int i = 0; i < 15; i++) 
  29.             { 
  30.                 if (i != 0) 
  31.                     json.Append(","); 
  32.  
  33.                 json.Append("\n{"); 
  34.                 json.Append( String.Format("\"id\":\"{0}\",",i)); 
  35.                 json.Append(String.Format("\"cell\":[\"{0}\",\"核桃\",\"坚果\",\"否\",\"admin\"]",i)); 
  36.                 json.Append("}\n"); 
  37.             } 
  38.  
  39.  
  40.             json.Append("]"); 
  41.             json.Append("}"); 
  42.  
  43.             Response.Write(json.ToString()); 
  44.             Response.End(); 
  45.         } 
  46.  
  47.         public bool IsReusable 
  48.         { 
  49.             get 
  50.             { 
  51.                 return false; 
  52.             } 
  53.         } 
  54.     } 

结果:

 

 

flexigrid在asp.net中的应用_第1张图片

注:JSON格式一定要写对。

调试帮助:

flexigrid.js第594行:

 error: function (XMLHttpRequest, textStatus, errorThrown) {  try { if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown); } catch (e) { } }

改为:

 error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown);

try { if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown); } catch (e) { } }

可以查看错误的响应信息

本文出自 “认真、快乐” 博客,请务必保留此出处http://salaman.blog.51cto.com/1351943/397898


你可能感兴趣的:(json,function,Flex,url,asp.net,XMLhttpREquest)