ОБНОВЛЕНО 15.03.2011 (все еще не работает): Мне не очень понятно. Выделения в сетке filterToolbars не обновляются после перезагрузки данных (onloadComplete). Что случилось?
Выборы заполняются на первой странице шоу. Но тогда нет.
Должны ли они обновляться, когда я выкладываю сетки?
У меня есть 10000 строк в моей таблице базы данных.
Сначала я показываю первые 100 строк (фильтр выбора заполнен 100 значениями).
Затем я нажимаю кнопку «страницу до конца». Данные перезагружаются в сетках, но выбор фильтра не обновляется новыми данными.
Как я мог получить желаемый результат?
У меня есть страница с 2 jqGrid: мастер и детализация.
Оба имеют события loadComplete с заполнением селекторов в их значках filterToolbars.
Код одинаков в обеих сетках.
Но проблема в том, что у меня хороший фильтр в основной сетке и нет фильтра в детальной сетке.
Пожалуйста, посмотрите на мой код. Большое спасибо.
Моя главная страница:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/qvs.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var worknetId="0";
$("#listU04").jqGrid({
url:'u04object.json',
datatype: 'json',
mtype: 'POST',
colNames:[
'<spring:message code="u04.Column.objekt"/>',
'<spring:message code="u04.Column.obj_nr"/>',
'<spring:message code="u04.Column.ObjektArt"/>',
'<spring:message code="u04.Column.team"/>',
'<spring:message code="u04.Column.ort"/>'
],
colModel :[
{name:'Objekt', index:'Objekt', width:55},
{name:'Objekt_Nr', index:'Objekt_Nr', width:55},
{name:'Objekt_typ', index:'Objekt_typ', width:55},
{name:'Team', index:'Team', width:55},
{name:'Ort', index:'Ort', width:55}
],
pager: '#pagerU04',
rowNum:${total},
rowList:[10,20,30, ${total}],
sortname: 'Objekt',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: '500px',
width: '350px',
caption: '',
onSelectRow: function(ids) {
if(ids == null) {
ids=0;
}
worknetId = ids;
jQuery("#listU04work").jqGrid('setGridParam',{url:"u04work.json/"+ids,page:1}).trigger('reloadGrid');
},
loadComplete: function(data) {
setSearchSelect($(this), 'Objekt', data, 0);
setSearchSelect($(this), 'Objekt_Nr', data, 1);
setSearchSelect($(this), 'Objekt_typ', data, 2);
setSearchSelect($(this), 'Team', data, 3);
setSearchSelect($(this), 'Ort', data, 4);
$(this).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
sortSelects();
}
});
jQuery("#listU04").jqGrid('navGrid','#pagerU04',{del:false,add:false,edit:false,search:false});
var lastsel2;
$("#listU04work").jqGrid({
url:'u04work.json/0',
cellEdit : true,
cellsubmit : 'remote',
cellurl : 'setcheck',
datatype: 'json',
mtype: 'POST',
colNames:[
'<spring:message code="u04.Column.thema"/>',
'<spring:message code="u04.Column.subthema"/>',
''
],
colModel :[
{name:'Thema', index:'u_03.Thema', width:200},
{name:'SubThema', index:'u_03.SubThema', width:200},
{name:'aktiv', index:'aktiv', width:200, search: false, sortable: false, editable: true, edittype: "checkbox", editoptions: {value:"true:false"}, formatter:booleanImageFormat, unformat:booleanImageUnformat }
],
pager: '#pagerU04work',
rowNum:20,
rowList:[10,20,30],
sortname: 'u_03.Thema',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: '350px',
width: '700px',
caption: '',
onSelectRow: function(id){
if(id && id!==lastsel2){
$(this).jqGrid('editRow',id,true);
lastsel2=id;
}
},
afterSubmitCell: function() {
$(this).trigger("reloadGrid");
},
beforeSubmitCell: function(rowid, cellname, value, iRow, iCol) {
return {"worknetId" : worknetId};
},
loadComplete: function(data) {
setSearchSelect($(this), 'Thema', data, 0);
setSearchSelect($(this), 'SubThema', data, 1);
$(this).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
sortSelects();
}
});
jQuery("#listU04work").jqGrid('navGrid','#pagerU04work',{del:false,add:false,edit:false,search:false});
});
</script>
</head>
<body>
<table>
<tr>
<td valign="top">
<form:form method="post" commandName="filterU04" action="u04" name="formU04">
<div class="ui-widget ui-widget-content ui-jqgrid">
<table>
<tr>
<td><spring:message code="u04.Filter.Objekt"/>/<spring:message code="u04.Filter.Obj_Nr"/></td>
<td>
<form:input path="objekt" style="width:130px" class="ui-widget-content"/>
<form:input path="objekt_Nr" style="width:40px" class="ui-widget-content"/>
</td>
</tr>
<tr>
<td><spring:message code="u04.Filter.ObjektArt"/></td>
<td>
<form:input path="objekt_typ" style="width:180px" class="ui-widget-content"/>
</td>
</tr>
<tr>
<td><spring:message code="u04.Filter.team"/></td>
<td>
<form:input path="team" style="width:60px" class="ui-widget-content"/> <spring:message code="u04.Filter.wie"/>
<form:input path="wie" style="width:60px" class="ui-widget-content"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="doFilter" value="<spring:message code="common.filter"/>" style="width:180px" class="ui-widget-content"/>
</td>
</tr>
</table>
</div>
</form:form>
<table id="listU04"><tr><td/></tr></table>
<div id="pagerU04"></div>
</td>
<td valign="top">
<table>
<tr>
<td valign="top">
<table id="listU04work"><tr><td/></tr></table>
<div id="pagerU04work"></div>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table id="listTheme"><tr><td/></tr></table>
<div id="pagerTheme"></div>
</td>
<td>BUTTONS 1</td>
<td>BUTTONS 2</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr></tr>
</table>
</body>
</html>
Мои функции:
var getUniqueNames = function(grid, columnName, data, dataIndex) {
//var data = grid.jqGrid('getGridParam', 'data');
var uniqueTexts = [], text, textsMap = {}, i;
for (i = 0; i < data.rows.length; i++) {
text = data.rows[i].cell[dataIndex];
if (text !== undefined && textsMap[text] === undefined && text != "") {
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
};
buildSearchSelect = function(uniqueNames) {
var values=":*All";
$.each (uniqueNames, function() {
values += ";" + this + ":" + this;
});
return values;
};
setSearchSelect = function(grid, columnName, data, dataIndex) {
grid.jqGrid('setColProp', columnName,
{
stype: 'select',
searchoptions: {
value:buildSearchSelect(getUniqueNames(grid, columnName, data, dataIndex)),
sopt:['eq']
}
}
);
};
sortSelects = function () {
// Loop for each select element on the page.
$("select").each(function() {
// Keep track of the selected option.
var selectedValue = $(this).val();
// Sort all the options by text. I could easily sort these by val.
$(this).html($("option", $(this)).sort(function(a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}));
// Select one option.
$(this).val(selectedValue);
});
};
function booleanImageFormat( cellvalue, options, rowObject ){
if (cellvalue == "true") {
return '<div title="' + cellvalue+'" class="ui-icon ui-icon-check"/>';
}
else {
return '<div title="' + cellvalue+'" class="ui-icon ui-icon-close ui-state-disabled"/>';
}
}
function booleanImageUnformat( cellvalue, options, cell){
return $('div', cell).attr('title');
}