Question

在谷歌搜索3小时后，我请求你的帮助。

我在页面上有一个jqGrid。

网格的重要选项：

$("#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中没有任何可见的结果，而且我有矩形。

有什么问题？

非常感谢你的帮助。

更新：当前使用的代码仍然不起作用

<%@ 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>

Answer 1

“加载...”不会消失，通常意味着在填充网格或执行某些回调函数（如loadComplete）期间发生异常。在您的情况下，错误是您使用jQuery("#listU05").jqGrid.setColProp而不是jQuery("#listU05").setColProp或jQuery("#listU05").jqGrid('setColProp', ...。

您可以使用loadComplete至

的代码

loadComplete: function(data) {
    $(this).jqGrid('setColProp', 'Thema', {
        stype: 'select',
        searchoptions: {
            value:"a:a;b:b"
        }
    });
}

我建议您另外考虑使用beforeProcessing进行此类操作。在设置colModel的搜索属性的情况下，这并不重要，但如果您想使用formatter:'select'并从服务器加载editoptions.value，则beforeProcessing的使用完全正确地点。尚未处理从服务器返回的数据。因此，您可以在当前数据处理过程中更改editoptions和的value属性 editoptions的value属性将由{{3}}使用{ {1}}格式化程序。

jqGrid colmodel在loadComplete中更改

1 个答案: