jqGrid paramètre multiselect checkbox id et nom à une valeur différente

Question

Je viens d'ajouter jqGrid libre à mon application Web ASP.NET MVC. Whist il fonctionne très bien pour la plupart, je voudrais définir les valeurs pour les attributs "id" et "name" sur les cases à cocher multiselect à une valeur de colonne Id d'une colonne différente dans le tableau?

lieu les cases à cocher sont définies comme suit:

<input type="checkbox" id="jqg_list2_jqg30" class="cbox" name="jqg_list2_jqg30" aria-checked="false"> 

Comment puis-je remplacer le jqg_list2_jqg30?

J'ai suivi cette démo où l'identifiant et le nom des attributs sur les cases à cocher sont définis correctement, mais je ne vois pas ce que je fais différemment - http://www.trirand.com/blog/jqgrid/jqgrid.html

Ceci est la logique pour jqGrid

$("#list2").jqGrid({ 
     url: 'https://localhost:44319/Package/GetPackages/2', 
     datatype: "json", 
     contentType: "application/json; charset-utf-8", 
     mtype: 'GET', 
     colNames: ['Id', 'Name', 'Description'], 
     colModel: [ 
      { name: 'Id', index: 'Id', width: 55, sorttype: "int" }, 
      { name: 'Name', index: 'Name', width: 90, searchoptions: { "sopt": ["bw", "eq"] } }, 
      { name: 'Description', index: 'Description', width: 90 }     
     ], 
     rowNum: 25, 
     rowList: [25, 50], 
     pager: '#pager2', 
     toppager: true, 
     sortname: 'Id', 
     viewrecords: true, 
     height: "auto", 
     sortorder: "asc", 
     multiPageSelection: true, 
     multiselect: true, 
     selarrrow: [], 
     caption: "JSON Example", 
     loadonce: true, 
     jsonReader: { repeatitems: false } 
    }); 
    jQuery("#list2").jqGrid('navGrid', '#pager2', 
     { edit: false, add: false, del: false, search: true, view: false, refresh: true }); 
    jQuery("#m1").click(function() { 
     var s; 
     s = jQuery("#list2").jqGrid('getGridParam', 'selarrrow'); 
     alert(s); 
    }); 

Je sais que je pourrais écrire une certaine logique personnalisée pour le faire mais je ne pense pas que ce soit nécessaire comme le montre l'exemple ci-dessus et est quelque chose qui devrait fonctionner hors de la boîte?

Merci d'avance.

Answer 1

Je pense qu'il y a quelques malentendus communs qui suivent votre question. Je suppose que vous obtenez les identifiants des éléments sélectionnés en utilisant jQuery("#list2").jqGrid('getGridParam', 'selarrrow') et ensuite vous devez obtenir informations détaillées sur les éléments sélectionnés: "id" et "nom".

Le premier problème est le rowid de votre grille. Vous n'incluez aucune donnée de test retournée par url: 'https://localhost:44319/Package/GetPackages/2', mais je peux deviner que c'est un tableau d'éléments comme {"Id": 123, "Name": "Some name", "Description": "Some description"}, où la valeur de Id provient de la base de données et toutes les valeurs sont unique. L'organisation interne de jqGrid nécessite que chaque ligne de la grille (chaque <tr> élément de la table HTML avec les données principales) a l'attribut id avec une valeur unique. On nomme la valeur de l'attribut id comme "rowid". Par défaut, jqGrid examine les données d'entrée pour la propriété id et utilise les valeurs comme rowid. Si vous utilisez Id au lieu de id alors vous pouvez ajouter jsonReader: { id: "Id" } pour résoudre le problème et informer jqGrid de l'utiliser comme entrée des rowids. Vous pouvez également configurer les paramètres Newtonsoft.Json de votre application ASP.NET MVC pour attribuer ContractResolver = new CamelCasePropertyNamesContractResolver();. L'emplacement exact de l'affectation dans le code dépend de la version d'ASP.NET MVC que vous utilisez. The answer indique où vous pouvez affecter les paramètres de configuration dans ASP.NET Core. Personnellement, j'utilise de tels paramètres car j'essaie de suivre les conversions par nom standard de C# et JavaScript.

Une option de plus que vous avez est d'ajouter key: true à la colonne Id. Il fera presque la même chose que jsonReader: { id: "Id" }.

Si vous avez le rowid (ou le tableau de rowids par jQuery("#list2").jqGrid('getGridParam', 'selarrrow')) alors vous pouvez facilement obtenir la valeur de n'importe quelle colonne ou la valeur des propriétés de l'élément de données correspondant. Si vous utilisez loadonce: true, les éléments des données renvoyées par le serveur seront enregistrés localement dans le paramètre data, comme dans le cas de l'utilisation datatype: "local". Vous pouvez facilement obtenir l'élément de données en utilisant la méthode getLocalRow.Vous pouvez modifier le code

jQuery("#m1").click(function() { 
    var s; 
    s = jQuery("#list2").jqGrid('getGridParam', 'selarrrow'); 
    alert(s); 
}); 

à

jQuery("#m1").click(function() { 
    var $grid = jQuery("#list2"), i, item, 
     ids = $grid.jqGrid("getGridParam", "selarrrow"); 

    for (i = 0; i < ids.length; i++) { 
     item = $grid.jqGrid("getLocalRow", ids[i]); 
     alert("rowid=" + ids[i] + 
      "\nId=" + item.Id + 
      "\nName=" + item.Name + 
      "\nDescription=" + item.Description); 
    } 
}); 

Soit dit en passant, je vous recommande de supprimer index inutiles propriétés de toutes les colonnes (de colModel) et de supprimer certaines options de jqGrid avec des valeurs par défaut (mtype: 'GET'height: "auto", sortorder: "asc", selarrrow: []). Je vous recommande de supprimer div div <div id="pager2"></div> de votre page HTML et d'utiliser pager: true au lieu de pager: '#pager2'. JqGrid gratuit va générer le div pour la page de la même manière que pour le toppager (voir toppager: true). Cela simplifie le code. Vous pouvez obtenir le sélecteur d'identifiant du pager généré (si vous en avez besoin) en utilisant jQuery("#list2").jqGrid('getGridParam', 'pager'), mais on n'en a pas besoin dans la plupart des cas. Au lieu d'utiliser

jQuery("#list2").jqGrid('navGrid', '#pager2', {...}); 

vous pouvez utiliser simplement

jQuery("#list2").jqGrid('navGrid', {...}); 

qui ajoutera des boutons de navigateur pour toutes les pages de la grille.