eayui結合Spring Boot實現客戶端分頁
阿新 • • 發佈:2019-01-08
1.前端程式碼
2.後端程式碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Search</title> <!--editor start--> <link href="assets/css/bootstrap-combined.min.css" rel="stylesheet"> <link href="assets/css/font-awesome.css" rel="stylesheet"> <style> #editor { resize:vertical; overflow:auto; border:1px solid silver; border-radius:5px; min-height:200px; box-shadow: inset 0 0 10px silver; padding:1em; margin-left: -15px; } </style> <!--editor end--> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> </head> <body> <div class="content"> <div class="container-fluid"> <div id='pad-wrapper'> <div id="editparent"> <div id='editControls' class='span9' style=' padding:5px;'> <div class='btn-group'> <a class='btn' data-role='undo' href='#'><i class='icon-undo'></i></a> <a class='btn' data-role='redo' href='#'><i class='icon-repeat'></i></a> </div> <div class='btn-group'> <a class='btn' data-role='bold' href='#'><b>Bold</b></a> <a class='btn' data-role='italic' href='#'><em>Italic</em></a> <a class='btn' data-role='underline' href='#'><u><b>U</b></u></a> <a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a> </div> <div class='btn-group'> <a class='btn' data-role='justifyLeft' href='#'><i class='icon-align-left'></i></a> <a class='btn' data-role='justifyCenter' href='#'><i class='icon-align-center'></i></a> <a class='btn' data-role='justifyRight' href='#'><i class='icon-align-right'></i></a> <a class='btn' data-role='justifyFull' href='#'><i class='icon-align-justify'></i></a> </div> <div class='btn-group'> <a class='btn' data-role='indent' href='#'><i class='icon-indent-right'></i></a> <a class='btn' data-role='outdent' href='#'><i class='icon-indent-left'></i></a> </div> <div class='btn-group'> <a class='btn' data-role='insertUnorderedList' href='#'><i class='icon-list-ul'></i></a> <a class='btn' data-role='insertOrderedList' href='#'><i class='icon-list-ol'></i></a> </div> <div class='btn-group'> <a class='btn' data-role='h1' href='#'>h<sup>1</sup></a> <a class='btn' data-role='h2' href='#'>h<sup>2</sup></a> <a class='btn' data-role='p' href='#'>p</a> </div> <div class='btn-group'> <a class='btn' href='#' style="margin-left:300%;background-color:#0000ff" onclick="submitSql()">Submit Sql</a> </div> </div> <div id='editor' class='span9' style='' contenteditable> </div> </div> </div> </div> <p style="padding:10px 50px"></p> </div> <div class="footer-banner" style="width:728px; margin:0 auto"></div> <!--<script src="assets/js/jquery.min.js"></script>--> <script src="assets/js/bootstrap.min.js"></script> <script> $(function() { $('#editControls a').click(function(e) { switch($(this).data('role')) { case 'h1': case 'h2': case 'p': document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>'); break; default: document.execCommand($(this).data('role'), false, null); break; } }) }); </script> <div style="margin:20px 0;"></div> <table id="dg" title="Client Side Pagination" style="width:100%;height:300px" data-options=" rownumbers:true, singleSelect:true, autoRowHeight:false, pagination:true, pageSize:10"> <!-- <thead> <tr> <th field="user_id" width="80">User ID</th> </tr> </thead> --> <!-- <thead> <tr> <th field="inv" width="80">Inv No</th> <th field="date" width="100">Date</th> <th field="name" width="80">Name</th> <th field="amount" width="80" align="right">Amount</th> <th field="price" width="80" align="right">Price</th> <th field="cost" width="100" align="right">Cost</th> <th field="note" width="110">Note</th> </tr> </thead> --> </table> <script> function submitSql() { console.log("submit sql"); $.post("/getTable", { sql : function() { console.log($("#editor").text().trim()); return $("#editor").text().trim()} }, function(myJSON) { console.log("result is "); console.log(myJSON); if(myJSON.success === true){ console.log("columns is "); console.log(myJSON.columns); console.log("resultSet is "); console.log(myJSON.resultSet); columns = myJSON.columns; resultSet = myJSON.resultSet; var myColumns = new Array(columns.length); for(i = 0;i < columns.length;i++){ var column = new Object(); column.field = columns[i]; column.title = columns[i]; column.width = 100;//100 / columns.length / 100; myColumns[i] = column; } console.log("myColumns is "); console.log(myColumns); var myShowColumns = new Array(); myShowColumns[0] = myColumns; console.log("myShowColumns is "); console.log(myShowColumns); $('#dg').datagrid({columns:myShowColumns,data:resultSet}).datagrid('clientPaging'); //$('#dg').datagrid({columns:myJSON.columns}).datagrid({data:myJSON.resultSet}).datagrid('clientPaging'); }else{ alert(myJSON.errorMsg); } }); } (function($){ function pagerFilter(data){ if ($.isArray(data)){ // is array console.log("data isArray,its content is "); console.log(data); data = { total: data.length, rows: data } console.log("after change data is "); console.log(data); } var target = this; var dg = $(target); var state = dg.data('datagrid'); var opts = dg.datagrid('options'); if (!state.allRows){ state.allRows = (data.rows); } if (!opts.remoteSort && opts.sortName){ var names = opts.sortName.split(','); var orders = opts.sortOrder.split(','); state.allRows.sort(function(r1,r2){ var r = 0; for(var i=0; i<names.length; i++){ var sn = names[i]; var so = orders[i]; var col = $(target).datagrid('getColumnOption', sn); var sortFunc = col.sorter || function(a,b){ return a==b ? 0 : (a>b?1:-1); }; r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1); if (r != 0){ return r; } } return r; }); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = state.allRows.slice(start, end); return data; } var loadDataMethod = $.fn.datagrid.methods.loadData; var deleteRowMethod = $.fn.datagrid.methods.deleteRow; $.extend($.fn.datagrid.methods, { clientPaging: function(jq){ return jq.each(function(){ var dg = $(this); var state = dg.data('datagrid'); var opts = state.options; opts.loadFilter = pagerFilter; var onBeforeLoad = opts.onBeforeLoad; opts.onBeforeLoad = function(param){ state.allRows = null; return onBeforeLoad.call(this, param); } 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',state.allRows); } }); $(this).datagrid('loadData', state.data); if (opts.url){ $(this).datagrid('reload'); } }); }, loadData: function(jq, data){ jq.each(function(){ $(this).data('datagrid').allRows = null; }); return loadDataMethod.call($.fn.datagrid.methods, jq, data); }, deleteRow: function(jq, index){ return jq.each(function(){ var row = $(this).datagrid('getRows')[index]; deleteRowMethod.call($.fn.datagrid.methods, $(this), index); var state = $(this).data('datagrid'); if (state.options.loadFilter == pagerFilter){ for(var i=0; i<state.allRows.length; i++){ if (state.allRows[i] == row){ state.allRows.splice(i,1); break; } } $(this).datagrid('loadData', state.allRows); } }); }, getAllRows: function(jq){ return jq.data('datagrid').allRows; } }) })(jQuery); function getData(){ var rows = []; /* for(var i=1; i<=800; i++){ var amount = Math.floor(Math.random()*1000); var price = Math.floor(Math.random()*1000); rows.push({ inv: 'Inv No '+i, date: $.fn.datebox.defaults.formatter(new Date()), name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } */ return rows; } $(function(){ $('#dg').datagrid({data:getData()}); }); </script> </body> </html>
@RequestMapping(value = {"/getTable"}) @ResponseBody public ExecutorVO getTable(@RequestParam(name="sql", required = true) final String sql){ log.info(sql); ExecutorVO result = facadeManager.executeQuery(sql, null); log.info(result.toString()); log.info(result.getResultSet().toString()); return result; }
3.上面的前端程式碼有點問題,就是第二次點選按鈕的時候會出現錯誤,修改如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Search</title> <!--editor start--> <link href="assets/css/bootstrap-combined.min.css" rel="stylesheet"> <link href="assets/css/font-awesome.css" rel="stylesheet"> <style> #editor { resize: vertical; overflow: auto; border: 1px solid silver; border-radius: 5px; min-height: 200px; box-shadow: inset 0 0 10px silver; padding: 1em; margin-left: -15px; } </style> <!--editor end--> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> </head> <body> <div class="content"> <div class="container-fluid"> <div id='pad-wrapper'> <div id="editparent"> <div id='editControls' class='span9' style='padding: 5px;'> <div class='btn-group'> <a class='btn' data-role='undo' href='#'><i class='icon-undo'></i></a> <a class='btn' data-role='redo' href='#'><i class='icon-repeat'></i></a> </div> <div class='btn-group'> <a class='btn' data-role='bold' href='#'><b>Bold</b></a> <a class='btn' data-role='italic' href='#'><em>Italic</em></a> <a class='btn' data-role='underline' href='#'><u><b>U</b></u></a> <a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a> </div> <div class='btn-group'> <a class='btn' data-role='justifyLeft' href='#'><i class='icon-align-left'></i></a> <a class='btn' data-role='justifyCenter' href='#'><i class='icon-align-center'></i></a> <a class='btn' data-role='justifyRight' href='#'><i class='icon-align-right'></i></a> <a class='btn' data-role='justifyFull' href='#'><i class='icon-align-justify'></i></a> </div> <div class='btn-group'> <a class='btn' data-role='indent' href='#'><i class='icon-indent-right'></i></a> <a class='btn' data-role='outdent' href='#'><i class='icon-indent-left'></i></a> </div> <div class='btn-group'> <a class='btn' data-role='insertUnorderedList' href='#'><i class='icon-list-ul'></i></a> <a class='btn' data-role='insertOrderedList' href='#'><i class='icon-list-ol'></i></a> </div> <div class='btn-group'> <a class='btn' data-role='h1' href='#'>h<sup>1</sup></a> <a class='btn' data-role='h2' href='#'>h<sup>2</sup></a> <a class='btn' data-role='p' href='#'>p</a> </div> <div class='btn-group'> <a class='btn' href='#' style="margin-left: 100%; background-color: #0000ff" onclick="submitSql()">Submit Sql</a> <!-- <a class='btn' href='#' style="margin-left: 100%; background-color: #0000ff" onclick="insertDG()">insert</a> --> </div> </div> <div id='editor' class='span9' style='' contenteditable></div> </div> </div> </div> <p style="padding: 10px 50px"></p> </div> <div class="footer-banner" style="width: 728px; margin: 0 auto"></div> <!--<script src="assets/js/jquery.min.js"></script>--> <script src="assets/js/bootstrap.min.js"></script> <script> $(function() { $('#editControls a').click(function(e) { switch($(this).data('role')) { case 'h1': case 'h2': case 'p': document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>'); break; default: document.execCommand($(this).data('role'), false, null); break; } }) }); </script> <div id="testpoint" style="margin: 20px 0;"><div id="tablediv"> <div id="tablediv"> <table id="dg" style="width: 100%; height: 300px" data-options=" rownumbers:true, singleSelect:true, autoRowHeight:false, pagination:true, pageSize:10"> </table> </div> <!-- <thead> <tr> <th field="user_id" width="80">User ID</th> </tr> </thead> --> <!-- <thead> <tr> <th field="inv" width="80">Inv No</th> <th field="date" width="100">Date</th> <th field="name" width="80">Name</th> <th field="amount" width="80" align="right">Amount</th> <th field="price" width="80" align="right">Price</th> <th field="cost" width="100" align="right">Cost</th> <th field="note" width="110">Note</th> </tr> </thead> --> <script> /*Start*/ var loadDataMethod; var isFirst = true; function init($){ function pagerFilter(data){ console.log("function:pagerFilterINSIDE"); if ($.isArray(data)){ // is array console.log("data isArray,its content is "); console.log(data); data = { total: data.length, rows: data } console.log("after change data is "); console.log(data); } var target = this; var dg = $(target); var state = dg.data('datagrid'); console.log("state in PageFilter is "); console.log(state); var opts = dg.datagrid('options'); console.log("opts in PageFilter is "); console.log(opts); if (!state.allRows){ state.allRows = (data.rows); } console.log("after changed the state is "); console.log(state); if (!opts.remoteSort && opts.sortName){ var names = opts.sortName.split(','); var orders = opts.sortOrder.split(','); state.allRows.sort(function(r1,r2){ var r = 0; for(var i=0; i<names.length; i++){ var sn = names[i]; var so = orders[i]; var col = $(target).datagrid('getColumnOption', sn); var sortFunc = col.sorter || function(a,b){ return a==b ? 0 : (a>b?1:-1); }; r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1); if (r != 0){ return r; } } return r; }); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); console.log("start is " + start + ",end is " + end); data.rows = state.allRows.slice(start, end); return data; } loadDataMethod = $.fn.datagrid.methods.loadData; $.extend($.fn.datagrid.methods, { clientPaging: function(jq){ console.log("function:clientINSIDE"); return jq.each(function(){ var dg = $(this); var state = dg.data('datagrid'); console.log("state in clientPaging is "); console.log(state); var opts = state.options; console.log("opts in clientPaging is "); console.log(opts); opts.loadFilter = pagerFilter; var onBeforeLoad = opts.onBeforeLoad; opts.onBeforeLoad = function(param){ state.allRows = null; return onBeforeLoad.call(this, param); } var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); console.log("pageNumber is " + pageNum + ",pageSize is " + pageSize); dg.datagrid('loadData',state.allRows); console.log("state.allRows in clientPaging is ") console.log(state.allRows); } }); $(this).datagrid('loadData', state.data); console.log("state.data in clientPaging is "); console.log(state.data); if (opts.url){ console.log("reload!!!!!!!!!!!"); $(this).datagrid('reload'); } }); }, loadData: function(jq, data){ console.log("function:loadDataINSIDE"); jq.each(function(){ $(this).data('datagrid').allRows = null; }); console.log("data in loadData is "); console.log(data); return loadDataMethod.call($.fn.datagrid.methods, jq, data); } }) }; /*End*/ function submitSql() { console.log("submit sql"); if(isFirst === false){ $.fn.datagrid.methods.loadData = loadDataMethod; $.fn.datagrid.methods.clientPaging = null; /* $.extend($.fn.datagrid.methods, { clientPaging: function(jq){ console.log("recover"); }, loadData: function(jq, data){ console.log("recover"); } }); */ } isFirst = false; removeDG(); insertDG(); $.post("/getTable", { sql : function() { console.log($("#editor").text().trim()); return $("#editor").text().trim()} }, function(myJSON) { init(jQuery); /* console.log("result is "); console.log(myJSON); */ if(myJSON.success === true){ /* console.log("columns is "); console.log(myJSON.columns); console.log("resultSet is "); console.log(myJSON.resultSet);*/ columns = myJSON.columns; resultSet = myJSON.resultSet; var myColumns = new Array(columns.length); for(i = 0;i < columns.length;i++){ var column = new Object(); column.field = columns[i]; column.title = columns[i]; column.width = 100;//100 / columns.length / 100; myColumns[i] = column; } /* console.log("myColumns is "); console.log(myColumns); */ var myShowColumns = new Array(); myShowColumns[0] = myColumns; /*console.log("myShowColumns is "); console.log(myShowColumns); */ console.log("resultSet is "); console.log(resultSet); //$('#dg').datagrid({columns:myShowColumns}); $('#dg').datagrid({columns:myShowColumns,data:resultSet}).datagrid('clientPaging'); //$('#dg').datagrid({columns:myJSON.columns}).datagrid({data:myJSON.resultSet}).datagrid('clientPaging'); }else{ alert(myJSON.errorMsg); } }); } function removeDG(){ console.log("remove dg"); $("#tablediv").remove(); } function insertDG(){ console.log("insert dg"); $("#testpoint").after( "<div id='tablediv'></div>" ); $("#tablediv").append( "<table id='dg' style='width: 100%; height: 300px' data-options='rownumbers:true,singleSelect:true,autoRowHeight:false,pagination:true,pageSize:10'>" ); } </script> </body> </html>