2017-01-03 55 views
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>

回答

1

我想我有我自己的答案迴應,我經歷過這個週末。 事實上,我有一個「OnSelect」事件沒有顯示在上面的快照中,它試圖從選定的行中捕獲鍵的值。但在我的JqGrid中,沒有鍵,我所有的列都有「key:false」,因此它會混淆事件。

我的週末經驗是其他地方,但它有相同的行爲。這一次,我從我的數據庫中的一個表中填充數據,其中有兩個組合列作爲主鍵。一旦填充完畢,只要我不從我的數據庫鏡像相同的密鑰,JqGrid就無法處理它。

0

簡答題;確保你只有一個'key'屬性等於true的列。