[share] Grid in PHP dengan JQuery

Beranda

...

Computer Stuff
[share] Grid in PHP dengan JQuery

kruakz

28-02-2012 23:38

[share] Grid in PHP dengan JQuery

Malam agan2 ane mau sharee tentang pembuatan grid di php ne gan

ya biar ilmu ane bermanfaat ane share aja ilmu yang sedikit aku punya tentang php grid ini.

PHPGRID

Spoiler for 1. sumbernya:

phpgrid

sebenernya ini gakjauh beda dari grid2 javascrpt lainya cuma ini saya modifikasi sedikit biar mudah penggunanya buat teman2 saya yang ingin mengunakan grid ini.
download dari sumbernya dulu dan ambil file2 ini

Spoiler for file:

jquery-ui-1.7.3.custom.css
ui.jqgrid.css
jquery-1.5.2.min.js
jquery-ui-1.8.10.custom.min.js
grid.locale-en.js
jquery.jqGrid.min.js
grid.import.fix.js

file gambar buat css nya gan di folder image

copykan ke project anda

contoh

Spoiler for contoh:

setelah itu saya membuat framework sendiri buat render grid ini biar lebih mudah gan hehehe
buat file baru contoh : digis-grid.js

Spoiler for digis-grid:

var lastSel;
function GridDigis(id){
this.grid = id;
this.colNames = [];
this.colId=[];
this.colAlign=[];
this.colWidth=[];
this.colModel=[];
this.url = "";
this.page="#page";
this.header="";
this.colAlign=[];
this.height = 300;
this.width = 500;
this.urlExport="";
this.rowId='';

this.setExcelURL=function(a){
this.urlExport=a;
}
this.setSizeGrid=function(x,y){
this.height = x;
this.width = y;
}
this.setHeader=function(s){
this.header = s;
}
this.setURL=function(s){
this.url = s;
}
this.setPage=function(s){
this.page = s;
}
this.setColNames=function(str){
//alert(str)
this.colNames=str.split(",");
}
this.setColId=function(str){
this.colId=str.split(",");
}
this.setColAlign=function(str){
this.colAlign=str.split(",");
}
this.setColWidth=function(str){
this.colWidth=str.split(",");
}

this.render=function(){

this.colLength=this.colNames.length;
for(var i=0;i<this.colLength;i++){
this.colModel.push({name:this.colId[i],index:this.colId[i],width:new Number(this.colWidth[i]),align:this.colAlign[i]});
}
var grid_orders = jQuery(this.grid).jqGrid({
url:this.url,
datatype:"json",
mtype:"GET",
colNames:this.colNames,
colModel:this.colModel,
pager: this.page,
rowNum:20,
rowList:[10,20,30],
sortname:"id",
sortorder:"asc",
viewrecords:true,
multiselect:false,
caption:this.header,
altRows:true,
scrollOffset:22,
rownumbers:false,
shrinkToFit:true,
autowidth:false,
hiddengrid:false,
scroll:false,
height:this.height,
width:this.width,
sortable:true,
gridview:true,
onSortCol: function(name,index){},
onSelectRow: function(id){this.rowid=id},
loadtext:"Loading Data ..."
});
jQuery(this.grid).jqGrid("navGrid", this.page,
{edit:false,add:false,del:false,view:true,search:false,excel:true}, {})
jQuery(this.grid).jqGrid("navButtonAdd",this.page,{caption:"",title:"Pencarian Data", buttonicon :"ui-icon-search",
onClickButton:function(){
grid_orders[0].toggleToolbar();
}
});
jQuery(this.grid).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
grid_orders[0].toggleToolbar();
jQuery(this.grid).jqGrid("navButtonAdd",this.page,{caption:"",title:"Export to EXCEL",
onClickButton:function(e){
try{
grid_orders.jqGrid("excelExport",{url:this.urlExport});
} catch (e) {
[removed]= this.urlExport;
}

}
});

//
}
this.reload=function(x){
jQuery(this.grid).setGridParam({url:x,mtype:"GET"}).trigger("reloadGrid");
jQuery(this.grid).setGridParam({url:this.url,mtype:"GET"}).trigger("reloadGrid");
}

this.getSelRows=function()
{
var rows = jQuery(this.grid).jqGrid("getGridParam","selarrrow");
return this.rowid;
}
}
function imageFormatter(cellValue, options, rowObject)
{
return "<img >";
}
// cellValue - the original value of the cell
// options - as set of options, e.g
// options.rowId - the primary key of the row
// options.colModel - colModel of the column
// cellObject - the HMTL of the cell (td) holding the actual value
function imageUnformatter(cellValue, options, cellObject)
{
return $(cellObject.html()).attr("originalValue");
}
function booleanFormatter(cellValue, options, rowObject)
{
var op;
op = $.extend({},options.colModel.formatoptions);
myCars=new Array();
//alert(op.No);
//mycars[cellValue]= op.boolean.No;
//mycars[cellValue]= op.boolean.Yes;
myCars[op.No]="No";
myCars[op.Yes]="Yes";
//alert(options[boolean]);
return myCars[cellValue];
}
function booleanUnformatter(cellValue, options, cellObject)
{ var op;
op = $.extend({},options.colModel.formatoptions);
//alert(op.No);
if(cellValue=="No")
return (op.No);
else
return (op.Yes);
//alert(op.boolean.Yes)
//return (op.boolean.cellValue);
// myCars=new Array();
// myCars["No"]='0';
// myCars["Yes"]=1;
//alert(myCars[cellValue]);
//alert(options.colModel.formatoptions[1]);
//return myCars[cellValue];
}
// display ajax reponse used for debug for inline edit
function aftersavefunc(rowid, d){}

Spoiler for contoh render grid:

<h2>Data Jurusan</h2>
<div id="warning"></div>
<div id="form_jur">
<form action="" method="post" class="niceform">
<table id="jurusan" style="margin-left: 30px;">
<tr>
<td><label for="jur">Nama Jurusan</label></td><td>:</td><td>
<input type="text" name="jur" id="jur" size="54" /></td></tr>
<td><label for="ket">Keterangan</label></td><td>:</td><td>
<textarea name="ket" id="ket" rows="3" cols="38"></textarea></td></tr>
<tr><td></td><td colspan="2" align="center">
<input type="button" name="Simpan">

<input type="button" name="Hapus" id="Hapus" value="Hapus" disabled="disabled" />

<input type="button" name="batal" id="batal"></td></tr>
</table>

</form>
</div>
<br />
<table id="grid1"></table>
<div id="page1"></div>

[removed]
function simpan(a){
if(valid("jur,ket","warning")){
grid.reload("master/data.php?act=simpan&jur;="+document.getElementById("jur").value+"&ket;="+document.getElementById("ket").value);
}
}

var grid = new GridDigis("#grid1");
grid.setPage("#page1");
grid.setSizeGrid(100,600);
grid.setHeader("Data Jurusan");
grid.setColNames("No,Nama Jurusan,Keterangan");
grid.setColId(",jurusan,ket");
grid.setColAlign("center,left,left");
grid.setColWidth("50,100,400");
grid.setURL("master/data.php");
grid.render();

[removed]

dan contoh hasil

Spoiler for hasil: