eayui结合Spring Boot实现客户端分页

来源：互联网发布：ai软件视频教程编辑：程序博客网时间：2024/05/18 02:09

1.前端代码

<!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 arrayconsole.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>

2.后端代码

@RequestMapping(value = {"/getTable"})@ResponseBodypublic 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='#'><iclass='icon-repeat'></i></a></div><div class='btn-group'><a class='btn' data-role='bold' href='#'><b>Bold</b></a> <aclass='btn' data-role='italic' href='#'><em>Italic</em></a> <aclass='btn' data-role='underline' href='#'><u><b>U</b></u></a> <aclass='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a></div><div class='btn-group'><a class='btn' data-role='justifyLeft' href='#'><iclass='icon-align-left'></i></a> <a class='btn'data-role='justifyCenter' href='#'><iclass='icon-align-center'></i></a> <a class='btn'data-role='justifyRight' href='#'><iclass='icon-align-right'></i></a> <a class='btn'data-role='justifyFull' href='#'><iclass='icon-align-justify'></i></a></div><div class='btn-group'><a class='btn' data-role='indent' href='#'><iclass='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='#'><iclass='icon-list-ul'></i></a> <a class='btn'data-role='insertOrderedList' href='#'><iclass='icon-list-ol'></i></a></div><div class='btn-group'><a class='btn' data-role='h1' href='#'>h<sup>1</sup></a> <aclass='btn' data-role='h2' href='#'>h<sup>2</sup></a> <aclass='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 arrayconsole.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>

0 1