jqGrid colmodel change in loadComplete

2019-02-25 23:03发布

站内问答 / jQuery
1030 1 5

after 3 hours of googling I ask your help.

I have a jqGrid on a page.

grid's important options:

$("#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"
                }
            }
);

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.

What is the problem?

Thanks a lot for your help.

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>

标签： jquery jqgrid
举报
1条回答
叼着烟拽天下
2楼-- · 2019-02-25 23:26

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', ....

You can use the code of loadComplete to

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

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)