在jqGrid中選擇另一行時，默認選擇的行的顏色不變

Question

我有一個jgGrid，其中使第一行默認為頁面加載時選擇的（所選行突出顯示為黃色）。 現在，當我在同一jqGrid中選擇其他行時，當前選中的行和默認選中的行都以黃色突出顯示。 理想情況下，當用戶選擇另一行時，先前選擇的行不應突出顯示為黃色。

以下是快照，可以更好地進行說明：

默認選中的行以黃色突出顯示（在頁面加載中）：

當前選中和默認選中行都突出顯示為黃色：

下面是我的jqGrid代碼：

$("#discActionHistGrid").jqGrid({
    url:contextRoot+'discActHist',
    datatype: 'json',
    jsonReader: {repeatitems: false},
    mtype: 'POST',
    colNames: ['Record ID','Close date','Final Action','Summary','Title','Council','Retraction'],
    colModel: [
               { name: 'referralId', index: 'referralId', width: 25 },
               { name: 'closureDate', index: 'closureDate', width: 30, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}},                   
               { name: 'finalAction', index: 'finalAction', width: 30 },
               { name: 'summary', index: 'summary', width: 50, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;line-height: 1.3em;"'; } },
               { name: 'title', index: 'title', width: 30 },
               { name: 'councilNm', index: 'councilNm', width: 30 },
               { name: 'retract', index: 'retract', width: 30, formatter: function (cellvalue, options, rowObject) {return '<a href="'+ contextRoot +'dart/approved">Retract</a>';} }
    ],loadError: function(xhr,st,err) {
        alert(err);
    },gridComplete: function() {
        $(this).setSelection(1, true);
    },onSelectRow : function(rowid, status, e) {
        var selRow = $(this).getGridParam("selrow");
        var selReferralId = $(this).getCell(selRow, 'referralId'); 
        $("#referralDetailsTab").load(contextRoot+"refDetailsTab?refId=" + selReferralId );
    },
    pager: '#discActionHistPager',
    sortorder: 'desc',
    sortname: 'closureDate',
    gridview: true,
    viewrecords: true,
    loadonce: true,
    hoverrows : true,
    autowidth: true,
    height: 'auto',
    rowNum: 3,
    shrinkToFit: true,
    altRows:true
});

$("#discActionHistGrid").jqGrid('navGrid','#discActionHistPager',
   {
    edit:false,
    add:false,
    del:false,
    search:false,
    refresh:false
});

誰能幫我這個忙嗎？

在Oleg的建議下編輯代碼：

$("#discActionHistGrid").jqGrid({
    url:contextRoot+'discActHist',
    datatype: 'json',
    jsonReader: {repeatitems: false, id: "referralId"},
    mtype: 'POST',
    colNames: ['Record ID','Close date','Final Action','Summary','Title','Council','Retraction'],
    colModel: [
               { name: 'referralId', index: 'referralId', key: true, width: 25 },
               { name: 'closureDate', index: 'closureDate', width: 30, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}},                   
               { name: 'finalAction', index: 'finalAction', width: 30 },
               { name: 'summary', index: 'summary', width: 50, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;line-height: 1.3em;"'; } },
               { name: 'title', index: 'title', width: 30 },
               { name: 'councilNm', index: 'councilNm', width: 30 },
               { name: 'retract', index: 'retract', width: 30, formatter: function (cellvalue, options, rowObject) {return '<a href="'+ contextRoot +'dart/approved">Retract</a>';} }
    ],loadComplete: function() {
        if (this.rows.length > 1) {
            // select the first row of the grid
            $(this).jqGrid("setSelection", this.rows[1].id, true);
        }
        referralsCnt = $(this).getGridParam("records");
        rowCount = $(this).getGridParam("reccount");            
        if(referralsCnt > rowCount) {
            $("#viewAllReferrals").show();
        }
        $(this).triggerHandler("reloadGrid");   
    },loadError: function(xhr,st,err) {
        alert(err);
    },onSelectRow : function(rowid) {
        $("#referralDetailsTab").load(contextRoot + "refDetailsTab?refId=" + rowid);
    },
    pager: '#discActionHistPager',
    sortorder: 'desc',
    sortname: 'closureDate',
    gridview: true,
    viewrecords: true,
    loadonce: true,
    hoverrows : true,
    autowidth: true,
    height: 'auto',
    rowNum: 3,
    shrinkToFit: true,
    altRows:true
});

樣本JSON數據：

{"rows":[{"referralId":"2345","closureDate":1366395788927,"finalAction":"","summary":"","title":"TitleName","councilNm":"CouncilName"},{"referralId":"23455660","closureDate":1366395788927,"finalAction":"Reprimand","summary":"Reprimand and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"},{"referralId":"23455661","closureDate":1366395788927,"finalAction":"Reprimand","summary":"Reprimand and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"},{"referralId":"23455662","closureDate":1366395788927,"finalAction":"Reprimand","summary":"Reprimand and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"},{"referralId":"23455663","closureDate":1366395788927,"finalAction":"Reprimand","summary":"Reprimand and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"},{"referralId":"23455664","closureDate":1366395788927,"finalAction":"Reprimand","summary":"Reprimand and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"}],"page":0,"total":0,"records":0}

Answer 1

我認為對於rowid有很大的誤解，並且jqGrid 始終需要為每一行都具有唯一的id 。

jqGrid旨在顯示網格中來自后端（來自數據庫）的項目。 您確實如此。 特別是在jqGrid的大多數回調都將rowid作為parameter的情況下 。 如果正確填充網格，則rowid應該與保存數據的數據庫表中的id具有相同的值。

僅當jqGrid的輸入數據錯誤而沒有ID信息時，jqGrid才必須使用一些本地生成的唯一ID。 由於舊版本jqGrid的兼容性問題，它仍然使用數字1、2、3作為rowid。

什么是rowid？ 網格基於HTML <table>構建。 該表的主體具有HTML中<tr>行。 jqGrid的實現必須為<tr>元素的id屬性（行的id）分配一些唯一的值。 一個將文檔中的id值命名為rowid。

在這種情況下，您應該做的是在您使用的jsonReader內包含include id: "referralId" ，或者（最好兩者都）在referralId列的定義中包含key: true屬性：

{ name: 'referralId', key: true, width: 25, sorttype: 'integer' }

更改之后，您可以將onSelectRow回調的代碼簡化為

onSelectRow: function (rowid) {
    $("#referralDetailsTab").load(contextRoot + "refDetailsTab?refId=" + rowid);
}

或者

onSelectRow: function (rowid) {
    $("#referralDetailsTab").load(contextRoot + "refDetailsTab?refId=" +
        encodeURIComponent(rowid));
}

使代碼更整潔，並且與具有rowid的值無關。

jqGrid中沒有“默認選定的行”。 如果要在加載網格后在網格上選擇第一行，可以將gridComplete的代碼替換為以下內容

loadComplete: function () {
    if (this.rows.length > 1) {
        // select the first row of the grid
        $(this).jqGrid("setSelection", this.rows[1].id, true);
    }
}

（請參閱我的答案 ，其中我描述了為什么我建議使用loadComplete而不是gridComplete ）

希望更改后您所描述的問題會消失。