Ambilgratis.com – kami mengumpulkan informasi yang terserak dan tersebar

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 🙂