ya biar ilmu ane bermanfaat ane share aja ilmu yang sedikit aku punya tentang php grid ini.
sebenernya ini gakjauh beda dari grid2 javascrpt lainya cuma ini saya modifikasi sedikit biar mudah penggunanya buat teman2 saya yang ingin mengunakan grid ini.
setelah itu saya membuat framework sendiri buat render grid ini biar lebih mudah gan hehehe
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){}
<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]
