我使用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>