JqGrid: после загрузки данных с помощью addRowData можно выбрать только последнюю строку

Я использовал функцию 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>


person Patrice    schedule 03.01.2017    source источник


Ответы (2)


Думаю, у меня есть ответ на свой ответ, и я испытал это в эти выходные. Фактически у меня есть событие «OnSelect», которое не показано на снимках выше, и оно пытается поймать значение ключа из выбранной строки. Но в моем JqGrid нет ключа, все мои столбцы имеют "ключ: ложь", поэтому это сбивает событие с толку.

Мои выходные были в другом месте, но было то же самое. На этот раз я заполнял данные из таблицы из моей базы данных, которая имела 2 комбинированных столбца в качестве первичного ключа. После заполнения JqGrid не мог справиться с этим, если я не отражал те же ключи из моей БД.

person Patrice    schedule 10.10.2017

Короткий ответ; Убедитесь, что у вас есть только один столбец с атрибутом key, равным true.

person Bassl Kokash    schedule 06.12.2017