jQGrid - “reloadGrid” - 保持位置

时间:2014-06-10 14:36:03

标签: jqgrid

我正在尝试“刷新”或“重新加载”网格,并在网格重新加载后保留有焦点的行。

我试过这样做: -

var rowId = $("#dispatch").jqGrid('getGridParam','selrow');
var thisRow = (parseInt(rowId) + parseInt(1));  

$("#dispatch").trigger("reloadGrid");

setTimeout(function(){
    $("#dispatch").setSelection(thisRow);
}, 151);

但你可以从位置#1到新位置看到它。

还有其他方法可以重新加载网格并保持焦点位置吗?

尝试: -

// Display Current Jobs

$('#btn-current').bind('click', function() {

    $.ajax({
        type: 'GET',
        url: 'scripts/php/jobs.controller.php',
        data: "id=" + "current",
        success: function(data){

             allButtons.removeClass('active');
             $('#btn-current').addClass('active');

             $("#dispatch").trigger("reloadGrid", [{current:true}]);

        }
    });

});

网格: -

$(function () {

    var lastsel2
    var rowsToColor = [];

    $("#dispatch").jqGrid({
    url: 'scripts/xml/jobs.xml',
    datatype: "xml",
       xmlReader: { 
          root:"joblist", 
          row:"job",
          repeatitems:false,
      },
        colNames: ["Time", "Car", "Status", "P", "Pickup", "Zone", "Destination", "Fare", "Name", "Type", "Tel", "Comments", "Account No", "Allow Time", "Tariff", "Email", "Driver Fare", "Driver Extras", "Customer Extras", "Driver", "Driver Comments", "Reference No", "Payment", "From No", "From Street", "From PostCode", "To No", "To Street", "To PostCode", "Account Name", "Flight No", "From Zone No", "To Zone No"],
        colModel: [
            { name: "bookingdatetime", width: 55, editable: true },
            { name: "car", width: 45, editable: true },
            { name: "jbmessage", width: 60 },
            { name: "prebooking", width: 10 },
            { name: "pickup", width: 359, editable: true, classes:"grid-col"},
            { name: "zone", width: 50 },
            { name: "dropoff", width: 359, sortable: false, editable: true },
            { name: "customerfare", width: 76, editable: true },
            { name: "passname", width: 100, editable: true },
            { name: "cartype", width: 50, editable: true, },
            { name: "tel", width: 100, editable: true },
            { name: "comments", width: 150 },
            { name: "accountno", hidden: true },
            { name: "allowtime", hidden: true },
            { name: "tarif", hidden: true },
            { name: "emailaddress", hidden: true },
            { name: "driverfare", hidden: true },
            { name: "driverextras", hidden: true },
            { name: "customerextras", hidden: true },
            { name: "driver", hidden: true },
            { name: "comments1", hidden: true },
            { name: "referenceno", hidden: true },
            { name: "payment", hidden: true },
            { name: "fromno", hidden: true },
            { name: "fromstreet", hidden: true },
            { name: "frompostcode", hidden: true },
            { name: "tono", hidden: true },
            { name: "tostreet", hidden: true },
            { name: "topostcode", hidden: true },
            { name: "customer", hidden: true },
            { name: "flightno", hidden: true },
            { name: "fromzoneno", hidden: true },
            { name: "tozoneno", hidden: true }
        ],
        loadComplete: function (){

            var rowIds = $('#dispatch').jqGrid('getDataIDs');

            for (i = 1; i <= rowIds.length; i++) {//iterate over each row

                rowData = $('#dispatch').jqGrid('getRowData', i);

                //set background style if Payment = Account
                if (rowData['payment'] == 'Acc') {
                    $('#dispatch').jqGrid('setRowData', i, false, "yellow");
                }

                if (rowData['payment'] == 'CC') {
                    $('#dispatch').jqGrid('setRowData', i, false, "purple");
                }

                if (rowData['cartype'] == 'Est') {
                    $('#dispatch').jqGrid('setRowData', i, false, "green");
                }
                if (rowData['cartype'] == '8B' || rowData['cartype'] == 'Bus') {
                    $('#dispatch').jqGrid('setRowData', i, false, "red");
                }
                if (rowData['car'] == '00') {
                    $('#dispatch').jqGrid('setRowData', i, false, "cancel");
                }
            }
        },
        pager: "#pager",
        loadui: 'disable',
        rowNum: 50,
        rowList: [10, 20, 30],
        sortname: "invid",
        sortorder: "desc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        width: null,
        shrinkToFit: false,
        height: 647,
        scrollOffset: 0,
        altRows:true,
        altclass:'myAltRowClass',
        onSelectRow: function (id, status) {
            $('#txt-car-number').focus();
            $('body').keyup(function (e) {

                if (status && e.keyCode == 66 && $("#booking-docket").dialog("isOpen") === false) {

                    populateDocket();
                    $("#booking-docket").dialog('open');

                }

            });
        },

        gridComplete: function () {
            $("#dispatch").setSelection(0, true);   
        },

    });

    $("#dispatch").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){

         populateDocket();

         $("#booking-docket").dialog('open');
    }});

    $("#dispatch").jqGrid('bindKeys');

    function populateDocket() {

        var rowId =$("#dispatch").jqGrid('getGridParam','selrow');  
        var rowData = jQuery("#dispatch").getRowData(rowId);
        var bookingdatetime = rowData['bookingdatetime'];  
        var car = rowData['car']; 
        var fromno = rowData['fromno']; 
        var fromstreet = rowData['fromstreet']; 
        var frompostcode = rowData['frompostcode']; 
        var tono = rowData['tono']; 
        var tostreet = rowData['tostreet']; 
        var topostcode = rowData['topostcode'];  
        var customerfare = rowData['customerfare'];  
        var passname = rowData['passname'];  
        var cartype = rowData['cartype'];  
        var tel = rowData['tel'];  
        var comments = rowData['comments']; 
        var accountno = rowData['accountno'];
        var allowtime = rowData['allowtime'];
        var tariff = rowData['tarif'];
        var email = rowData['emailaddress'];
        var driverFare = rowData['driverfare'];
        var driverExtras = rowData['driverextras'];
        var customerExtras = rowData['customerextras'];
        var driver = rowData['driver'];
        var commentsdrv = rowData['comments1'];
        var referenceno = rowData['referenceno'];
        var payment = rowData['payment'];
        var accountname = rowData['customer'];
        var flightno = rowData['flightno'];
        var prebook = rowData['prebooking'];
        var bookedby = rowData['bookedby'];

        var date = bookingdatetime.split(' ');
        var hour = date[1].substr(0,2)
        var minute = date[1].substr(6,5)

         $('#txt-date').val(date[0]);
         $('#txt-hour').val(hour);
         $('#txt-min').val(minute);
         $('#txt-car').val(car);
         $('#txt-pickup-hn').val(fromno);
         $('#txt-pickup').val(fromstreet);
         $('#txt-destination-hn').val(tono);
         $('#txt-destination').val(tostreet);
         $('#txt-client-fare').val(customerfare);
         $('#txt-passenger').val(passname);
         $('#txt-cartype').val(cartype);
         $('#txt-telephone').val(tel);
         $('#txt-general').val(comments);
         $('#txt-account').val(accountno);
         $('#txt-lead').val(allowtime); 
         $('#txt-tariff').val(tariff);
         $('#txt-email').val(email);
         $('#txt-drv-fare').val(driverFare);
         $('#txt-account-name').val(accountname);
         $('#txt-driver').val(driver); 
         $('#txt-office').val(commentsdrv); 
         $('#p-reference-no').html('-'+referenceno+'-');
         $('#txt-payment').val(payment);
         $('#txt-flight-no').val(flightno);
         $('#txt-prebook').val(prebook);
         $('#txt-bookedby').val(bookedby);

    }

    // Navigate Grids

    $(document).keypress(function(e) {

    if(e.keyCode == 40) { //down arrow
     $('#nextElementId').click();
    }

    if(e.keyCode == 38) { //up arrow
     $('#previousElementId').click();
    }

    });

    $(document).keypress(function(e)
        {
            if(e.keyCode == 38 || e.keyCode == 40)  //up/down arrow override
            {
                var gridArr = $('#dispatch').getDataIDs();
                var selrow = $('#dispatch').getGridParam("selrow");
                var curr_index = 0;
                for(var i = 0; i < gridArr.length; i++)
                {
                    if(gridArr[i]==selrow)
                        curr_index = i;
                }

                if(e.keyCode == 38) //up
                {
                    if((curr_index-1)>=0)
                        $('#dispatch').resetSelection().setSelection(gridArr[curr_index-1],true);
                }
                if(e.keyCode == 40) //down
                {
                    if((curr_index+1)<gridArr.length)
                        $('#dispatch').resetSelection().setSelection(gridArr[curr_index+1],true);
                }
            }

        });

XML DATA: -

<?xml version="1.0"?>
<joblist resultcount="100">
<job id="0">
<pickup>26 CHIPPENHAM MEWS W9 2AN</pickup><dropoff>BREWER STREET W1F 0RJ</dropoff><bookingdatetime>14/05/2014 10:29:19</bookingdatetime><car></car><jbmessage></jbmessage><zone>MOUNTAIN</zone><customerfare>12</customerfare><passname>ele</passname><cartype>Car</cartype><tel>07771764901</tel><comments></comments><accountno></accountno><allowtime>10</allowtime><tarif>1</tarif><emailaddress></emailaddress><driverfare>12</driverfare><driverextras>0</driverextras><customerextras>0</customerextras><driver></driver><comments1></comments1><referenceno>221194</referenceno><payment>Cash</payment><fromno>26</fromno><fromstreet>CHIPPENHAM MEWS</fromstreet><frompostcode>W9 2AN</frompostcode><tono></tono><tostreet>BREWER STREET</tostreet><topostcode>W1F 0RJ</topostcode><prebooking>X</prebooking><customer></customer><flightno></flightno><bookedby>SAJJAD</bookedby><fromzoneno>27</fromzoneno><tozoneno>29</tozoneno></job><job id="1"><pickup>7 FOSBURY MEWS W23JE</pickup><dropoff>HEATHROW TER(T5) TW6 2GA</dropoff><bookingdatetime>13/05/2014 20:57:40</bookingdatetime><car>4</car><jbmessage>PAloc</jbmessage><zone>BALDWIN</zone><customerfare>41</customerfare><passname>BLOECKER</passname><cartype>MPV</cartype><tel>07435358308</tel><comments></comments><accountno></accountno><allowtime>15</allowtime><tarif>2</tarif><emailaddress></emailaddress><driverfare>41</driverfare><driverextras>0</driverextras><customerextras>0</customerextras><driver></driver><comments1></comments1><referenceno>220938</referenceno><payment>Cash</payment><fromno>7</fromno><fromstreet>FOSBURY MEWS</fromstreet><frompostcode>W23JE</frompostcode><tono></tono><tostreet>HEATHROW TER(T5)</tostreet><topostcode>TW6 2GA</topostcode><prebooking>X</prebooking><customer></customer><flightno></flightno><bookedby>SHEERAZ</bookedby><fromzoneno>21</fromzoneno><tozoneno>196</tozoneno>
</job>
</joblist>

1 个答案:

答案 0 :(得分:2)

您需要使用setSelectionsetTimeout的其他参数,而不是在reloadGrid内使用current:true。有关详细信息,请参阅the answer

更新gridComplete的代码似乎是您遇到问题的原因:

$("#dispatch").setSelection(0, true);   

重新加载到id="0"的行后,它会重置网格的选择。

我强烈建议您将loadComplete的代码替换为更有效的rowattr回调。有关相应的代码示例,请参阅the answer

此外,您不应在每行选择上绑定$('body').keyup。在您绑定(注册)越来越多的新keyup事件句柄的方式中,而不解除前一个。我不确定您要在代码部分中执行什么操作,但您可能应该将代码移到<{1}}回调的之外。

创建网格后,我没有看到任何理由设置onSelectRow ondblClickRow。相反,您可以在创建网格期间直接在jqGrid选项列表中包含setGridParam回调(就像您定义了ondblClickRowloadCompleteonSelectRow回调一样)。

我建议您在任何jqGrid回调中使用gridComplete而不是$(this)