Asp.Net中使用JQ插件Flexigrid填坑之路
【摘要】 在空闲的时间学习了jQuery的插件Flexigrid的用法，它是采用将后台返回的数据集转换成JSON格式字符串在Flexigrid中显示，结果遇到了一个百思不解的问题，Flexigrid在页面上只显示表头就是不显示数据，也没有其它的任何错误，json 格式的字符串也检查了N多遍，完全正确。折腾了两天都没找到错误，实在是没办法解决了，就换了个 jQuery 的 1.3.2 版本，结果出人意...
在空闲的时间学习了jQuery的插件Flexigrid的用法，它是采用将后台返回的数据集转换成JSON格式字符串在Flexigrid中显示，结果遇到了一个百思不解的问题，Flexigrid在页面上只显示表头就是不显示数据，也没有其它的任何错误，json 格式的字符串也检查了N多遍，完全正确。折腾了两天都没找到错误，实在是没办法解决了，就换了个 jQuery 的 1.3.2 版本，结果出人意料的是数据正常显示了，总算是搞定了数据显示。
问题解决完成后，尝试了其它的几个版本，发现只有 1.3.2 的低版本是可以完全正常显示。
jQuery下载：http://jqueryjs.googlecode.com/files/jquery-1.3.2.js
Flexigrid下载：http://www.flexigrid.info/
下面给出部分学习代码：
创建 flexgrid.aspx 页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="flexgrid.aspx.cs" Inherits="flexgrid" %>
<!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>grid数据显示</title>
<link rel="stylesheet" type="text/css" href="flexigrid/css/flexigrid/flexigrid.css" />
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="flexigrid/flexigrid.js"></script>
</head>
<script type="text/javascript">
$("document").ready(function() {
$("#flex1").flexigrid
(
{
url: 'datastring/GridJson.ashx',
dataType: 'json',
method: 'POST',
colModel: [
{ display: '编号', name: 'iso', width: 40, sortable: true, align: 'center' },
{ display: '功能名称', name: 'name', width: 120, sortable: true, align: 'left' },
{ display: '级别', name: 'printable_name', width: 40, sortable: true, align: 'left' },
{ display: '链接', name: 'iso3', width: 150, sortable: true, align: 'left', hide: false },
{ display: '说明', name: 'numcode', width: 200, sortable: true, align: 'left' },
{ display: '操作', name: 'operator', width: 50, sortable: true, align: 'center' }
],
buttons: [
{ name: '添加', bclass: 'add', onpress: 'button' },
{ name: '删除', bclass: 'delete', onpress: 'button' },
{ name: '修改', bclass: 'modify', onpress: 'button' },
{ separator: true }
],
searchitems: [
{ display: '编号', name: 'id' },
{ display: '功能名称', name: 'fun_name', isdefault: true }
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: '功能列表',
useRp: true,
rp: 10,
rpOptions: [10, 15, 20, 25, 40, 60], //可选择设定的每页结果数
pagestat: '显示 {from} 到 {to} 页 总共 {total} 条记录',//显示当前页和总页面的样式
procmsg: '请等待,数据正在加载中 …', //正在处理的提示信息
resizable: false, //是否可伸缩
showTableToggleBtn: true,
width: 700,
onSubmit: addFormData,
height: 200
})
});
function addFormData() {
var dt = $('#sform').serializeArray();
$("#flex1").flexOptions({ params: dt });
return true;
}
$('#sform').submit
(
function() {
$('#flex1').flexOptions({ newp: 1 }).flexReload();
return false;
}
);
</script>
<body>
<form id="sform" runat="server">
<div>
<table id="flex1" style="display:none"></table>
</div>
</form>
</body>
</html>创建 GridJson.ashx 页面
<%@ WebHandler Language="C#" Class="GridJson" %>
using System;
using System.Web;
using System.Web.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GridJson : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.Clear();
context.Response.ContentType = "text/HTML"; //text/plain image/GIF image/JPEG application/x-cdf
//得到当前页
string CurrentPage = context.Request["page"];
//得到每页显示多少
string PageShowLimit = context.Request["rp"];
//得到主键
string TableID = context.Request["sortname"];
//得到排序方法
string OrderMethod = context.Request["sortorder"];
//得到要过滤的字段
string FilterField = context.Request["qtype"];
//得到要过滤的内容
string FilterFieldContext;
if (context.Request.Form["letter_pressed"] == null)
{
FilterFieldContext = "";
}
else
{
FilterFieldContext = context.Request["letter_pressed"];
}
context.Response.Write(GetGrid());
context.Response.Flush();
context.Response.Close();
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
public String GetGrid()
{
string gridjson = "";
//获取表格控件返回参数
Int32 nPages = 1;//当前页数
Int32 nPageSize = 10;//每页记录数
string sqlstr = "select id,fun_name,fun_level,fun_url,fun_info from function";
System.Data.DataSet ds = AccessDB.Dataset(sqlstr);
gridjson = FlexGridJSONData.DtToJSON(ds.Tables[0], nPages.ToString(), ds.Tables[0].Rows.Count.ToString());
return gridjson;
}
}创建 FlexGridJSONData.cs 类
public static string DtToJSON(DataTable dt, string page, string total)
{
StringBuilder jsonString = new StringBuilder();
jsonString.AppendLine("{");
jsonString.AppendFormat("page: {0},\n", page);
jsonString.AppendFormat("total: {0},\n", total);
jsonString.AppendLine("rows: [");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonString.Append("{");
jsonString.AppendFormat("id:'{0}',cell:[", dt.Rows[i][0].ToString());
for (int j = 0; j < dt.Columns.Count; j++)
{
if (j == dt.Columns.Count - 1)
{
jsonString.AppendFormat("'{0}'", dt.Rows[i][j].ToString());
}
else
{
jsonString.AppendFormat("'{0}',", dt.Rows[i][j].ToString());
}
if (j == dt.Columns.Count - 1)
{
jsonString.AppendFormat(",'{0}'", "<input type=\"button\" value=\"查看\" id=\"sss\" onclick=\"sss(" + dt.Rows[i][0].ToString() + ")\" />");
}
}
jsonString.Append("]");
if (i == dt.Rows.Count - 1)
{
jsonString.AppendLine("}");
}
else
{
jsonString.AppendLine("},");
}
}
jsonString.Append("]");
jsonString.AppendLine("}");
return jsonString.ToString();
}后面需要仔细研究一下插件Flexigrid的代码，不能因为jQuery的版本问题，而出现这样没有错误的问题。
如果有大佬已经知道具体错误的原因可以指点一下，大家共同交流，共同探讨，共同进步~~~
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）