jqGrid colmodel更改loadComplete [英] jqGrid colmodel change in loadComplete
本文介绍了jqGrid colmodel更改loadComplete的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在谷歌搜索了3个小时后，我会寻求您的帮助.
after 3 hours of googling I ask your help.
我在页面上有一个jqGrid.
I have a jqGrid on a page.
网格的重要选项:
$("#listU05").jqGrid({
url:'u05json.json',
datatype: 'json',
mtype: 'POST',
colModel :[
{name:'Thema', index:'Thema', width:55},
....
loadComplete: function(data) {
jQuery("#listU05").jqGrid.setColProp('Thema',
{
stype: 'select',
searchoptions: {
value:"a:a;b:b"
}
}
);
数据加载后，我的网格上有[Loading ...]矩形，并且对代码没有任何反应. 我在调试器中看到该代码处于活动状态，但在colModel中没有任何可见的结果，并且有矩形.
after data loaded I have [Loading...] rectangle on my grid and no any reaction to code. I see in debugger that code is active but I have no any visible result in colModel, and I have the rectangle.
出什么问题了?
非常感谢您的帮助.
已更新:下面仍然无法使用的当前使用的代码
UPDATED: Current used code which still not work is below
<%@ page language="java" contentType="text/html; charset=UTF-8"
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><spring:message code="u05.TITLE"/></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/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 getUniqueNames = function(grid, columnName, data, dataIndex) {
// var data = grid.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) {
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.setColProp(columnName,
{
stype: 'select',
searchoptions: {
value:'a:a',
sopt:['eq']
}
});
}
$("#listU05").jqGrid({
url:'u05json.json',
datatype: 'json',
mtype: 'POST',
colNames:[
'<spring:message code="u05.Column.Thema"/>',
'<spring:message code="u05.Column.SubThema"/>',
'<spring:message code="u05.Column.status1"/>',
'<spring:message code="u05.Column.wie"/>',
'<spring:message code="u05.Column.KW"/>',
'<spring:message code="u05.Column.Jahr"/>',
'<spring:message code="u05.Column.kampagne"/>',
'<spring:message code="u05.Column.ergebnis"/>',
'<spring:message code="u05.Column.B1"/>',
'<spring:message code="u05.Column.B2"/>',
'<spring:message code="u05.Column.personal"/>',
'<spring:message code="u05.Column.qualifikation"/>',
'<spring:message code="u05.Column.iv"/>',
'<spring:message code="u05.Column.objekt"/>',
'<spring:message code="u05.Column.NR"/>',
'<spring:message code="u05.Column.ObjektArt"/>',
'<spring:message code="u05.Column.vorname"/>',
'<spring:message code="u05.Column.name"/>',
'<spring:message code="u05.Column.Z1"/>',
'<spring:message code="u05.Column.Z2"/>',
'<spring:message code="u05.Column.Z3"/>',
'<spring:message code="u05.Column.Z4"/>',
'<spring:message code="u05.Column.team"/>'
],
colModel :[
{name:'Thema', index:'u_05_01.Thema', width:55},
{name:'u_05_01.SubThema', index:'u_05_01.SubThema', width:55, stype: 'select', searchoptions:{ value:":\*All${subThemaOptions}" }},
{name:'u_05_01.status1', index:'u_05_01.status1', width:55, stype: 'select', searchoptions:{ value:":\*All${status1Options}" }},
{name:'u_05_01.wie', index:'u_05_01.wie', width:55, stype: 'select', searchoptions:{ value:":\*All${wieOptions}" }},
{name:'u_05_01.KW', index:'u_05_01.KW', width:55, stype: 'select', searchoptions:{ value:":\*All${kwOptions}" }},
{name:'Jahr', index:'u_05_01.Jahr', width:55, stype: 'select', searchoptions:{ value:":\*All${jahrOptions}" }},
{name:'u_05_01.kampagne', index:'u_05_01.kampagne', width:55, stype: 'select', searchoptions:{ value:":\*All${kampagneOptions}" }},
{name:'u_05_01.ergebnis', index:'u_05_01.ergebnis', width:55, stype: 'select', searchoptions:{ value:":\*All${ergebnisOptions}" }},
{name:'u_05_01.B1', index:'u_05_01.B1', width:55, stype: 'select', searchoptions:{ value:":\*All${b1Options}" }},
{name:'u_05_01.B2', index:'u_05_01.B2', width:55, stype: 'select', searchoptions:{ value:":\*All${b2Options}" }},
{name:'u_03.personal', index:'u_03.personal', width:55, stype: 'select', searchoptions:{ value:":\*All${personalOptions}" }},
{name:'u_03.qualifikation', index:'u_03.qualifikation', width:55, stype: 'select', searchoptions:{ value:":\*All${qualifikationOptions}" }},
{name:'u_03.iv', index:'u_03.iv', width:55, stype: 'select', searchoptions:{ value:":\*All${ivOptions}" }},
{name:'u_05_01.objekt', index:'u_05_01.objekt', width:55, stype: 'select', searchoptions:{ value:":\*All${objektOptions}" }},
{name:'u_05_01.NR', index:'u_05_01.NR', width:55, stype: 'select', searchoptions:{ value:":\*All${nrOptions}" }},
{name:'u_05_01.ObjektArt', index:'u_05_01.ObjektArt', width:55, stype: 'select', searchoptions:{ value:":\*All${objektArtOptions}" }},
{name:'u_06.vorname', index:'u_06.vorname', width:55, stype: 'select', searchoptions:{ value:":\*All${vornameOptions}" }},
{name:'u_06.name', index:'u_06.name', width:55, stype: 'select', searchoptions:{ value:":\*All${nameOptions}" }},
{name:'u_05_01.Z1', index:'u_05_01.Z1', width:55, stype: 'select', searchoptions:{ value:":\*All${z1Options}" }},
{name:'u_05_01.Z2', index:'u_05_01.Z2', width:55, stype: 'select', searchoptions:{ value:":\*All${z2Options}" }},
{name:'u_05_01.Z3', index:'u_05_01.Z3', width:55, stype: 'select', searchoptions:{ value:":\*All${z3Options}" }},
{name:'u_05_01.Z4', index:'u_05_01.Z4', width:55, stype: 'select', searchoptions:{ value:":\*All${z4Options}" }},
{name:'u_05_01.team', index:'u_05_01.team', width:55, stype: 'select', searchoptions:{ value:":\*All${teamOptions}" }}
],
pager: '#pager',
rowNum:100,
rowList:[10,50,100],
sortname: 'u_05_01.Thema',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: "400px",
caption: '<spring:message code="u05.TITLE"/>',
loadComplete: function(data) {
$(this).jqGrid('setColProp', 'Thema',
{
stype: 'select',
searchoptions: {
value:"a:a"
}
});
}
});
jQuery("#listU05").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false});
jQuery("#listU05").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
// 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);
});
});
</script>
</head>
<body>
<form:form method="post" commandName="filterU05" action="u05" name="formU05">
<div class="ui-widget ui-widget-content ui-jqgrid">
<table>
<tr>
<td><spring:message code="u05.Filter.objekt"/>/<spring:message code="u05.Filter.Obj_Nr"/></td>
<td>
<form:input path="objekt" style="width:130px" class="ui-widget-content"/>
<form:input path="obj_Nr" style="width:40px" class="ui-widget-content"/>
</td>
<td><spring:message code="u05.Filter.Jahr"/></td>
<td>
<form:input path="jahr" style="width:60px" class="ui-widget-content"/>
</td>
<td><spring:message code="u05.Filter.kampagne"/></td>
<td>
<form:select path="kampagne" items="${listKampagne}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/>
</td>
<td rowspan="3">
<input type="submit" name="doFilter" value="filter" style="width:60px; height:60px" class="ui-widget-content"/>
</td>
</tr>
<tr>
<td><spring:message code="u05.Filter.wie"/></td>
<td>
<form:input path="wie" style="width:80px" class="ui-widget-content"/>
</td>
<td><spring:message code="u05.Filter.KW"/></td>
<td>
<form:input path="kw" style="width:60px" class="ui-widget-content"/>
</td>
<td><spring:message code="u05.Filter.ergebnis"/></td>
<td>
<form:select path="ergebnis" items="${listErgebnis}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/>
</td>
</tr>
<tr>
<td><spring:message code="u05.Filter.ObjektArt"/></td>
<td>
<form:select path="objektArt" items="${listObjektTyp}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/>
</td>
<td><spring:message code="u05.Filter.status1"/></td>
<td>
<form:select path="status1" items="${listStatus1}" itemValue="value" itemLabel="value" style="width:60px" class="ui-widget-content"/>
</td>
<td><spring:message code="u05.Filter.name"/></td>
<td>
<form:select path="u06_name" items="${listName}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/>
</td>
</tr>
<tr>
<td><spring:message code="u05.Filter.team"/></td>
<td>
<form:select path="team" items="${listTeam}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/>
</td>
</tr>
</table>
</div>
<br>
<table id="listU05"><tr><td/></tr></table>
<div id="pager"></div>
<br>
<div class="ui-widget ui-widget-content ui-jqgrid">
<table class="InputForm">
<tr><td>
<input type="submit" name="doExcel" value="Excel" style="width:60px" onClick="document.formU05.action='u05excel';return true;" class="ui-widget-content"/>
</td></tr>
</table>
</div>
</form:form>
</body>
</html>
推荐答案
不会消失的"Loading ..."通常表示在填充网格或执行某些回调函数(例如loadComplete)期间发生了异常. .在这种情况下，错误是您使用jQuery("#listU05").jqGrid.setColProp而不是jQuery("#listU05").setColProp或jQuery("#listU05").jqGrid('setColProp', ....
The "Loading..." which is not disappear means typically that an exception occur during of the filling of the grid or executing some callback functions like loadComplete. In you case the error was that you use jQuery("#listU05").jqGrid.setColProp instead of jQuery("#listU05").setColProp or jQuery("#listU05").jqGrid('setColProp', ....
您可以使用loadComplete的代码
loadComplete: function(data) {
$(this).jqGrid('setColProp', 'Thema', {
stype: 'select',
searchoptions: {
value:"a:a;b:b"
}
});
}
我建议您另外考虑使用beforeProcessing进行此类操作.如果设置colModel的搜索属性不是很重要，但是如果要使用格式化程序:选择" 并从服务器加载editoptions.value，然后正确使用beforeProcessing.从服务器返回的数据尚未处理.因此，您可以更改 editoptions 的value属性，并已经在当前数据处理期间了'select'格式化程序使用.
I recommend you additionally to consider to use beforeProcessing for such operations. In case of setting searching properties of colModel it is not really important, but if you want use formatter:'select' and load the editoptions.value from the server then usage of beforeProcessing is exactly correct place. The data returned from the server are not yet processed. So you can change value property of editoptions and already during the current processing of the data the value property of editoptions will be used by 'select' formatter.
这篇关于jqGrid colmodel更改loadComplete的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
