Asp.Net中使用JQ插件Flexigrid填坑之路

举报
zekelove 发表于 2021/09/10 09:24:23 2021/09/10
【摘要】 在空闲的时间学习了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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200