Integrasi Yii dengan JQuery EasyUI


JQuery EeasyUI merupakan plugin yang lengkap, selain support datagrid, panel, windows dsb, kelebihannya adalah mudah untuk digunakan,

Berikut adalah cara mengintegrasikan JQuery EasyUI dengan Yii Framework, saya lakukan di demo blog Yii Framework

1. Download library JQuery EasyUI,

2. Ekstrak file hasil download di bawah folder demo blog Yii Framework, setelah itu rename foldernya menjadi jeasyui

Image

3. Edit File PostController.php, yang ada difolder blog\protected\controller, dan tambahkan baris script berikut:

public function actionGetdata(){
header('Content-type:text/javascript;charset=UTF-8');
$rs = Post::model()->findAll();
$items = array();
foreach($rs as $row)
{
array_push($items, $row->getAttributes(array('id','title', 'content', 'tags')));
}
echo json_encode($items);
}

3. Buat file datagrid2.js, di folder blog\jeasyui\, isi dengan script berikut:


var products = [
{productid:'FI-SW-01',name:'Koi'},
{productid:'K9-DL-01',name:'Dalmation'},
{productid:'RP-SN-01',name:'Rattlesnake'},
{productid:'RP-LI-02',name:'Iguana'},
{productid:'FL-DSH-01',name:'Manx'},
{productid:'FL-DLH-02',name:'Persian'},
{productid:'AV-CB-01',name:'Amazon Parrot'}
];
function productFormatter(value){
for(var i=0; i if (products[i].productid == value) return products[i].name;
}
return value;
}
$(function(){
var lastIndex;
$('#tt').datagrid({
toolbar:[{
text:'append',
iconCls:'icon-add',
handler:function(){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('appendRow',{
itemid:'',
productid:'',
listprice:'',
unitprice:'',
attr1:'',
status:'P'
});
lastIndex = $('#tt').datagrid('getRows').length-1;
$('#tt').datagrid('selectRow', lastIndex);
$('#tt').datagrid('beginEdit', lastIndex);
}
},'-',{
text:'delete',
iconCls:'icon-remove',
handler:function(){
var row = $('#tt').datagrid('getSelected');
if (row){
var index = $('#tt').datagrid('getRowIndex', row);
$('#tt').datagrid('deleteRow', index);
}
}
},'-',{
text:'accept',
iconCls:'icon-save',
handler:function(){
$('#tt').datagrid('acceptChanges');
}
},'-',{
text:'reject',
iconCls:'icon-undo',
handler:function(){
$('#tt').datagrid('rejectChanges');
}
},'-',{
text:'GetChanges',
iconCls:'icon-search',
handler:function(){
var rows = $('#tt').datagrid('getChanges');
alert('changed rows: ' + rows.length + ' lines');
}
}],
onBeforeLoad:function(){
$(this).datagrid('rejectChanges');
},
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
}
});
});

4. Edit index.php, yang ada difolder blog\protected\views\post\, dan tambahkan baris script berikut dibaris pertama:
Image

5. Edit File screen.css, ada di blog\css\, berikan comment sesuai dengan gambar yang ada dibawah

Image

5. Hasilnya adalah sebagai berikut:

Selamat mencoba dan semoga berhasil ….

5 thoughts on “Integrasi Yii dengan JQuery EasyUI

  1. Terima kasih tutorialnya, mau tanya,,,

    Kalau coloum grid kita load gambar apakah bisa ??

    Misalnya, kalau kita pilih P, maka gambarnya A dan selain itu maka gambarnya B

    Terima Kasih

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s