0

我有一个 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}
4

1 回答 1

0

我认为对于什么是 rowid 存在很大的误解，并且 jqGrid总是需要id对每一行都具有唯一性。

jqGrid 旨在在网格中显示来自后端（来自数据库）的项目。你的情况正是如此。特别是对于jqGrid 的大多数回调将 rowid 作为参数的情况。如果您正确填充网格，则 rowid 应该与保存数据的数据库表中的值相同id。

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

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

在您的情况下，您应该做的是在列的定义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);
    }
}

（见我的回答，我描述了为什么我推荐使用loadComplete而不是gridComplete）

我希望在更改后您描述的问题将消失。

于 2013-04-18T21:04:35.263 回答