Question

我有一个jgGrid，其中我在页面加载时选择了第一行默认值。（所选行突出显示为黄色）。现在，当我在同一个jqGrid中选择其他行时，当前选定的行和默认选定的行都以黄色突出显示。理想情况下，当用户选择另一行时，先前选择的行不应突出显示为黄色。

以下是更快解释的快照：

默认选中的行突出显示黄色（在页面加载中）： enter image description here

当前选中并默认选中的行BOTH突出显示为黄色： enter image description here

以下是我的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作为参数。如果正确填充网格，则rowid应与数据库表中包含数据的id具有相同的值。

只有当jqGrid具有错误的输入数据且不包含id信息时，jqGrid才必须使用一些本地生成的唯一ID。由于旧版jqGrid的兼容性问题，它仍然使用数字1,2,3作为rowid。

什么是rowid？网格基于HTML <table>构建。表的主体具有HTML中<tr>的行。 jqGrid的实现必须为id元素的<tr>属性（行的id）分配一些唯一值。将文档中的id值命名为rowid。

在您的情况下，您应该执行的操作包括id: "referralId"内部使用的jsonReader或{更好的两者>在key: true列的定义中包含referralId属性：

{ 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);
    }
}

（请参阅my answer，其中我描述了为什么我建议使用loadComplete代替gridComplete）

我希望在改变后你所描述的问题会消失。

在jqGrid中选择另一行时，默认选定行的颜色不会更改

1 个答案: