jquery -ajax-datagrid DataGrid序列化

最新推荐文章于 2023-02-08 10:59:52 发布

Hannah

最新推荐文章于 2023-02-08 10:59:52 发布

阅读量779

点赞数

分类专栏： js方法 js

本文链接：https://blog.csdn.net/nan2008zzu/article/details/40344105

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

js方法

6 篇文章 0 订阅

订阅专栏

项目中用到的datagrid的例子，记录下来方便以后查看。

页面

<head runat="server">
<script type="text/javascript">
function ShowSearchResult(jfid, devid,insid, start, end, alarmValue) {

            var width = document.body.clientWidth;
            $('#divTest').datagrid({
                url: 'AjaxJFHandler.ashx?stype=AalarmSearch&insid=' + insid,
                queryParams: { 'start': start, 'end': end, alarmValue: alarmValue, "jfid": jfid,"devid":devid }, //当请求远程数据时，发送的额外参数。
                loadMsg: '数据加载中请稍后……',
                fitColumns: true, //自适应列宽，不出现横向滚动条
                striped: true, //奇偶行不同背景
                //method: //请求远程数据的method类型，默认post
                // nowrap: true, //True 就会把数据显示在一行里,默认true
                //pagination://True 就会在 datagrid 的底部显示分页栏。 默认false
                singleSelect: true, //只能选中一行，默认false
                fitColumns: true,
                //    pagination: true, //显示分页栏
                columns: [[
                    { field: 'devname', title: "设备", align: 'center' },
                    { field: 'insname', title: '变量', align: 'center' },
                    { field: 'adatetime', title: '时间', align: 'center' },
                    { field: 'avalue', title: '值', align: 'center' },
                    { field: 'atype', title: '类型', align: 'center' }

                ]],
                onLoadSuccess: function (data) {
                    var panel = $(this).datagrid('getPanel');
                    var td = panel.find('div.datagrid-header-inner tr td');
                    td.each(function (i, item) {
                        switch (item.attributes.field.value) {
                            case "adatetime":
                                item.width = width / 4;
                                break;
                            case "avalue":
                                item.width = width / 8;
                                break;
                            case "atype":
                                item.width = width / 8;
                                break;
                            default:
                                break;
                        }
                    });
                }
            });
        }
</script>
</head>

<body>
</body>

注：1. 参数传递方式有2种：即放在URL的后面，或者通过queryParams 属性。前者在后台获取参数值时，可以通过《context.Request.QueryString["参数名"]》或者《context.Request.Params["参数名"]》两种方法取得，后者（通过queryParams传参），只能通过第2种方式取得。

2. onLoadSuccess方法，在返回结果时但数据还未在页面上显示时执行，用于对返回的结果进行操作。此处，设置表头单元格的宽度。

AjaxJFHandler.ashx 页

public class AjaxJFHandler : IHttpHandler
    {
        public string Stype;
         class ChartData
        {
            public string id;
            public string data;
        }
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/xml";// "text/plain";
            Stype = context.Request.QueryString["stype"];
            string jfid = context.Request.QueryString["jfid"];
            string code = context.Request.QueryString["code"];//站点代码

            string devid = context.Request.Params["devid"];
            string insid = context.Request.Params["insid"];//context.Request.QueryString["insid"];
            string start = context.Request.Params["start"];
            string end = context.Request.Params["end"];
            string jfName = HttpUtility.UrlDecode(context.Request["jfName"]);
            DataTable dt = new DataTable();
            switch (Stype)
            {               
                case "AalarmSearch"://报警查询
                    string alarmType=context.Request.Params["alarmValue"];
                    dt = GetAlarmDataHisList(jfid,devid,insid, start, end, alarmType);
                    context.Response.Write(SerializeDataGrid(dt));
                    break;             
                default:
                    break;
            }          
           
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
      
        private DataTable  GetAlarmDataHisList(string jfid,string devid,string insid,string start,string end,string atype)
        {
            JFData ddd = new JFData();
            DataTable dt = ddd.GetAlarmDataHisList(jfid,devid,insid, start, end,atype);
            //  string ss = Serialize(dt, false);
            //  return ss;
            return dt;
        }
       
           
        /// <summary>序列化方法  
        /// 不需要分页  
        /// </summary>  
        /// <param name="dt"></param>  
        /// <param name="flag">false</param>  
        /// <returns></returns> 
        private string Serialize(DataTable dt, bool flag)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
            foreach (DataRow dr in dt.Rows)
            {
                Dictionary<string, object> result = new Dictionary<string, object>();
                foreach (DataColumn dc in dt.Columns)
                {
                    result.Add(dc.ColumnName, dr[dc].ToString());
                }
                list.Add(result);
                
            }
            string jsonStr= serializer.Serialize(list);
            return jsonStr;
        }

        private string SerializeDataGrid(DataTable dt)//用JS的dataGrid拼table
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
            Dictionary<string, object> ww = new Dictionary<string, object>();
            ww.Add("total", dt.Rows.Count);
            foreach (DataRow dr in dt.Rows)
            {
                Dictionary<string, object> result = new Dictionary<string, object>();
                foreach (DataColumn dc in dt.Columns)
                {
                    result.Add(dc.ColumnName, dr[dc].ToString());
                }
                list.Add(result);
            }
            ww.Add("rows", list);
            string jsonStr = serializer.Serialize(ww);
            return jsonStr;
        }
    }

注：1. SerializeDataGrid 方法用于对datagrid类型的查询结果进行序列化。

2. Serialize 方法用于对一般的table查询结果进行序列化。