个人中心
gpt4 book ai didi

javascript - JQGrid getGridParam 数据返回空数组

转载 作者：行者123 更新时间：2023-11-30 17:17:34 24 4
gpt4 key购买 nike

在寻呼机的自定义按钮中，我调用 grid.jqGrid("getGridParam", "data"), "data") 获取网格中的所有数据，但它返回空数组.当我在 loadComplete 函数中调用 grid.jqGrid("getGridParam", "data") 时，它仍然返回一个空数组。但是，如果我调用 grid.jqGrid('getRowData') 它会为我提供我正在寻找的数据。请参阅下面的代码。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/css/jquery-ui.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/css/ui.jqgrid.css"/>
    <!--   Overide css styling to ensure that calendar image is inline with text box -->
    <style type="text/css">.ui-jqgrid .ui-search-table .ui-search-input > input,
                            .ui-jqgrid .ui-search-table .ui-search-input > select,
                            .ui-jqgrid .ui-search-table .ui-search-input > img {vertical-align: middle; display: inline-block;}
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/grid.locale-en.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <title>Trucks Overview</title>

    <script type="text/javascript">
    jQuery().ready(function () {
        var grid = jQuery("#truck_grid");
        var orderGridDialog = $('#truck_grid_dialog');  
        var gridData;

        getUniqueNames = function(columnName) {
            var texts = grid.jqGrid('getCol', columnName, false);
            var uniqueTexts = [], textsLength = texts.length, text, i, textsMap = {}; 
            for (i=0;i<textsLength;i++) {
                text = texts[i];
                if (text != undefined && textsMap[text] === undefined) {
                    // to test whether the texts is unique we place it in the map.
                    textsMap[text] = true;
                    uniqueTexts.push(text);
                }
            }
            return uniqueTexts;
        };
        buildSearchSelect = function(uniqueNames) {
            var values=":All";
            $.each (uniqueNames, function() {
                values += ";" + this + ":" + this;
            });
            return values;
        };
        setSearchSelect = function(columnName) {
            grid.jqGrid('setColProp', columnName,
                        {   stype: 'select',
                            searchoptions: {
                                value:buildSearchSelect(getUniqueNames(columnName)),
                                sopt:['eq']
                            }
                        }
            );
        };

        var initDateWithButton = function (elem) {
            if (/^\d+%$/.test(elem.style.width)) {
                // remove % from the searching toolbar
                elem.style.width = '';
            }
            // to be able to use 'showOn' option of datepicker in advance searching dialog
            // or in the editing we have to use setTimeout
            setTimeout(function () {
                $(elem).datepicker({
                    dateFormat: 'mm/dd/yy',
                    showOn: 'button',
                    changeYear: true,
                    changeMonth: true,     
                    buttonImageOnly: true,
                    buttonImage: "images/calendar.gif",
                    buttonText: "Select date",
                    showButtonPanel: true,
                    onSelect: function (dateText, inst) {
                        inst.input.focus();
                        if (typeof (inst.id) === "string" && inst.id.substr(0, 3) === "gs_") {
                             $(inst.id).val(dateText);
                             grid[0].triggerToolbar();
                        }
                        else {
                            // to refresh the filter
                            $(inst).trigger("change");
                        }
                    }
                });
            }, 100);
        };

        grid.jqGrid({
            url: '${pageContext.request.contextPath}/getTrucksJSONAction',
            datatype: "json",
            mtype: 'GET',
            colNames: ['Truck ID', 'Status', 'Carrier Code', 'Date Created', 'Date Closed', 'T1 Status', 'Truck Arrived'],
            colModel: [
                {name: 'truckId', key:true, index: 'truckId', align: 'center', width: 100},
                {name: 'status', index: 'status', align: 'center', width: 100},
                {name: 'carrierName', index: 'carrierName', align: 'center', width: 100},
                {name: 'createdDate', index: 'createdDate', align: 'center', width: 100},
                {name: 'closedDate',  index: 'closedDate', align: 'center', width: 100},
                {name: 't1Status', sortable: false, align: 'center', width: 100, fixed: true,
                    formatter: function (celvalue) {
                        return celvalue ?
                            "<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>" :
                            "<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:10px;height:10px'/>";
                    }} ,
                {name: 'truckArrived', sortable: false, align: 'center', width: 100, fixed: true,
                        formatter: function (celvalue) {
                            return celvalue ?
                                "<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>" :
                                "<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:10px;height:10px'/>";
                        }}    
            ],
            rowNum: 10,
            height: 300,
            autoheight: true,
            autowidth: true,
            rowList: [10, 20, 30],
            pager: jQuery('#truck_grid_pager'),
            sortname: 'truckId',
            sortorder: "desc",
            jsonReader: {
                root: "records",
                page: "page",
                total: "total",
                records: "rows",
                repeatitems: false
            },
            viewrecords: true,
            altRows: false,
            gridview: true,
            hidegrid: false,
            multiselect:true,
            recordtext: '',
            emptyrecords: 'No Trucks',
            forceFit: true,
            caption: "Trucks Overview",
            loadComplete: function() { 
                // Reload the grid after changing paginattion
                var allRecords = grid.getGridParam('lastpage') * grid.getGridParam('records');
                grid.jqGrid('setGridParam', { 
                    recordtext: allRecords + ' Trucks(s) Found. Displaying {0} to {1}'});   
                $(this).trigger("reloadGrid");
                async: false,
                setSearchSelect('status');
                setSearchSelect('carrierName');
                grid.jqGrid('setColProp', 'truckId', {
                    searchoptions : {
                        sopt : [ 'bw' ],
                        dataInit : function(elem) {
                           $(elem).autocomplete({
                              source : getUniqueNames('truckId'),
                              delay : 0,
                              minLength : 0
                           });
                       }
                    }
                });   
                grid.jqGrid('setColProp', 'createdDate', {
                    sorttype: 'date', editable: true,
                        editoptions: { dataInit: initDateWithButton, size: 8 },
                        searchoptions: {
                            sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
                            dataInit: initDateWithButton
                        }
                });   
                gridData = $(this).jqGrid("getGridParam", "data");
                grid.jqGrid('filterToolbar', {autoSearch: true});
            },
        }).navGrid('#truck_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true})
        .navButtonAdd('#truck_grid_pager', {caption:"Truck Arrived", buttonicon:"ui-icon-flag",  position:"first", title:"Truck Arrived",
            onClickButton: function(){ 
                var i;
                var data = grid.jqGrid("getGridParam", "data");
                var selRowIds = grid.jqGrid('getGridParam', 'selarrrow');
                for (i = 0; i < data.length; i++) {
                    if (selRowIds.indexOf(data[i].truckId) > -1) {
                        data[i].truckArrived = true;
                    }
                }
                grid.trigger("reloadGrid");
             }
        })
        .navButtonAdd('#truck_grid_pager', {caption:"Ship Confirm", buttonicon:"ui-icon-circle-check",  position:"first", title:"Ship Confirm",
            onClickButton: function(){ 
             alert("Ship has been confirmed");}
        });

        orderGridDialog.dialog({
            autoOpen: false,
            width: 1000,
            height: 400,
            draggable: false,
            show: {
                effect: "blind",
                duration: 500
            },
            hide: {
                effect: "blind",
                duration: 250
            },
            close: function(event, ui){
                orderGridDialog.text('Loading Grid...');
            }
        });
    });

</script>
</head>
<body>
<table id="truck_grid"></table>
<div id="truck_grid_pager"></div>
<div id="truck_grid_dialog" title="Orders Overview">Loading...</div>
</body>
</html>


The problem happens in the last section of the code, namely:

        .navButtonAdd('#truck_grid_pager', {caption:"Truck Arrived", buttonicon:"ui-icon-flag",  position:"first", title:"Truck Arrived",
            onClickButton: function(){ 
                var i;
                var data = grid.jqGrid("getGridParam", "data");
                var selRowIds = grid.jqGrid('getGridParam', 'selarrrow');
                for (i = 0; i < data.length; i++) {
                    if (selRowIds.indexOf(data[i].truckId) > -1) {
                        data[i].truckArrived = true;
                    }
                }
                grid.trigger("reloadGrid");
             }
        })

我遇到的第二个问题是调用 grid.trigger("reloadGrid") 时，truckArrived 图标没有按预期从红色变为绿色。

最佳答案

仅当使用datatype: "local" 时，才会使用内部参数data。您使用 datatype: "json"。这意味着服务器仅保存整个数据集。 url: '${pageContext.request.contextPath}/getTrucksJSONAction' 接收对排序和过滤数据的页面 的请求。 服务器应实现排序、过滤/排序和分页。

存在一种特殊情况:一个使用远程数据类型("json" 或 "xml")，但一个使用 loadonce: true参数另外。在这种情况下，服务器应该返回所有未过滤的数据，而不是提供数据页面。返回的数据应该仍然排序对应于sortname，sortorder参数(将作为sidx和sord<发送到服务器)。 jqGrid 显示返回数据的第一页，但它用从服务器返回的整行数据填充内部 data 参数。在第一次加载数据后，jqGrid 将 datatype 更改为 "local"，因此稍后的数据排序、分页和过滤将类似于 datatype: "本地”。在这种情况下，您将能够使用 grid.jqGrid("getGridParam", "data") 获取所有数据，但您可以在数据之后执行此操作将被加载一次。

关于javascript - JQGrid getGridParam 数据返回空数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25804478/

24 4 0
文章推荐： javascript - 翻转第二个 div 和第三个 div
文章推荐： javascript - 使用 jquery 表单验证插件验证动态生成的字段(通过条件脚本)
文章推荐： javascript - 如何为禁用的 HTML 输入文本字段启用 HTML 验证
文章推荐： javascript - 使用javascript更改区域标签的坐标
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com