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

时间:2017-01-03 02:54:41

标签: jqgrid-asp.net

我使用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>
&#13;
<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>  
  
&#13;
@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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

我想我对自己的答案有所回应,而且我在本周末经历了这个问题。 实际上我有一个“OnSelect”事件,它没有显示在上面的快照中,它试图从所选行中捕获键的值。但是在我的JqGrid中,没有键,我的所有列都有“key:false”,因此它会混淆事件。

我的周末经历是其他地方,但它有相同的行为。这次我从我的数据库中的表中填充数据,该表有2个组合列作为主键。一旦填充,每当我不从我的数据库镜像相同的密钥时,JqGrid就无法处理它。

答案 1 :(得分:0)

简短回答;确保只有一个“key”属性等于true的列。