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