JQuey EasyUI分頁刪除後去往第一頁而不是留在刪除前頁的解決辦法
阿新 • • 發佈：2018-12-08
專案需求：使用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，而不是去做重複的無意義的事情，把自己陷入一種無謂的忙碌中！