Explication détaillée de la colonne de boutons personnalisés Easyui Datagrid

En raison des exigences lorsque vous travaillez sur un projet, il est nécessaire d'ajouter une colonne d'opération à la fin du tableau. EasyUI ne semble pas fournir cette fonction. Personnalisons la colonne des boutons et implémentons le code. article. J'espère que cela pourra vous aider.

Version : jQuery easyUI 1.3.2

Mon implémentation ici est sous forme HTML, la méthode js n'a pas encore été utilisée

La première est la partie HTML

<table id="dg" title="学生信息" class="easyui-datagrid" 
      url="${ctx}listStudent.do" 
      toolbar="#toolbar" pagination="true" 
      rownumbers="false" fitColumns="true" singleSelect="true"> 
    <thead> 
      <tr> 
        <th data-options="field:&#39;stuNo&#39;,sortable:true,width:20">学号</th> 
        <th data-options="field:&#39;name&#39;,width:20">姓名</th> 
        <th data-options="field:&#39;gender&#39;,width:20,formatter:formatGender">性别</th> 
        <th data-options="field:&#39;nationality&#39;,width:20">名族</th> 
        <th data-options="field:&#39;address&#39;,width:50,formatter:formatAddr">家庭地址</th> 
        <th data-options="field:&#39;mobile&#39;,width:20">手机号</th> 
        <th data-options="field:&#39;birthday&#39;,width:20">出生日期</th> 
        <th data-options="field:&#39;registDate&#39;,sortable:true,width:20">入学时间</th> 
        <th data-options="field:&#39;_operate&#39;,width:80,align:&#39;center&#39;,formatter:formatOper">操作</th> 
      </tr> 
    </thead> 
  </table> 
<th data-options="field:&#39;_operate&#39;,width:80,align:&#39;center&#39;,formatter:formatOper">操作</th>

Faites attention à la partie rouge, qui est notre colonne opération. Vous pouvez choisir le nom du champ comme vous le souhaitez. Ici, je suis _operate. function

function formatOper(val,row,index){ 
  return &#39;<a href="#" rel="external nofollow" onclick="editUser(&#39;+index+&#39;)">修改</a>&#39;; 
}

Il y a trois paramètres dans la fonction formatOper(), val fait référence à la valeur de la cellule actuelle, de la ligne, de l'objet de la ligne actuelle, indexe l'index de la ligne actuelle. Ici, nous avons besoin de cet index

I Cet index est passé dans une fonction appelée editUser Pourquoi avons-nous besoin de passer cet index ?

Lisez la documentation easyUI. J'ai trouvé que datagrid a une méthode appelée selectRow

function editUser(index){ 
  $('#dg').datagrid('selectRow',index);// 关键在这里 
  var row = $('#dg').datagrid('getSelected'); 
  if (row){ 
    $('#dlg').dialog('open').dialog('setTitle','修改学生信息'); 
    $('#fm').form('load',row); 
    url = '${ctx}updateStudent.do?id='+row.id; 
  } 
}

Sa fonction est de sélectionner manuellement. les lignes du tableau. Le paramètre est la valeur de l'index, à partir de 0

selectRow index Select a row, the row index start with 0.

comme ça , on peut obtenir les données correspondant à la ligne cliquée par la souris en temps réel

Ces deux phrases servent à obtenir la ligne sélectionnée

$('#dg').datagrid('selectRow',index);
var row = $('#dg').datagrid('getSelected');

L'effet spécifique est tel qu'indiqué dans la figure

Recommandations associées :

Exemple d'explication détaillée de l'ajout de boutons d'opération pour chaque ligne de données dans DataGrid d'EasyUI

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

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!