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

最新推荐文章于 2022-06-17 17:15:36 发布

糖人豆丁

最新推荐文章于 2022-06-17 17:15:36 发布

阅读量399

点赞数 3

分类专栏：编程细节

本文链接：https://blog.csdn.net/newmemory/article/details/84303662

版权

编程细节专栏收录该内容

9 篇文章 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页面代码如上！

重点

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

糖人豆丁

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery EasyUI分页删除后去往第一页而不是留在删除前页的解决办法

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

扫一扫