JqGrid：使用addRowData加载数据后只能选择最后一行
问题描述：
我使用addRowData函数从数组中加载一些数据。但是当我想选择一行时，只有最后一行是，没有其他人可以被选择。 我从我的其他页面使用相同的代码工作正常，除了我加载我的数据从我的控制器路由。 下面是代码：`JqGrid：使用addRowData加载数据后只能选择最后一行
<script>
var myJqGridData = @Html.Raw(Json.Encode(Model));
var listOfColumnModels = [];
var listOfColumnNames = [];
for (var prop in myJqGridData[0]) {
if (myJqGridData[0].hasOwnProperty(prop)) {
listOfColumnNames= ["Code du Demandeur", "Nom", "Prenoms", "Adresse", "Ville", "Code Postal",
"Province", "Téléphone 1", "Téléphone 2", "Téléphone 3", "Courriel 1", "Courriel 2",
"Courriel 3", "Date de Naissance", "Handicape?", "Référence", "Remarques", "Date d'Ouverture Dossier",
"Situation Matrimoniale", "Sexe", "Tranche de Revenu", "Occupation", "Scolarité", "Statut Légal",
"Communauté", "Source d'Information", "Source de Revenu", "Nom du Conseiller", "Prenoms du Conseiller", "Langue Maternelle"
];
listOfColumnModels = [
{ key: false, name: 'Code_Demandeur', width: 125, sortable: true, sorttype: "text", index: "Code_Demandeur" },
{ key: false, name: 'Nom_Demandeur', width: 150, sortable: true, sorttype: "text", index: "Nom_Demandeur" },
{ key: false, name: 'Prenoms_Demandeur', width: 150, sortable: true, sorttype: "text", index: "Prenoms_Demandeur" },
{ key: false, name: 'Adresse_Demandeur', width: 200, sortable: false, index: "Adresse_Demandeur" },
{ key: false, name: 'Nom_Ville', width: 100, sortable: true, sorttype: "text", index: "Nom_Ville" },
{ key: false, name: 'CodePostal_Demandeur', width: 75, sortable: true, sorttype: "text", index: "CodePostal_Demandeur" },
{ key: false, name: 'Nom_Province', width: 100, sortable: false, index: "Nom_Province" },
{ key: false, name: 'Tel1_Demandeur', width: 100, sortable: false, index: "Tel1_Demandeur" },
{ key: false, name: 'Tel2_Demandeur', width: 100, sortable: false, index: "Tel2_Demandeur" },
{ key: false, name: 'Tel3_Demandeur', width: 100, sortable: false, index: "Tel3_Demandeur" },
{ key: false, name: 'Courriel1_Demandeur', width: 150, sortable: false, index: "Courriel1_Demandeur" },
{ key: false, name: 'Courriel2_Demandeur', width: 150, sortable: false, index: "Courriel2_Demandeur" },
{ key: false, name: 'Courriel3_Demandeur', width: 150, sortable: false, index: "Courriel3_Demandeur" },
{ key: false, name: 'Date_Naissance_Demandeur', width: 100, sortable: true, sorttype: "date", align: 'right', index: "Date_Naissance_Demandeur" },
{ key: false, name: 'Handicape', width: 75, sortable: true, sorttype: "text", index: "Handicape" },
{ key: false, name: 'Reference', width: 100, sortable: true, sorttype: "text", index: "Reference" },
{ key: false, name: 'Remarques_Demandeur', width: 150, sortable: false, index: "Remarques_Demandeur" },
{ key: false, name: 'Date_Ouverture_Dossier', width: 100, sortable: true, sorttype: "date", align: 'right', index: "Date_Ouverture_Dossier" },
{ key: false, name: 'Nom_SituationMatrimoniale', width: 150, sortable: true, sorttype: "text", index: "Nom_SituationMatrimoniale" },
{ key: false, name: 'Nom_Sexe', width: 75, sortable: true, sorttype: "text", index: "Nom_Sexe" },
{ key: false, name: 'Nom_TrancheRevenu', width: 100, sortable: true, sorttype: "text", align: 'right', index: "Nom_TrancheRevenu" },
{ key: false, name: 'Nom_Occupation', width: 150, sortable: true, sorttype: "text", index: "Nom_Occupation" },
{ key: false, name: 'Nom_Scolarite', width: 150, sortable: true, sorttype: "text", index: "Nom_Scolarite" },
{ key: false, name: 'Nom_StatutLegal', width: 150, sortable: true, sorttype: "text", index: "Nom_StatutLegal" },
{ key: false, name: 'Nom_Communaute', width: 150, sortable: true, sorttype: "text", index: "Nom_Communaute" },
{ key: false, name: 'Nom_SourceInformation', width: 150, sortable: true, sorttype: "text", index: "Nom_SourceInformation" },
{ key: false, name: 'Nom_SourceRevenu', width: 150, sortable: true, sorttype: "text", index: "Nom_SourceRevenu" },
{ key: false, name: 'Nom_Conseiller', width: 100, sortable: true, sorttype: "text", index: "Nom_Conseiller" },
{ key: false, name: 'Prenoms_Conseiller', width: 100, sortable: true, sorttype: "text", index: "Prenoms_Conseiller" },
{ key: false, name: 'Nom_Langue', width: 100, sortable: true, sorttype: "text", index: "Nom_Langue" },
];
}
}
$(function() {
CreateJQGrid(myJqGridData, listOfColumnNames, listOfColumnModels, '@(ViewBag.titreRapport)');
});
function CreateJQGrid(myArraydata, colNoms, colModeles, titre) {
jQuery("#grid_ListeNomee").jqGrid({
datatype: 'clientSide',
colNames: colNoms,
colModel: colModeles,
rowNum: 100000,
gridview: true,
loadonce: true,
autowidth: true,
pager: $('#pager_ListeNomee'),
rowList: [5, 10, 20, 50, 100000],
rownumbers: true,
height: '100%',
width: 1000,
emptyrecords: "Pas d'enregistrement à afficher",
shrinkToFit: false,
multiselect: false,
sortname: 'Code_du_Demandeur',
sortorder: "asc",
loadComplete: function() {
$("option[value=100000]").text('Tout');
},
viewrecords: true,
caption: 'Liste des personnes qui tirent leur revenu principal de: ' + titre
});
for (var i = 0; i < myArraydata.length; i++){
var x = formatJsonDate(myArraydata[i].Date_Naissance_Demandeur);
myArraydata[i].Date_Naissance_Demandeur = (Number(x.slice(-4))>1900)? x : "" ;
x =formatJsonDate(myArraydata[i].Date_Ouverture_Dossier);
myArraydata[i].Date_Ouverture_Dossier = (Number(x.slice(-4))>1900)? x : "" ;
myArraydata[i].Handicape = (myArraydata[i].Handicape == true)? "OUI" : "" ;
jQuery("#grid_ListeNomee").addRowData("1", myArraydata[i]);
};
};
function formatJsonDate(jsonDate) {
var nais = new Date(parseInt(jsonDate.substr(6)));
var nais1 = new Date('1900-01-01');
if (nais.getTime() < nais1.getTime())
return '';
return nais.toLocaleDateString();
};
</script><style type="text/css">
.ui-jqgrid-btable .ui-state-highlight {
background: #003366;
}
.ui-jqgrid table.ui-jqgrid-htable th.ui-th-column input,
.ui-jqgrid table.ui-jqgrid-htable th.ui-th-column select {
background-color: lightcyan;
}
.ui-jqgrid-bdiv {
max-height: 500px;
}
</style>
@model IEnumerable<FEC.Models.VentilationDemandeurs>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="../Scripts/i18n/grid.locale-en.js"></script>
<script src="../Scripts/jquery.jqgrid.min.js"></script>
<body>
<table id="grid_ListeNomee"></table>
<div id="pager_ListeNomee"></div>
</body>
答
我想我有我自己的答案回应，我经历过这个周末。 事实上，我有一个“OnSelect”事件没有显示在上面的快照中，它试图从选定的行中捕获键的值。但在我的JqGrid中，没有键，我所有的列都有“key：false”，因此它会混淆事件。
我的周末经验是其他地方，但它有相同的行为。这一次，我从我的数据库中的一个表中填充数据，其中有两个组合列作为主键。一旦填充完毕，只要我不从我的数据库镜像相同的密钥，JqGrid就无法处理它。
答
简答题;确保你只有一个'key'属性等于true的列。