ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询

js前台对datagrid的定义代码,如下

                mygrid = $(‘#mytable‘).datagrid({
                    fit: true, //自动大小
                    height: ‘auto‘,
                    rownumbers: true, //行号
                    fitColumns: true,
                    collapsible: true, //是否可折叠的
                    loadMsg: ‘数据装载中......‘,
                    singleSelect: true, //单行选取
                    pagination: true //显示分页
//                    columns: [[]]

                });
                //设置分页控件
                $("#mytable").datagrid(‘getPager‘).pagination({
                    beforePageText: "第",
                    afterPageText: "页",
                    displayMsg: "当前 {from} - {to}条数据   共{total} 条数据",
                    pageSize: 100,
                    pageList: [20, 30, 40, 50, 60, 70, 80, 90, 100],
                    onBeforeRefresh: function () {
                    },
                    onRefresh: function (pageNumber, pageSize) {
                    },
                    onChangePageSize: function () {
                    },
                    onSelectPage: function (pageNumber, pageSize) {
                        getData();
                    }
                });

js查询请求代码,如下:

                function getData() {
                    var param = "";
                    $(".mynon").each(function () {
                        if ($(this).attr("checked") == "checked")
                            param = param + "#" + $(this).attr("id");
                    });
                    if (param != "") {
                        var grid = $(‘#mytable‘);
                        var options = grid.datagrid(‘getPager‘).data("pagination").options; //选项
                        var pagenum = options.pageNumber; //页数
                        var total = options.total; //总数
                        var max = Math.ceil(total / options.pageSize);
                        var pagesize = options.pageSize; //每页行数

                        var sttime = $("#starttime").combobox(‘getText‘);
                        var ettime = $("#endtime").combobox(‘getText‘);
                        $.ajax({
                            type: "post",
                            url: "../frm/report.aspx/GetReport",
                            data: "{‘begin‘:‘" + sttime + "‘,‘end‘:‘" + ettime + "‘,‘param‘:‘" + param + "‘,‘pagenum‘:‘" + pagenum + "‘,‘pagesize‘:‘" + pagesize + "‘}",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            async: false,
                            success: function (data) {
                                var d = eval(‘(‘ + data.d + ‘)‘);
                                try {
                                    $(‘#mytable‘).datagrid("loadData", d);
                                } catch (e) {
                                    alert(e);
                                }
                            },
                            error: function (err) {
                                alert("错误代码:" + err.status);
                            }
                        });
                    }
                    else {
                        alert("请选择相应的设备!");
                    }
                }
            });

ASP.NET后台代码,如下图:

        [WebMethod]
        public static string GetReport(string begin, string end, string param, string pagenum, string pagesize)
        {
            string userID = HttpContext.Current.Session["userID"].ToString();
            string[] paras = param.Split(‘#‘);
            string measures = "‘";
            for (int i = 0; i < paras.Length; i++)
            {
                measures = measures + "‘,‘" + paras[i];
            }
            measures = measures + "‘";
            string beginTime = begin + ":00";
            string endTime = end + ":00";
            int totalcount = 0;

            DataTable dt = drWater.BLL.infoManager.GetHistoryPageInfo(userID, beginTime, endTime, measures, pagenum, pagesize, out totalcount);
            List<json.dataItemJson> dataList = new List<json.dataItemJson>();
            if (dt != null)
            {
                if (dt.Rows.Count > 0)
                {
                    for (int i = 0; i < dt.Rows.Count; i++)
                    {
                        json.dataItemJson item = new json.dataItemJson();
......
                        item.status = dt.Rows[i]["status"].ToString();
                        dataList.Add(item);
                    }
                }
            }
            json.dataListJson dataListJson = new json.dataListJson();
            dataListJson.total = totalcount;
            dataListJson.rows = dataList;
            JavaScriptSerializer js = new JavaScriptSerializer();
            js.MaxJsonLength = int.MaxValue;
            string str = js.Serialize(dataListJson);
            return str;
        }

经过多次调试,返回的json字符串,虽然符合easyUi datagrid的数据格式标准,但是载入数据的时候出错!

使用eval转化json字符串之后,解决该问题!

时间: 2024-10-26 15:55:56

ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询的相关文章

javaScript(拼写树形)+ajax请求,去后台查找数据

第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容 1 //页面初始化加载菜单内容 2 $(document).ready(function(){ 3 loadPower(0); 4 }); 5 6 //加载一级权限菜单 7 function loadPower(pId){ 8 $.ax({ 9 type: "get", 10 url: "<%

Ajax异步加载后台数据(换页面,加强用户体验所用)

主页面代码,转向需要显示数据的页面 <a href="user/index">用户维护</a>  基于ssm框架的后端控制器代码,接收前端请求,转向预定的页面 @RequestMapping("/index") public String index() { return "user/index"; } 这个时候就要在index.jsp中使用Ajax加载数据,使用Ajax向后端控制器发出要求,需要在index中定义一个方法

jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页

※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public string ItemId { get; set; } public string ProductId { get; set; } public decimal ListPrice { get; set; } public decimal UnitCost { get; set; } public strin

【解决方法】EasyUI DataGrid不显示滚动条时,没有数据的问题

解决方法 于dataGrid例如,下面的代码被添加到的定义: JavaScript Code 1 2 3 4 5 6 7 8 9 10 onLoadSuccess : function (data) { if (data.total == 0) { $('#dg').datagrid('insertRow', { row : {} }); $("#dg").parent().find("tr[datagrid-row-index='0']").css({ "

jQuery的ajax请求express服务器返回数据

html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&qu

巧用ajax请求服务器加载数据列表时提示loading

我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 这里主要讲jQuery ajax的get,查询数据时,它的结构为: $.aja

ajax 请求发出了,数据更改了,但是没进入success 函数 把success 换成 complete

$(function(){ $(document).on('tap','.w-location-group .mui-table-view-cell',function(){ var bool = $(this).find('span.location-ico').attr('data-id') == 1; var boolen = $('.write-del span').hasClass('bianji504'); if(boolen){ $('.w-location-group .mui-

jquery easyui datagrid 多选只能获取一条数据

DataGrid属性: singleSelect ------如果为true,则只允许选择一行: idField ------- 指明哪一个字段是标识字段: 方法: 一:getSelections----返回所有被选中的行,当没有记录被选中的时候将返回一个空数组. 二:getChecked----在复选框呗选中的时候返回所有行. 搭配 复选框frozenColumns:[[ {field:'ck',checkbox:true}]] 出现多选只能获取一条数据情况: 1.idField 属性指明的标

ajax请求aspx.cs后台方法

前台jquery代码 $(function () { $("#btnfix").click(function () { $.ajax({ type: "post", url: "fix.aspx/test", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { console