EasyUI入门4 datagrid数据加载的正确方式

最新推荐文章于 2023-06-17 00:56:27 发布

xiangcns

最新推荐文章于 2023-06-17 00:56:27 发布

阅读量2.3k

点赞数

分类专栏： js 文章标签： html datagrid easyui 数据控件

本文链接：https://blog.csdn.net/xiangcns/article/details/77478276

版权

js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

概述

为什么说数据加载需要一个正确的方式，因为坑实在是太多了，一般情况下我们至少有这些需求：

页面一打开自动加载数据，不需要还去点一下刷新按钮
数据量大需要分页
为了页面样式对齐需要分页
当数据超出页面范围时，会弹出滚动条，右侧滚动条会挤出一块空间破坏右边对齐效果（强迫症选项）
有查询条件输入控件，页面刷新时需要采集控件的值
执行完一个操作后，需要执行reload

代码

html文件

<script type="text/javascript">
        $(function () {

            AutoDiscipline();  //绑定专业

            //dg初始化：绑定数据、创建右键菜单
            $("#dg").datagrid({ loadFilter: pagerFilter }).datagrid({
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                url: "../../Controller/Interface/POtoPriceLib.ashx?Action=Refresh",
                queryParams: {
                    DisciplineName: encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
                    PurchaseNumber: encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
                },
                onRowContextMenu: function(e, rowIndex, rowData) { //右键时触发事件
                    //三个参数：e里面的内容很多，真心不明白，rowIndex就是当前点击时所在行的索引，rowData当前行的数据
                    e.preventDefault(); //阻止浏览器捕获右键事件
                    $(this).datagrid("clearSelections"); //取消所有选中项
                    $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                    $('#menu').menu('show', {
                        //显示右键菜单
                        left: e.pageX,//在鼠标点击处显示菜单
                        top: e.pageY
                    });
                    e.preventDefault();  //阻止浏览器自带的右键菜单弹出
                }
            });

            var pager = $('#dg').datagrid('getPager'); // get the pager of datagrid
            pager.pagination({
                pageSize: 20,
                pageNumber: 1,
                pageList: [10, 20, 30, 40, 50],
                beforePageText: '第',//页数文本框前显示的汉字
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
            });

            //选择专业刷新采购包列表.datagrid({ loadFilter: pagerFilter })
            $('#ddlDiscipline').combobox({
                onSelect: function (row) {
                    if (row != null) {
                        $.ajax({
                            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                            url: "../../Controller/Interface/POtoPriceLib.ashx?Action=Refresh",
                            type: "get",
                            data: {
                                "DisciplineName": encodeURIComponent(row.专业名称),
                                "PurchaseNumber": encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
                            },
                            dataType: "json",
                            success: function (data) {
                                $("#dg").datagrid("options").pageNumber = 1;
                                $("#dg").datagrid("loadData", data);
                            }
                        });

                    }
                }
            });

        });

        //分页用方法
        function pagerFilter(data) {
            if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage: function (pageNum, pageSize) {
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });
                    dg.datagrid('loadData', data);
                }
            });
            if (!data.originalRows) {
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }

        //初始化专业选项
        function AutoDiscipline() {
            $.ajax({
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                url: "../../Controller/PurchasePackage/PurchasePackage.ashx?Action=AutoDiscipline",
                type: "get",
                data: {},   //中文须编码，用encodeURIComponent
                dataType: "json",
                success: function (data) {
                    //值显示到input里 - EasyUI写法
                    //var msg = $.parseJSON(data);
                    $("#ddlDiscipline").combobox("loadData", data);  //动态取数据
                    $('#ddlDiscipline').combobox('select', '-全部专业-');
                }
            });

        }

        //刷新合同列表
        function RefreshPOList() {
            $.ajax({
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                url: "../../Controller/Interface/POtoPriceLib.ashx?Action=Refresh",
                type: "get",
                data: {
                    "DisciplineName": encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
                    "PurchaseNumber": encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
                },
                dataType: "json",
                success: function (data) {
                    $("#dg").datagrid("options").pageNumber = 1;
                    $("#dg").datagrid("loadData", data);
                }
            });

        }

        //同步到价格库
        function SendToPriceLib() {
            var row = $('#dg').datagrid('getSelected');
            var psguid = row.PSGUID;

            if (row.合同状态代码 == 'A') {
                event.returnValue = confirm("确认要把该合同同步到价格库吗？");
                if (event.returnValue == true) {

                    if (row) {
                        var rsguid = row.RSGUID;
                        $.ajax({
                            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                            url: "../../Controller/Interface/POtoPriceLib.ashx?Action=SendToPriceLib",
                            type: "post",
                            data: {
                                "PSGUID": psguid
                            },   //中文须编码，用encodeURIComponent
                            dataType: "text",
                            success: function (data) {
                                if (data == "ok") {
                                    $.messager.alert('提示信息', "同步到价格库成功", 'info');
                                    $("#dg").datagrid("reload",
                                        {
                                            "DisciplineName": encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
                                            "PurchaseNumber": encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
                                        });  //动态取数据
                                }
                                else {
                                    $.messager.alert('提示信息', "同步失败," + data, 'warning');
                                }
                            },
                            error: function () {
                                $.messager.alert('提示信息', "同步失败,错误代码20202", 'warning');
                            }
                        });
                    }

                }
                else { }
            }
            else if (row.合同状态代码 == 'R' || row.合同状态代码 == 'G') {
                $.messager.alert('提示信息', "合同未发布不能同步到价格库", 'warning');
            }
            else {
                $.messager.alert('提示信息', "合同状态未知，不能同步到价格库!", 'warning');
            }
        }

    </script>

ashx文件：

       public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");

            //获取请求的动作
            string action = context.Request["Action"];
            if (string.IsNullOrEmpty(action)) return;

            //页面参数
            long projectId = Int64.Parse(Encrypt.Base64Decrypt(CookiesHelper.GetCookie_l("MC_pId"))); //项目ID
            string domainName = Encrypt.Base64Decrypt(CookiesHelper.GetCookie_l("MC_doNa"));           //域登录名

            string json_stream = string.Empty;          //dataTable转置成的stream流
            string json_stream_format = string.Empty;   //dataTable转置成的stream流（easyui datagrid格式）

            //支付款项功能需要的页面传值参数
            string psguidInPayment = context.Request["PSGUID"];

            switch (action)
            {
                case "Refresh"://刷新PO列表
                    PriceLib po = new PriceLib();
                    po.ProjectId = projectId;
                    po.Discipline = HttpUtility.UrlDecode(context.Request["DisciplineName"].ToString()); //中文解码
                    po.PONumber = HttpUtility.UrlDecode(context.Request["PurchaseNumber"].ToString()); //中文解码
                    DataTable json_data = po.Select();
                    json_stream = DatatableAndJson.ToJson(json_data);
                    json_stream_format = DatatableAndJson.JsonFormatdg(json_data != null ? json_data.Rows.Count : 0, json_stream);
                    context.Response.Write(json_stream_format);
                    break;
             }
         }

代码说明

AutoDiscipline(); //绑定专业
如果你的页面有下拉框形式的查询条件输入控件，大概会用到这类方法，比如我的页面需要一个下拉框来选择专业，那么在页面初始化的时候这个下拉框里的选项就需要准备好，因此在$(function(){})里面需要一个方法来做这件事。

用queryParams方式传递参数

queryParams: {
     DisciplineName: encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
     PurchaseNumber: encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
},

另一种传递参数的写法：

//dg初始化：绑定数据、创建右键菜单
$("#dg").datagrid({ loadFilter: pagerFilter }).datagrid({
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    url: "../../Controller/PurchaseGenerate/PurchaseGenerate.ashx?Action=Refresh&DisciplineName=" + encodeURIComponent($('#ddlDiscipline').combobox('getValue')) + "&PurchaseNumber=" + encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
});

这样写会出现一个奇怪的bug，当你执行完一个动作比如发布合同之后你希望调用reload方法让datagrid刷新，这个刷新将会把你刚才的操作结果，比如合同状态的描述更新到页面上，但是你会发现$(‘#ddlDiscipline’).combobox(‘getValue’)此时取不到正确的值，虽然我选中的选项叫“管道”，凡是返回值始终是“,管道”，字符串的起始位置多出一个逗号，你的reload肯定无法根据多出一个逗号的参数得到正确的数据集，我并没有找到原因但是如果你用queryParams方式传值就没有这个问题了。

带参数使用reload方法

$("#dg").datagrid("reload",
{
  "DisciplineName": encodeURIComponent($('#ddlDiscipline').combobox('getValue')),
  "PurchaseNumber": encodeURIComponent($('#PurchaseNumber').textbox('getValue'))
});  //动态取数据