Exemple détaillé d'ajout de boutons d'opération à chaque ligne de données dans DataGrid d'EasyUI

La grille de données d'Easyui ajoute un bouton d'opération après chaque colonne de données. Comment implémenter cette fonction ? L'éditeur ci-dessous vous apporte le code d'implémentation de l'ajout de boutons d'opération pour chaque ligne de données dans DataGrid d'EasyUI. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra vous aider.

En fait, il est très simple d'ajouter une ligne de colonnes personnalisées Lors de la déclaration de la grille de données en js, ajoutez le code suivant

{field:'operate',title:'操作',align:'center',width:$(this).width()*0.1, 
  formatter:function(value, row, index){ 
    var str = &#39;<a href="#" rel="external nofollow" name="opera" class="easyui-linkbutton" ></a>&#39;; 
    return str; 
}}

. Cette ligne de code est dans l'attribut colonnes est défini, et ce code doit être ajouté

onLoadSuccess:function(data){  
    $("a[name='opera']").linkbutton({text:'下订单',plain:true,iconCls:'icon-add'});  
},

Si vous ne l'ajoutez pas, le style du bouton n'apparaîtra pas dans la colonne opération, juste un hyperlien, ceux utilisant le bouton lien ou d'autres boutons peuvent être adaptés selon les besoins

L'effet final est le suivant

Après cela, vous pouvez faire des événements onclick sur la balise a, etc. Cela dépend de la situation

Recommandations associées :

Explication détaillée de Datagrid dans le contrôle EasyUi

Explication détaillée de la méthode de source de données Json de liaison DataGrid d'EasyUI

Modification en ligne de dataGrid dans EasyUI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!