Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung der benutzerdefinierten Schaltflächenspalte von Easyui Datagrid

小云云
Freigeben: 2018-01-01 10:36:30
Original
2743 Leute haben es durchsucht

Aufgrund der Anforderungen bei der Arbeit an einem Projekt ist es notwendig, am Ende der Tabelle eine Operationsspalte hinzuzufügen. Diese Funktion wird nicht bereitgestellt. Bitte beachten Sie diese Artikel. Ich hoffe, es kann Ihnen helfen.

Version: jQuery easyUI 1.3.2

Meine Implementierung hier ist in HTML-Form, die js-Methode wurde noch nicht verwendet

Der erste ist der HTML-Teil


<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>
Nach dem Login kopieren

Achten Sie auf den roten Teil, der unsere Operationsspalte ist. Sie können den Namen des Feldes nach Ihren Wünschen wählen. Der Schlüssel ist das FormatOper Funktion


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

Die Funktion formatOper() enthält drei Parameter: val bezieht sich auf den Wert der aktuellen Zelle, Zeile, des aktuellen Zeilenobjekts und den Index Hier benötigen wir diesen Index

I Dieser Index wird an eine Funktion namens editUser übergeben. Warum müssen wir einen Blick auf die Funktion editUser werfen?


Lesen Sie die easyUI-Dokumentation. Ich habe festgestellt, dass Datagrid eine Methode namens selectRow hat
function editUser(index){ 
  $(&#39;#dg&#39;).datagrid(&#39;selectRow&#39;,index);// 关键在这里 
  var row = $(&#39;#dg&#39;).datagrid(&#39;getSelected&#39;); 
  if (row){ 
    $(&#39;#dlg&#39;).dialog(&#39;open&#39;).dialog(&#39;setTitle&#39;,&#39;修改学生信息&#39;); 
    $(&#39;#fm&#39;).form(&#39;load&#39;,row); 
    url = &#39;${ctx}updateStudent.do?id=&#39;+row.id; 
  } 
}
Nach dem Login kopieren


Ihre Funktion besteht darin, manuell auszuwählen Die Zeilen der Tabelle sind der Indexwert, beginnend bei 0
selectRow index Select a row, the row index start with 0.
Nach dem Login kopieren

Auf diese Weise können wir die Daten, die der mit der Maus angeklickten Zeile entsprechen, in Echtzeit abrufen



Diese beiden Sätze sollen die ausgewählte Zeile erhalten
$(&#39;#dg&#39;).datagrid(&#39;selectRow&#39;,index);
var row = $(&#39;#dg&#39;).datagrid(&#39;getSelected&#39;);
Nach dem Login kopieren


Der spezifische Effekt ist wie in der Abbildung dargestellt

Verwandte Empfehlungen:


Beispiel für eine detaillierte Erklärung zum Hinzufügen von Bedienschaltflächen für jede Datenzeile im DataGrid von EasyUI

Detaillierte Erklärung für Datagrid in der EasyUi-Steuerung

Detaillierte Erläuterung der DataGrid-Bindungs-Json-Datenquellenmethode von EasyUI

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der benutzerdefinierten Schaltflächenspalte von Easyui Datagrid. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!