Навигация по странице JQGrid с данными JSON внутри GSP(страницы с отличным сервером)?
Прежде всего я хочу знать, какой тип разбиения на страницы является более предпочтительным (на стороне клиента или на стороне сервера) в структуре "jqGrid" для страницы gsp.
Моя проблема заключается в том, что, когда я устанавливаю "loadonce:true", автоматическая сортировка работает, а значки навигации (стрелки) отключаются. Когда я комментирую "loadonce:true", сортировка перестает работать, и навигационные стрелки включены, но не работают вообще.
Я использую следующие вещи в своем проекте, и моя страница навигации не работает.
Cotroller
class TestDBController {
def dataSource
def index = {
}
def jq_customer_list = {
try {
def sql = new Sql(dataSource)
String query = "select * from employee"
List customers = sql.rows(query)
def count1 = sql.rows(query).size()
def jsonCells = customers.collect {
[cell: [it.fname,
it.lname,
it.age,
it.id ]
]
}
def jsonData= [ rows: jsonCells]
render jsonData as JSON
}
catch(Exception e)
{
System.out.println("Generated exception is "+e)
}
}
}
GSP с кодом jqgrid -
CSS и Javascript файлы -
<link rel="stylesheet" href="${resource(dir: 'css', file: 'timeTable.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir:'css',file:'ui.jqgrid.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir:'css/ui-lightness',file:'jquery-ui- 1.9.2.custom.css')}"type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'ttajqgridtable.css')} "type="text/css">
<g:javascript src="jquery-1.8.3.js" />
<g:javascript src="grid.locale-en.js" />
<g:javascript src="jquery.jqGrid.min.js" />
<g:javascript src="jquery-ui-1.9.2.custom.min.js" />
КодJQuery
<body>
<table id="list" class="scroll jqTable"></table>
<div id="pager" class="scroll"></div>
<script type="text/javascript">
$(document).ready(function () {
jQuery("#list").jqGrid({
url:'${g.createLink( controller:'TestDB', action:'jq_customer_list' )}',
datatype: "json",
colNames:['first Name','Last Name','Age','id'],
colModel:[
{name:'fName'},
{name:'lName'},
{name:'age'},
{name:'id'}
],
rowNum: 5,
width : 1000,
height: 500,
shrinkToFit: true,
pager: "#pager",
paging: true,
viewrecords: true,
gridview: true,
loadonce:true,
rowList : [ 5,10, 25],
sortname : 'fname',
viewrecords : true,
sortorder : "desc",
rownumbers: true,
altRows:true,
caption: "Division Data"
});
jQuery("#list").jqGrid('setGridParam',{datatype:'json'});
jQuery("#tabs").tabs();
});
</script>
</div>
</body>
</html>
2 ответа
loadonce реализован с помощью JQGrid 3.7. Если вы хотите реализовать правильное разбиение на страницы, сортировку и поиск, просто никогда не используйте версии (самую последнюю) jqGrid.
Вот мой рабочий пример -
CSS и JS файл с правильным порядком -
<link rel="stylesheet"href="${resource(dir:'css/ui-lightness',file:'jquery-ui-1.9.2.custom.css')}"type="text/css">
<link rel="stylesheet"href="${resource(dir: 'css', file: 'ttajqgridtable.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir:'css',file:'ui.jqgrid.css')}" type="text/css">
<g:javascript src="jquery-1.11.0.min.js" />
<g:javascript src="grid.locale-en.js" />
<g:javascript src="jquery.jqGrid.min.js" />
<g:javascript src="jquery-ui-1.9.2.custom.min.js" />
КодJquery и JQGrid -
<script type="text/javascript">
$(document).ready(function () {
jQuery("#clist").jqGrid({
url:'${g.createLink( controller:'TableDataJQgrid', action:'jq_customer_list' )}',
datatype: "json",
mtype:"post",
colNames:['first Name','Last Name','Age','id'],
colModel:[
{name:'fName', width:120, sortable: true, editable: true, align: 'center' },
{name:'lName', width:120, sortable: true, editable: true, align: 'center'},
{name:'age', width:80, sorttype:"int", sortable: true, editable: false, align: 'center'},
{name:'id' , width:80, sorttype:"int", sortable: true, editable: false , align: 'center'}
],
rowNum: 5,
width : 1000,
height: 500,
shrinkToFit: true,
pager: "#list_pager",
paging: true,
viewrecords: true,
gridview: true,
loadonce:true,
rowList : [ 5,10, 25],
rowTotal: 21,
sortname : 'fname',
viewrecords : true,
sortorder : "desc",
rownumbers: true,
altRows:true,
caption: "Division Data"
});
jQuery("#list").jqGrid('navGrid','#list_pager'{edit:false,add:false,del:false});
});
</script>
Если у вас есть только небольшой набор результатов для работы, и вы уверены, что он никогда не будет расти, тогда нумерация страниц на стороне клиента, вероятно, будет в порядке. Если вы работаете с большими наборами данных, вам нужно реализовать нумерацию на стороне сервера.
Здесь более подробно обсуждаются различия между нумерацией страниц на стороне клиента и на стороне сервера.
Чтобы реализовать разбиение на страницы на стороне сервера с помощью jqgrid, вам нужно будет что-то сделать сmaxа такжеoffsetпараметры, которые jqgrid представляет вашему контроллеру jq_customer_list действие. Это на самом деле довольно просто, взгляните на Groovy Sql документы для примера.