berikut langkah untuk meload database menggunakan datagrid jeasyui
syaratnya
- membutuhkan library jquery
- membutuhkan library jeasyui
download dulu library jeasyui disini
berikut kodenya
load dulu kebutuhan librarynya
<script src="/jquery-1.11.2.min.js"></script> (ganti dnegan alamat jqueryanda download <a href="https://jquery.com/">disini</a>)
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
halaman htmlnya
<table id="dg" title="Menu Data Kategori" class="easyui-datagrid" style="width:700px;height:250px"
url="alamatloaddata"
toolbar="#toolbar" pagination="true" loadMsg="Loading!..."
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" hidden='true' width="50">ID</th>
<th field="kat" width="50">Kategori</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">Tambah Kategori</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Kategori</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Delete Kategori</a>
<span>Kategori:</span>
<input id="cari" style="line-height:26px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
<span style="float:right;padding:5px">
<a href="#" class="easyui-linkbutton" plain="true" onclick="reset()">Reset</a>
</span></div>
untuk load data dari database kedalam tabel ganti isi url dengan alamat data untuk diload
berikut file jsonnya
{
"1":{"id":"1","kat":"Barang (mobil, properti, komputer, sepatu dsb)"},
"2":{"id":"3","kat":"Hewan"},
"3":{"id":"102","kat":"Informasi (Event, Acara Kota, Bazaar, Pengobatan Gratis Dsb)"},
"4":{"id":"2","kat":"Jasa (katering, Event organizer, bengkel, dsb)"},
"5":{"id":"38","kat":"Lowongan Kerja"},
"6":{"id":"25","kat":"Properti (Tanah,Rumah,Ruko dsb)"},
"7":{"id":"4","kat":"Tanaman"}
}
dari file json tersebut diparsing dengan file datagrid pada kolom
<input name=”kat” class=”easyui-textbox” type=”text”> //ini ditampilkan
<input name=”id” type=”hidden”> // ini disembunyikan
beberapa contoh membuat json diatas dengan php
$db=koneksi ke mysql
$sql = "select * from tb_kategori where status ='a' and id_sub_kategori='0' order by kategori ASC";
$encode;
$db=connect_db();
$hasil = $db->query($sql) or die("Sistem penyimpanan bermasalah".$db->error);
$encode = array();
$nilai=1;
while($row=$hasil->fetch_assoc())
{
$encode[$nilai] = array( 'id' =>$row['id_kategori'],'kat'=> $row['kategori']);
$nilai++;
}
$db->close();
echo json_encode($encode);
hasilnya

semoga berguna 🙂