JEasyUI sorting kolom datagrid

28. August 2014 - 9:36 sugeng
Tags: 

Berikut ini hasil belajar saya dalam membuat datagrid yang datanya diambil dari sebuah controller, dan datagrid ini dapat disort.

Beberapa hal yang perlu diperhatikan adalah :

  • pada deklarasi table
    • opsi url : digunakan untuk menunjukkan sumber data
    • opsi remotesort : digunakan untuk melakukan pengurutan data menggunakan data yang tertampil, bukan data dari server
    • opsi multisort : digunakan agar pengurutan dapat dilakukan pengurutan data menggunakan beberapa kolom

  • pada deklarasi header tabel :
    • pada data-options diisikan opsi : sortable:true

berikut ini adalah script contohnya :

<table id      ="dg_dftMatakuliah" 
       title   ="Daftar Matakuliah" 
       class   ="easyui-datagrid" 
       fit     ="true"
       url     ="<?=base_url();?>seminar/getfrs"
       toolbar ="#toolbar1" 
       pagination="true"
       rownumbers="true" 
       fitColumns="true" 
       singleSelect="true"
       data-options="remoteSort:false,multiSort:true,">


<thead>
   <tr> 
      <th field="id"  width="10%">ID</th>
      <th field="kodemk" width="15%" data-options="sortable:true">Kode MK</th>
      <th field="namamk"   width="40%" data-options="sortable:true">Matakuliah</th>
      <th field="sks" width="10%">SKS</th>
      <th field="kelas"  width="10%">Kelas</th>
   </tr>
</thead>
</table>