easyui datagrid 扩展 加载失败 及 异常数据提示

最新推荐文章于 2020-03-31 21:46:00 发布
最新推荐文章于 2020-03-31 21:46:00 发布
阅读量2k 收藏 1
点赞数 2
分类专栏： JQuery EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rrrgy236116/article/details/94395830
版权

if ($.fn.datagrid.methods) {
    $.extend($.fn.datagrid.methods, {
        outExcel: function (jq, params) {
            var defaults = {
                type: 0,//0:全部 1:当前页
                controllerName: "",
                actionName: "",
                conditions: {}
            }
            var model = $.extend(defaults, params);
            if (typeof (model.conditions) != 'object') {
                showMsg('无效的查询参数对象');
                return;
            }
            if (model.controllerName == "" || model.actionName == "") {
                showMsg("无效的页面参数");
                return;
            }
            return jq.each(function () {
                var $target = $(this);
                var options = $target.datagrid('options');
                var columns = options.columns[0];
                if (!columns || columns.length == 0) {
                    showMsg('无效的列集合');
                    return;
                }
                model.columns = JSON.stringify(columns);
                model.conditions = JSON.stringify(model.conditions);
                ajaxPost("/System/outExcel", model, function (data) {
                    data = JSON.parse(data);
                    if (data.state == "success") {
                        $('<form id="formExcel" method="post" action="/System/DownloadExcel?filename=' + data.content + '"></form>').appendTo('body').submit().remove();
                    }
                    else {
                        showMsg(data.content);
                    }
                })
            });
        }
    });

    /*
    加载数据失败提示
    */
    $.extend($.fn.datagrid.defaults, {
        onLoadError: function (data)
        {
            console.log('onloadError');
            console.log(data);
            $.messager.alert('提示信息', '请求异常', 'info');
            $(this).datagrid('loadData', { total: 0, rows: [] });
        },
        loadFilter: function (data) {
            //console.log(data);
            //{"total":27,"rows":[{"rowno_2":"1"},{"rowno_2":"2"}]}
            //{"state":"error","content":"用户登录异常,请重新登录"}
            if (data.state != undefined && data.state == "error") {
                var push = {
                    "total": 0,
                    "rows": ""// 当为[]会出现空的两行
                };
                showMsg(data.content);
                return push;
            }
            else
                return data;
        },
    });
    /*
        *增加空行 用于数据不足以填满整个列表
        *param jq datagrid对象
    */
    $.extend($.fn.datagrid.methods, {
        fillBlankRow: function (jq, options) {
            var defaults = {
                onResize: function () {
                    $(jq).datagrid("fillBlankRow");
                }
            };
            var params = $.extend({}, defaults, options);
            var grid = $(jq);
            var rows = grid.datagrid("getRows");
            var length = rows.length;
            if (length > 0) {
                var options = grid.datagrid("options");
                if (typeof (params.onResize) == "function") {
                    options["onResize"] = function () {
                        params.onResize();
                    }
                }
                var gpanel = grid.datagrid("getPanel");
                var gbody1 = gpanel.find(".datagrid-view1 .datagrid-body");
                var tbody1 = gbody1.find("table>tbody");
                var gbody2 = gpanel.find(".datagrid-view2 .datagrid-body").eq(0);
                var gbody2table = gbody2.find("table");
                var tbody2 = gbody2.find("table>tbody").eq(0);
                var column1s = grid.datagrid("getColumnFields", true);
                var column2s = grid.datagrid("getColumnFields");
                var td1s = "";
                var td2s = "";
                //先移除填充行
                if (gbody1 != undefined)
                    $(gbody1).find("tr[class='datagrid-blank-row datagrid-row datagrid-row-alt']").remove();
                if (gbody2 != undefined)
                    $(gbody2).find("tr[class='datagrid-blank-row datagrid-row datagrid-row-alt']").remove();
                var scrollHeight = $(gbody2)[0].scrollHeight;
                var gbody2_height = $(gbody2).height();
                var gbody2table_height = $(gbody2table).height();
                var h1 = gbody2_height - gbody2table_height;
                var h2 = scrollHeight - gbody2table_height;
                if (options.rownumbers == true && h1 > 0) {
                    td1s += "<td class='datagrid-td-rownumber'><div class=\"datagrid-cell-rownumber\"></div></td>";

                    if (column1s.length > 0) {
                        $.each(column1s, function (i, field) {
                            var opt = grid.datagrid("getColumnOption", field);
                            if (opt != null && !opt.hidden) {
                                if (opt.checkbox) {
                                    td1s += "<td field=\"" + field + "\"><div class=\"datagrid-cell-check\"></div></td>";
                                } else {
                                    td1s += "<td field=\"" + field + "\"><div class=\"datagrid-cell datagrid-cell-c1-" + field + "\"></div></td>";
                                }
                            }
                        });
                    }
                    var events = $._data(gbody1.children().get(0), 'events');
                    if (events != null) {
                        //重新绑定click、dblclick事件
                        var clickfunc = events.click[0].handler;
                        events.click[0].handler = function (e) {
                            var tt = $(e.target);
                            var tr = tt.closest("tr.datagrid-row");
                            if (tr.hasClass("datagrid-blank-row")) {
                                return;
                            }
                            clickfunc(e);
                        };
                        var dblclickfunc = events.dblclick[0].handler;
                        events.dblclick[0].handler = function (e) {
                            var tt = $(e.target);
                            var tr = tt.closest("tr.datagrid-row");
                            if (tr.hasClass("datagrid-blank-row")) {
                                return;
                            }
                            dblclickfunc(e);
                        };
                    }
                }
                if (tbody2.length > 0 && column2s.length > 0 && h2 > 0) {
                    $.each(column2s, function (i, field) {
                        var opt = grid.datagrid("getColumnOption", field);
                        if (opt != null && !opt.hidden) {
                            if (opt.checkbox) {
                                td2s += "<td field=\"" + field + "\"><div class=\"datagrid-cell-check\"></div></td>";
                            } else {
                                td2s += "<td  field=\"" + field + "\"><div class=\"datagrid-cell datagrid-cell-c" + (options.rownumbers == true ? "2" : "1") + "-" + field + "\"></div></td>";
                            }
                        }
                    });

                    var events = $._data(gbody2.get(0), 'events');
                    if (events != null) {
                        //重新绑定click、dblclick事件
                        var clickfunc = events.click[0].handler;
                        events.click[0].handler = function (e) {
                            var tt = $(e.target);
                            var tr = tt.closest("tr.datagrid-row");
                            if (tr.hasClass("datagrid-blank-row")) {
                                return;
                            }
                            clickfunc(e);
                        };
                        var dblclickfunc = events.dblclick[0].handler;
                        events.dblclick[0].handler = function (e) {
                            var tt = $(e.target);
                            var tr = tt.closest("tr.datagrid-row");
                            if (tr.hasClass("datagrid-blank-row")) {
                                return;
                            }
                            dblclickfunc(e);
                        };
                    }
                }
                if (td1s != "") {
                    var tr = '<tr class="datagrid-blank-row datagrid-row datagrid-row-alt" style="height:' + h1 + 'px;" >' + td1s + '</tr>';
                    $(tr).appendTo(tbody1);
                }
                if (td2s != "") {
                    var tr = '<tr class="datagrid-blank-row datagrid-row datagrid-row-alt" style="height:' + h2 + 'px;background:#FFFFFF;border-bottom:0;">' + td2s + '</tr>';
                    $(tr).appendTo(tbody2);
                }
            }
        }
    });
}

 

无名大白
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
扩展easyui.datagrid，添加数据loading遮罩效果代码
12-09
在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来 拿datagrid插件来说，数据加载提供了两...分析easyui的datagrid代码，削离出其中远程数据加载时遮罩显示代码，并扩展datagrid的方法，代码如下： 代码如
easyui datagrid 增加鼠标悬停弹窗事件
08-21
EasyUI的Datagrid是一个强大的表格组件，它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中，Datagrid常用于展示结构化的数据，使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**： 在...
EasyUI技巧——DataGrid组件的错误统一处理
夫礼者的专栏
02-01 1707
EasyUI的DataGrid控件的错误处理。
Grid 自动加载异常处理
weoln的专栏
12-20 1332
Ext grid数据加载异常一般是以下几个原因导致： 1.需要加载的数据格式错误。比如以json方式加载的数据，如果json字符串格式错误，就会导致数据无法加载。 2.如果store定义了baseParams参数，在定义store时需要给baseParams赋初始值，否则store在自动加载时会出现异常导致数据无法加载。 var store = new Ext.data.Store({ p
easyui datagrid请求数据失败，页面提示
jack__love的博客
08-23 4025
datagrid方法用来将请求到的数据加载到表格中，但考虑一种特殊情况，就是服务器崩掉比如tomcat崩了，请求不到数据，还是会加载出一个表格的框框，如下图，     这样就会影响用户体验，并且报错：Uncaught TypeError: Cannot read property 'length' of undefined。这是因为没有请求到数据，渲染表格出错。     所
jquery easyui datagrid使用参考
weixin_30649859的博客
03-01 368
创建datagrid 在页面上添加一个div或table标签，然后用jquery获取这个标签，并初始化一个datagrid。代码如下： 页面上的div标签： <div id="magazineGrid"> </div> js代码： $('#magazineGrid').datagrid({ height: 340, url: 'url', ...
easyUI的datagrid，当后台查询结果为空，不执行OnLoadSuccess方法的解决
danfeixia的专栏
02-10 5427
有时候后，后台执行返回的json对象为null或者不合法时，不会执行OnLoadSuccess方法，也不会执行OnLoadError方法时，有可能是rows为空，不合法，这时，total为0。     //salesOutbounds是对象List  map.put("rows", salesOutbounds);             // total and footer, just
简介EasyUI datagrid editor combogrid搜索框的实现
09-02
总结起来，实现EasyUI datagrid editor中的combogrid搜索框，关键在于扩展datagrid的编辑器功能以支持combogrid，以及正确地定位并操作combogrid的grid对象。通过CSS类选择器，我们可以在编辑器环境中有效地处理和...
easyui datagrid 右冻结
04-18
1. **理解EasyUI datagrid**：首先，你需要熟悉EasyUI datagrid的基本用法，包括其初始化、数据加载、列配置等。 2. **分析源码**：查看easyui的源代码，找到处理表格滚动的部分，理解其工作原理。 3. **创建固定...
datagrid的初始化以及动态加载
hulufeng1203的专栏
02-17 3676
//datagrid初始化  $(function() {     $('#tt').datagrid({     //title : '信息显示',     //iconCls : 'icon-save',     width : 'auto',     height : 'auto',     pageSize:5,     pageList : [ 5, 10, 15 ],     nowr
EasyUI 之datagrid 使用[转]
zhglhy的专栏
12-05 143
EasyUI 之datagrid 使用 来自：http://ycx211314.blog.163.com/blog/static/101670862011229105845754/ 可选的参数 DataGrid 属性 覆写了 $.fn.datagrid.defaults. 参数名 类型 描述 默认值 title ...
初次使用EasyUI框架插件遇到的问题及总结
weixin_33748818的博客
11-07 445
由于公司做的系统大部分是后台系统，系统中列表居多；EasyuUI的datagrid这个插件对列表处理的还是很好的，满足公司的大部分列表需求了。使用easyui框架也是进入现在的公司之后采用到的。关于EasyuUI的datagrid可以在已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据；也可以通过js来动态创建数据网格。关于如何创建看EasyUI的官网就可以了，比较简...
easyUI datagrid is not a function
sunfly01的博客
03-31 2890
作为一个后台开发界的一条咸鱼，无奈碰上了前端的小需求，真是苦逼了我~~ 废话少说。 在使用easyUI 的datagrid（打他dog ri de）时，我写完之后浏览器一直报错，Uncaught TypeError:$(…)datagrid is not a function. 我百度查了哈，很多说是因为jQuery和easyUI的包冲突了，说easyUI本身就有jQuery，如果再引入就会重复...
关于EasyUI datagrid 无法在dialog中显示的问题分析及解决方案！
aerkv86628的专栏
08-31 329
最近项目中引用了easyUI，很大程度上的简化了开发过程，但是随之而来的也遇到一些问题，比如：标题中遇到的问题，去网上搜罗了下关于这个问题的解决方案，不是说的很复杂就是干脆文不对题，国外的使用这种稍微过时的UI框架就更少了，于是没办法就自己研究了，没有优化之前的图片大家参考下，数据都有就是无法显示，里面的内容全部不见了;网上很多人的解决方案是：新开一个页面并且使用iframe链接过...
jquery easyui 显示spring mvc处理异常信息
屋里郎
12-26 4668
以DataGrid为例，当后台处理请求失败时，前台默认是无任何记录显示。 用户并不知道是没有查询到，还是处理出现的问题，不是非常友好。 此时onLoadError()函数就登场了。 onLoadError函数根Ajax中的error()函数的参数是相同的： error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。
EasyUI(5) $.fn.datagrid.methods[_86e] is not a function(easyui扩展插件冲突错误)
郑清
12-04 8103
出现如下错误：$.fn.datagrid.methods[_86e] is not a function 在项目中我出现的问题是使用可编辑表格扩展插件(Cell Editing in DataGrid)的时候没有相应的效果 后来发现是和datagrid-扩展列信息中的 jeasyui.extensions.datagrid.tooltip.js 插件冲突 解决方法: --> 在to...
easyui使用心得 - datagrid前端分页
u010653281的博客
06-27 2982
$("#dg").datagrid(); 四个相关属性：pageList,pageSize,pagination,loadFilter pageList和pageSize一起，定义分页的大小 pagination 显示分页工具栏 loadFilter 加载过滤器，可以过滤和格式化数据后显示。 利用loadFilter进行前端分页： 该属性接受一个function，这样写，便能分页...
easyui datagrid onLoadSuccess方法 正确使用
热门推荐
whatday的专栏
11-29 1万+
错误写法： <table id="dg" class="easyui-datagrid" rownumbers="true" fitColumns="true" singleSelect="true" data-options="url:'terminalResourceInfoController/findSelectMaterials?id=${vo.id}',method:...
easyui datagrid 延迟加载
最新发布
10-06
easyui datagrid 延迟加载是指在页面初始化时，并不立即加载所有的数据，而是等到需要显示数据的时候，再去请求后台数据并进行加载。 实现easyui datagrid 延迟加载的方式有两种：一种是通过设置数据源的url属性，另一种是通过调用datagrid的load方法。 第一种方式，我们可以在datagrid的初始化代码中设置url属性，该属性指向后台数据接口的地址。当需要显示数据时，datagrid会自动根据该地址向后台发送请求并加载数据。例如： ``` $('#datagrid').datagrid({ url: 'http://example.com/data' }); ``` 第二种方式，我们可以在需要显示数据的时候，手动调用datagrid的load方法，传入后台数据接口的地址作为参数。例如： ``` $('#datagrid').datagrid('load', 'http://example.com/data'); ``` 无论使用哪种方式，当datagrid加载数据时，会显示一个加载提示，用户可以通过设置加载提示的内容以及样式来提升用户体验。例如： ``` $('#datagrid').datagrid({ url: 'http://example.com/data', loadMsg: '数据加载中...', loadFilter: function(data){ // 数据过滤处理 return data; } }); ``` 在loadFilter回调函数中，可以对从后台返回的数据进行处理，例如过滤无效数据、添加额外的字段等。 总之，easyui datagrid 延迟加载能够提高页面加载速度和用户体验，减少不必要的服务器压力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值