eayui结合Spring Boot实现客户端分页
2016-07-18 18:09
731 查看
1.前端代码
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>
<!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>2.后端代码
@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>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- 一个jar包里的网站
- 一个jar包里的网站之文件上传
- 一个jar包里的网站之返回对媒体类型
- jQuery Ajax 跨域调用
- Spring和ThreadLocal
- Spring Boot 开发微服务
- Spring AOP动态代理-切面
- 移动端的长按事件
- easyui------显示隐藏列功能
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- html5 web数据存储
- SEO
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 异步流程控制:7 行代码学会 co 模块