2011年3月15日更新(仍未运作):对我来说不是很清楚。网格过滤器中的选择数据重新加载(onloadComplete)后不会更新工具栏。怎么了? 在第一页显示中填充选择。但后来没有。 我在页面网格时是否应该更新?
我的db表中有10000行。 首先,我显示前100行(过滤器选择填充100个值)。 然后我按“页面结束”寻呼机的按钮。数据在网格中重新加载,但过滤器选择不会使用新数据更新。 我怎么能得到希望的结果?
我有一个包含2个jqGrid的页面:master和detail。 两个都有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');
}