JQuery EasyUI分页删除后去往第一页而不是留在删除前页的解决办法

逃离我推掉我的手 2022-04-15 02:40 183阅读 0赞

项目需求：使用JQuery EasyUI的DataGrid进行列表展示，在列表的右侧添加操作列，其中包含删除按钮，用户点击删除按钮，弹出一个确认对话框，用户在确认对话框中点击确认后删除（点击取消则不删除），删除完成后，用$.messager.show()在右下角显示提示信息，同时在回调函数中使用页面更新的find方法，获取到页面的pageSize和pageNumber跳回到删除前的页面。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%String path = request.getContextPath();%>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>中控室数据查询网格</title>
    
        <link rel="stylesheet" type="text/css" href="<%=path%>/asset/jquery-easyui-1.6.8/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="<%=path%>/asset/jquery-easyui-1.6.8/themes/icon.css">
        <script type="text/javascript" src="<%=path%>/asset/jquery-easyui-1.6.8/jquery.min.js"></script>
        <script type="text/javascript" src="<%=path%>/asset/jquery-easyui-1.6.8/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="<%=path%>/asset/jquery-easyui-1.6.8/locale/easyui-lang-zh_CN.js"></script>
    
        <script>
            $(document).ready(function () {
                page_init();
            });
    
            //todo:加载这个页面的时候到底是
            function page_init() {
    
                $("#dataTable").datagrid({
                    url: "<%=path%>/video/listVideoWithPageForJson.action", //actionName
                    queryParams: {pageNumber: 1, pageSize: 20},//查询参数
                    loadMsg: "正在加载数据...",
                    rownumbers: true,//查询结果在表格中显示行号
                    fitColumns: true,//列的宽度填满表格，防止下方出现滚动条。
                    pageNumber: 1,   //初始页码，得在这设置才效果，pagination设置没效果。
                    pagination: true,//分页控件
                    nowrap: true,//数据长度超出列宽时将会自动截取。
                    //视频类型,能否自动绑定到video
                    /*如果后端返回的json的格式直接是data={total:xx,rows:{xx}},不需要设置loadFilter了，
                    如果有多层封装，比如data.jsonMap = {total:xx,rows:{xx}}，则需要在loadFilter处理一下。*/
                    // loadFilter: function(data){
                    //     if(data.jsonMap) {
                    //         return data.jsonMap;
                    //     }
                    // }
                });
                var p = $('#dataTable').datagrid('getPager');
                $(p).pagination({
                    pageSize: 20,//每页显示的记录条数，默认为20
                    pageList: [20, 35, 50],//可以设置每页记录条数的列表
                    beforePageText: '第',//页数文本框前显示的汉字
                    afterPageText: '页    共 {pages} 页',
                    displayMsg: '共 {total} 条记录',
                    //触发分页！
                    onSelectPage: function (pageNumber, pageSize) {//分页触发
                        find(pageNumber, pageSize);
                    }
                });
    
            }
    
            function find(pageNumber, pageSize) {
    
                $("#dataTable").datagrid('getPager').pagination({pageSize: pageSize, pageNumber: pageNumber});//重置
                $("#dataTable").datagrid("loading"); //加屏蔽
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "<%=path%>/video/listVideoWithPageForJson.action",
                    data: {
                        pageNumber: pageNumber,
                        pageSize: pageSize
                    },
                    success: function (data) {
                        $("#dataTable").datagrid('loadData', data);
                        $("#dataTable").datagrid("loaded"); //移除屏蔽
                    },
                    error: function (err) {
                        $.messager.alert('操作提示', '获取信息失败...请联系管理员!', 'error');
                        $("#dataTable").datagrid("loaded"); //移除屏蔽
                    }
                });
            }
        </script>
    
        <script>
    
            String.prototype.format = String.prototype.f = function () {
                var s = this,
                    i = arguments.length;
    
                while (i--) {
                    s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
                }
                return s;
            };
    
    
            function delVideo(index) {
                var row = $('#dataTable').datagrid('getSelected');
                if (row) {
                    $.messager.confirm('提示框', '你确定这是无效视频并删除吗?', function (r) {
                        $('#dataTable').datagrid('selectRow', index);
                        //todo:获取到row的信息后去执行删除，这个url怎么写，同时要返回信息，及时将页面更新！
                        if (r) {
                            $.ajax({
                                url: '${pageContext.request.contextPath}/video/updateVideo.action',
                                method: "post",
                                dataType: "json",
                                data: {
                                    id: row.id,
                                    isIllegal: 1
                                },
                                success: function (deleteSuccess) {
                                    if (deleteSuccess) {
                                        $.messager.show({
                                            title : '提示',
                                            msg : '删除成功!'
                                        });
                                        //删除成功后，用find方法再返回到删除前页面
                                        var options = $("#dataTable" ).datagrid("getPager" ).data("pagination" ).options;
                                        var pageNumber = options.pageNumber;
                                        var pageSize = options.pageSize;
                                        find(pageNumber, pageSize);
                                    }
                                    else {
                                        $.messager.show({
                                            title : '提示',
                                            msg : '删除失败!'
                                        });
                                    }
    
                                }
                            });
                        }
                    });
                }
    
            }
    
            function operate(value, row, index) {
                var videoName_ = row.videoName.split(".")[0];
                var play = '<button href="javascript:void(0)" onclick="self.parent.addTab(\'{0}\',\'${pageContext.request.contextPath}/video/playVideo.action?videoName={1}\')">播放</button>'.format(
                    videoName_,
                    row.videoName
                );
    
    
                //todo:点击的时候，要弹出一个确认框
                var del = '<button style="margin-left:20px" href="#" onclick="delVideo({0})">删除</button>'.format(
                    index
                );
                return play + del;
            }
    
        </script>
    </head>
    <body class="easyui-layout">
    
    
    <table id="dataTable" title="中控室监控违规视频" toolbar="#tb"
           singleSelect="true" fit="true">
        <thead>
        <tr align="center">
            <th data-options="field:'isNew'" width="50">状态</th>
            <th data-options="field:'videoName'" width="60">视频名称</th>
            <th data-options="field:'videoDuration'" width="80">时长</th>
            <th data-options="field:'createTime'" align="right" width="70">创建时间</th>
            <th data-options="field:'videoCategory'" align="right" width="70">违规类型</th>
            <th data-options="field:'operation', width:50, formatter:operate">操作</th>
        </tr>
        </thead>
    </table>
    
    <%--todo:查询的时候要怎么写，怎么获取前台传过去的数据，后台要返回什么，需要包装吗？？
    JQuery EasyUI是靠JSON格式传递数据的！
    --%>
    
    <div id="tb" style="padding:2px 5px;">
        起始日期: <input class="easyui-datebox" style="width:110px">
        结束日期: <input class="easyui-datebox" style="width:110px">
     
        <a href="#" class="easyui-linkbutton" iconCls="icon-search">查询</a>
    </div>
    </body>
    </html>

JSP页面代码如上！

## 重点 ##

1.  JQuery EasyUI是用JSON和后台交互的
2.  熟悉要用到的JQuery EasyUI的组件的原理，再结合实际需要去复用或改写已有的函数
3.  最最最重要的一点：**写程序一定要动脑子，要能够快速定位到bug，而不是去做重复的无意义的事情，把自己陷入一种无谓的忙碌中！**