JqG​​rid：使用 addRowData 加载数据后只能选择最后一行

Question

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

Answer 1

我想我对自己的答案有自己的回应，我在这个周末经历了它。 事实上，我有一个“OnSelect”事件，上面的快照中没有显示，它试图从选定的行中捕获键的值。但是在我的 JqGrid 中，没有键，我所有的列都有“键：假”，因此它混淆了事件。

我的周末经历在其他地方，但行为相同。这次我从我的数据库中的一个表中填充数据，该表有 2 个组合列作为主键。填充后，只要我不从我的数据库中镜像相同的键，JqGrid 就无法处理它。

Answer 2

简答；确保您只有一个“key”属性等于 true 的列。