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" οnclick="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"
οnclick="submitSql()">Submit Sql</a>
<!-- <a class='btn' href='#'
style="margin-left: 100%; background-color: #0000ff"
οnclick="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>