1
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>