刷新loadComplete中的filterToolbar

时间:2012-03-14 14:19:08

标签: jquery jqgrid

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"/>&nbsp;<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');
    }

0 个答案:

没有答案