zoukankan      html  css  js  c++  java
  • datagrid中巧用loadFilter对数据整形

        最近由于数据格式没有完全弄懂,在使用datagrid加载数据时各种报错真让人抓狂,今天得一高人指点,总算是解决了数据加载问题,略有心得,望与大家分享。

       先是js,这里只需关注loadfilter里的内容。loadfilter介绍:返回过滤数据显示。该函数带一个参数'data'用来指向源数据(即:获取的数据源,比如Json对象)。您可以改变源数据的标准数据格式。这个函数必须返回包含'total'和'rows'属性的标准数据对象。返回的数据格式必须为{todal:int 行数 ,rows:数据}。

     1 function GetUserList(Sqlwhere) {
     2     $("#userlist").datagrid({
     3          400,
     4         url: "../ajax/UserMAjax.ashx",
     5         method: 'post',
     6         queryParams: {
     7             cmd: "list",
     8             strSqlWhere: Sqlwhere,
     9         },
    10         loadFilter:function(data){
    11             return {total:data.data.length,rows:data.data};
    12         },
    13         columns: [[
    14             { field: "UserId", title: "userid" },
    15             { field: "UserName", title: "username" },
    16               { field: "Pwd", title: "password" },
    17         { field: "RegReason", title: "regreason" },
    18 { field: "QQ", title: "QQ" },
    19   { field: "HeadPic", title: "headpic" }
    20         ]],
                 });


    采用mvc3搭建的后台,由于主要测试datagrid数据加载,查询语句做了简化"select * from userinfo",查询出的内容为userinfo表中的所有内容,返回数据内容如下:{"data":[{"UserId":21,"UserName":"fffffff33dddds","Pwd":"ffff","RegReason":"fff","QQ":"33333","HeadPic":null,"RegDate":"/Date(1435595121443)/","PrimaryKey":"UserId","IsAutoID":true,"DataBaseName":1,"IsExternalConn":false,"connName":"","HasIdentityPK":true},{"UserId":20,"UserName":"fffffff33dddd","Pwd":"ffff","RegReason":"fff","QQ":"33333","HeadPic":null,"RegDate":"/Date(1435595018103)/","PrimaryKey":"UserId","IsAutoID":true,"DataBaseName":1,"IsExternalConn":false,"connName":"","HasIdentityPK":true}]}

    为便于显示只取两条数据,经过loadfilter后,数据变为

    {todal:2,rows:[{"UserId":21,"UserName":"fffffff33dddds","Pwd":"ffff","RegReason":"fff","QQ":"33333","HeadPic":null,"RegDate":"/Date(1435595121443)/","PrimaryKey":"UserId","IsAutoID":true,"DataBaseName":1,"IsExternalConn":false,"connName":"","HasIdentityPK":true},{"UserId":20,"UserName":"fffffff33dddd","Pwd":"ffff","RegReason":"fff","QQ":"33333","HeadPic":null,"RegDate":"/Date(1435595018103)/","PrimaryKey":"UserId","IsAutoID":true,"DataBaseName":1,"IsExternalConn":false,"connName":"","HasIdentityPK":true}]},之后就可以使用columns随意显示数据啦!

     1     public class UserMAjax : IHttpHandler
     2     {
     3         HttpContext context;
     4         JavaScriptSerializer jss = new JavaScriptSerializer();
     5         string json = "";
     6         public void ProcessRequest(HttpContext context)
     7         {
     8             this.context = context;
     9             context.Request.ContentEncoding = Encoding.GetEncoding("utf-8");
    10             string cmd = context.Request["cmd"].ToString();
    11             string strSqlwhere = context.Request["strSqlWhere"].ToString();
    12             List<UserInfo> UserList = UserInfoDal.C_UserInfo.GetList(strSqlwhere);
    13             Dictionary<string, List<UserInfo>> db = new Dictionary<string, List<UserInfo>>();
    14             db.Add("data", UserList);
    15             json = jss.Serialize(db);
    16            context.Response.Write(json);
  • 相关阅读:
    记下mongoose(转载)
    vue vue-cli中引入全局less变量的方式
    单标签不支持 伪元素
    删除tppabs,href="javascript:if(confirm)...",、/*tpa=http://...
    系统字体放大导致rem布局错乱,解决方案,已通过测试
    IE条件注释
    hbase部署经验与坑总结
    ubuntu安装mysql 5.7
    静态代理和动态代理
    单例模式
  • 原文地址:https://www.cnblogs.com/cilec/p/4649569.html
Copyright © 2011-2022 走看看