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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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:'stuNo',sortable:true,width:20" >学号</th>
<th data-options= "field:'name',width:20" >姓名</th>
<th data-options= "field:'gender',width:20,formatter:formatGender" >性别</th>
<th data-options= "field:'nationality',width:20" >名族</th>
<th data-options= "field:'address',width:50,formatter:formatAddr" >家庭地址</th>
<th data-options= "field:'mobile',width:20" >手机号</th>
<th data-options= "field:'birthday',width:20" >出生日期</th>
<th data-options= "field:'registDate',sortable:true,width:20" >入学时间</th>
<th data-options= "field:'_operate',width:80,align:'center',formatter:formatOper" >操作</th>
</tr>
</thead>
</table>
<th data-options= "field:'_operate',width:80,align:'center',formatter:formatOper" >操作</th>
|
Copier après la connexion
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
1 2 3 | function formatOper(val,row,index){
return & #39;<a href="#" rel="external nofollow" onclick="editUser('+index+')">修改</a>';
}
|
Copier après la connexion
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
1 2 3 4 5 6 7 8 9 | function editUser(index){
$(& #39;#dg').datagrid('selectRow',index);// 关键在这里
var row = $(& #39;#dg').datagrid('getSelected');
if (row){
$(& #39;#dlg').dialog('open').dialog('setTitle','修改学生信息');
$(& #39;#fm').form('load',row);
url = & #39;${ctx}updateStudent.do?id='+row.id;
}
}
|
Copier après la connexion
Sa fonction est de sélectionner manuellement. les lignes du tableau. Le paramètre est la valeur de l'index, à partir de 0
1 | selectRow index Select a row, the row index start with 0.
|
Copier après la connexion
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
1 2 | $(& #39;#dg').datagrid('selectRow',index);
var row = $(& #39;#dg').datagrid('getSelected');
|
Copier après la connexion
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!