Skip to main content

CI + JQuery Grid

September 7, 2009 by work And studying

work And studying's picture

Hlo salam kenal..
saya sedang belajar membuat aplikasi Management data yang menggunakan CI dan JQuery Grid.
Namun saya bingung dalam Menerapkan JQgrid dengan Script CI, Mohon bila ada contoh simple aplikasi tolong di share.

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

saya mau

May 20, 2011 by eddy313, 11 weeks 4 hours ago
Comment: 8192

eddy313's picture

mau dong krm ke [email protected]

eddy

May 20, 2011 by eddy313, 11 weeks 4 hours ago
Comment: 8191

eddy313's picture

mau dong mas, krm ke [email protected]

contoh controller dan view

May 8, 2010 by girista, 1 year 12 weeks ago
Comment: 6833

girista's picture

untuk controller

class Profilekursus extends Controller {
 
	function Profilekursus(){
		parent::Controller();
		$this->url = 'profile/profilekursus/';
		$this->vPath = 'pages/profile/';
	}
	function index(){
 
		$content['jqGrid']['id'] = 'gridProfkursus-';
		$content['jqGrid']['pager'] = 'gridPagerProfkursus';
		$content['jqGrid']['caption'] = 'Riwayat kursus';
		$content['jqGrid']['url'] = site_url($this->url.'data/');
		$content['jqGrid']['editurl'] = site_url($this->url.'data/');
		$content['jqGrid']['sortname'] = 'id';
		$index = 1;
		$colModel[] = "{name:'id' ,index:'id' , width:55 ,hidden:true ,key:true ,editable:false ,editoptions:{readonly:true,size:10} }";
		$colModel[] = "{name:'nama_kursus' ,index:'nama_kursus' ,label:'Nama', width:200 ,editable:true ,editoptions:{size:70} ,formoptions:{ rowpos:".$index++."} }";
		$colModel[] = "{name:'tempat_kursus',index:'tempat_kursus',label:'Lokasi', width:150 ,editable:true ,editoptions:{size:70} ,formoptions:{ rowpos:".$index++."}}";
		$colModel[] = "{name:'penyelenggara',index:'penyelenggara',label:'Penyelenggara', width:150 ,editable:true ,editoptions:{size:70} ,formoptions:{ rowpos:".$index++."}}";
		$colModel[] = "{name:'angkatan',index:'angkatan',label:'Angkatan', width:150 ,editable:true ,editoptions:{size:70} ,formoptions:{ rowpos:".$index++."}}";
		$content['jqGrid']['colModel'] = implode(',',$colModel);
 
 
		$this->load->view($this->vPath.'default/default',$content);
 
	}
	function data($idPegawai=false){
		$this->load->model('jqgrid_model','jqgrid');
		$this->jqgrid->fields = array('nama_kursus','tempat_kursus','penyelenggara','angkatan');
		$this->jqgrid->priKey = 'id';
		$this->jqgrid->fieldsDate = array();
		$oper = $this->input->post('oper');
		switch ($oper):
		case 'add':
			$this->db->set('id_pegawai',$idPegawai);
			$this->jqgrid->add('kursus');
			break;
		case 'edit':
			$this->db->set('id_pegawai',$idPegawai);
			$this->jqgrid->edit('kursus');
			break;
		case 'del':
			$this->jqgrid->del('kursus');
			break;
		default:
				$this->db->where('id_pegawai',$idPegawai);
			$this->jqgrid->getFilters()->countFrom('kursus')->getCount();
				$this->db->where('a.id_pegawai',$idPegawai);
			$this->jqgrid->getFilters()->getRows('kursus a');
			echo $this->jqgrid->encode();
			break;
		endswitch;
	}
 
}

untuk model

class Jqgrid_model extends Model {
 
    function Jqgrid_model(){
        parent::Model();
		$this->tableName = '';
		$this->fields = array();
		$this->fieldsDate = array();
		$this->priKey = '';
		$this->count = false;
		$this->total_pages = false;
		$this->start = false;
		$this->rows = false;
		$this->sidx = false;
		$this->sord= false;
		$this->rows;
		$this->arrFilter = array(
			'eq'=>array('where'),
			'ne'=>array('where'  	,'!='	,false),
			'lt'=>array('where'	  	,'<'	,false),
			'le'=>array('where'  	,'<='	,false),
			'gt'=>array('where'  	,'>'	,false),
			'ge'=>array('where'  	,'>='	,false),
 
			'bw'=>array('like'		,''		,'after'),
			'bn'=>array('not_like'	,''		,'after'),
			'in'=>array('where_in'		,''		),
			'ni'=>array('where_not_in'	,''		),
			'ew'=>array('like'		,''		,'begin'),
			'en'=>array('not_like'	,''		,'begin'),
			'cn'=>array('like'		,''		,'both'),
			'nc'=>array('not_like'	,''		,'both'),
		);
		$this->arrPostKey = array(
			'sidx'=>'sidx',
			'sord'=>'sord',
			'page'=>'page',
			'rows'=>'rows',
			'filters'=>'filters',
			'isSearch'=>'_search',
		);
 
// attribute for treGrid
		$this->arrPostKey['n_level'] = 'n_level';
		$this->arrPostKey['nodeid'] = 'nodeid';
		$this->sXml  = '';
		$this->colIndex = array();
		$this->colKey ='';
		$this->colCountChild ='';
		$this->parentCol = '';
 
		$this->post = false;
 		$this->_getPost();
		$this->limit = $this->post->rows;
   }
    function _getPost(){
		foreach($this->arrPostKey as $key=>$sKey):
			$this->post->$key = $this->input->post($sKey);
		endforeach;
    }
    function countFrom($tableName){
		$this->db->from($tableName);
		$this->tableName = $tableName;
		return $this;
	}
    function getCount(){
		$this->db->select('COUNT(*) AS numrows',false);
		$result = $this->db->get()->row();
		$this->count = $result->numrows;
 
		if( $this->count > 0 ) {
			$this->total_pages = ceil($this->count/$this->limit);
		} else {
			$this->total_pages = 0;
		}
		if ($this->post->page > $this->total_pages) $this->post->page=$this->total_pages;
		$this->start = $this->limit*$this->post->page - $this->limit; 
		// do not put $this->limit*( $this->post->page - 1)
		if ($this->start<0) $this->start = 0;
		return $this;
    }
 	function search($searchIndex){
		if($this->post->isSearch == 'true'):
			foreach($searchIndex as $s):
				if(! $this->input->post($s)) continue;
				$field = $s;$value = $this->input->post($s);
				$this->db->where($s,$value);
			endforeach;
		endif;
		return $this;
	}
 	function getFilters($filters=false){
		$filters=($this->post->filters)?$this->post->filters:$filters;
		if($filters):
			$filters = json_decode($filters);
			if($filters->groupOp == 'AND'){$match = '';}
			if($filters->groupOp == 'OR'){$match = 'or_';}
			//dump($filters['rules']);die;
			foreach($filters->rules as $rules):
				//dump($rules);
				if(! array_key_exists($rules->op,$this->arrFilter)) {continue;}
				$field = $rules->field;
				$op = $this->arrFilter[$rules->op];
				$cond = $match.$op[0];
				$value = $rules->data.@$op[1];
					//$this->db->$cond($field,$value);
				if(! isset($op[2])):
					$this->db->$cond($field,$value);
				else:
					$this->db->$cond($field,$value,$op[2]);
				endif;
			endforeach;
			//die;
		endif;
		return $this;
	}
   function reformatRow($rows){
		$this->rows = $rows;
	}
   function getRows($tableName=false){
		$tableName = ($tableName)?$tableName:$this->tableName;
		if($this->post->sidx) $this->db->order_by($this->post->sidx,$this->post->sord);
		$this->rows = $this->db->get($tableName,$this->limit,$this->start)->result_array();
		return $this;
    }
    function encode(){
		$responce->rows = $this->rows;
		$responce->page = $this->post->page;
		$responce->total = $this->total_pages;
		$responce->records = $this->count;
		return json_encode($responce);
    }
    function formatGetUrl($str=''){
		$str = str_replace('%7B','{',$str);
		$str = str_replace('%22','"',$str);
		$str = str_replace('%3A',':',$str);
		$str = str_replace('%2C',',',$str);
		$str = str_replace('%5B','[',$str);
		$str = str_replace('%7D','}',$str);
		$str = str_replace('%5D',']',$str);
		$str = str_replace('+',' ',$str);
		return $str;
    }
   function fetchTreeRows($parent='',$rootIdParent=0){
		if($this->post->nodeid > 0) { //check to see which node to load 
			$this->db->where($parent,$this->post->nodeid);
		} else {
			$this->db->where($parent, $rootIdParent);
			//$this->db->where($parent, '2737');
		}
		$this->rows = $this->db->get()->result();
		//dump($this->rows);die;
		return $this;
    }
    function setTreeXml($col=array(),$xkey='',$parent='',$colCountChild='',$n_lvl=0){
		$n_lvl = ($this->post->n_level)?$this->post->n_level:$n_lvl;
		$n_lvl = $n_lvl + 1; // we should ouput next level 
 
		$et = ">";
		$this->sXml .= "<?xml version='1.0' encoding='utf-8'?$et\n";
		$this->sXml .= "<rows>";
		$this->sXml .= "<page>1</page>";
		$this->sXml .= "<total>1</total>"; 
		$this->sXml .= "<records>1</records>";
		foreach($this->rows as $row):
			$parentval = ($row->$parent)?$row->$parent:"0";
			if( $row->$colCountChild > 0) $leaf='false'; else $leaf = 'true'; 
 
			$this->sXml .= "<row>"; 
			foreach($col as $index):
				$this->sXml .= "<cell>".$row->$index."</cell>"; 
			endforeach;
 
			$this->sXml .= "<cell>". $row->$xkey."</cell>"; 
			$this->sXml .= "<cell>". $n_lvl."</cell>"; 
			$this->sXml .= "<cell><![CDATA[".$parentval."]]></cell>"; 
			$this->sXml .= "<cell>".$leaf."</cell>"; 
			$this->sXml .= "</row>"; 
		//dump($this->sXml);die;
		endforeach;
		$this->sXml .= "</rows>"; 
		return $this;
    }
    function getTreeXml(){
		if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) :
			header("Content-type: application/xhtml+xml;charset=utf-8");
		else:
			header("Content-type: text/xml;charset=utf-8");
		endif;
		echo $this->sXml;
    }
    function setValue(){
		foreach($this->fields as $field):
			$this->db->set($field,$this->input->post($field));
			if(in_array($field,$this->fieldsDate)) $this->db->set($field,dateToMysql($this->input->post($field)));
		endforeach;
		return $this;
    }
    function add($tableName=''){
		$this->setValue();
		$this->db->insert($tableName);
		return $this;
    }
    function edit($tableName=''){
		$this->setValue();
		$this->db->where($this->priKey,$this->input->post('id'));
		$this->db->update($tableName);
		return $this;
	}
    function del($tableName=''){
		$this->db->where($this->priKey,$this->input->post('id'));
		$this->db->delete($tableName);
		return $this;
    }
    function delnode($tableName='',$strParent=false){
		if($this->isChild($tableName,$strParent)):
			$this->db->where($this->priKey,$this->input->post('id'));
			$this->db->delete($tableName);
		else:
		endif;
		return $this;
    }
    function isChild($tableName='',$strParent=false){
		$this->db->where($strParent,$this->input->post('id'));
		$data = $this->db->get($tableName)->result();
		if($data){return false;}else{return true;}
    }
    function select($tableName='',$ky=false,$value=false){
		$this->db->select($ky.' ky,'.$value.' val');
		$data = $this->db->order_by($value)->get($tableName)->result();
		$arr = array();
		foreach($data as $dt):
			$arr[$dt->ky] = $dt->val;
		endforeach;
		return $arr;
    }
}

dan untuk view nya

">
">

jQuery(document).ready(function() {
//################################################################???????////////////////////
jQuery("#<?=$jqGrid['id'];?>").jqGrid({
url:'<?=$jqGrid['url'];?>',
editurl:'<?=$jqGrid['editurl'];?>',
mtype:"POST",
datatype: "json",
jsonReader:{
repeatitems:false
,subgrid:{repeatitems:false}
},
width:650,
height: 'auto',
colModel:[<?=$jqGrid['colModel'];?>],
rowNum:10,
rowList:[10,20,30,50,100],
pager: '#<?=$jqGrid['pager'];?>',
toolbar: [true,"top"],
sortname: '<?=$jqGrid['sortname'];?>',
viewrecords: true,
sortorder: "asc",
shrinkToFit :false,
autowidth: false,
multiselect: false,
rownumbers: true,
caption: "<?=@$jqGrid['caption'];?>"

});
//################################################################???????////////////////////
jQuery("#<?=$jqGrid['id'];?>").jqGrid('navGrid','#<?=$jqGrid['pager'];?>',
{
edit:true,add:true,del:true,search:true,refresh:true,excel:true
},
{ // edit options
reloadAfterSubmit:true
, jqModal:false
, closeOnEscape:true
, bottominfo:"Fields marked with (*) are required"
}, // edit options
{ // add options
reloadAfterSubmit:true
,jqModal:false
, closeOnEscape:true
,bottominfo:"Fields marked with (*) are required"
, closeAfterAdd: true
}, // add options
{}, //del options
{multipleSearch:true,text:'search'
}
);

//################################################################???????////////////////////
jQuery("#<?=$jqGrid['id'];?>").jqGrid('navButtonAdd','#<?=$jqGrid['pager'];?>',{
caption: "Columns",
title: "Reorder Columns",
onClickButton : function (){
jQuery("#<?=$jqGrid['id'];?>").jqGrid('columnChooser');
}
});

});

mari belajar bersama

March 31, 2010 by ianpanrita, 1 year 18 weeks ago
Comment: 6229

ianpanrita's picture

mari belajar bersama

lisense

March 31, 2010 by first, 1 year 18 weeks ago
Comment: 6228

first's picture

jqgrid tu bayar pa ngak c????trims.......

jqGrid and CI

February 25, 2010 by noocom, 1 year 22 weeks ago
Comment: 5965

noocom's picture

Sebenarnya simple, gini caranya :
pertama di bagian controller yang mau nampilin halaman cukup load view aja ga perlu di utak-atik.
kemudian di bagian view load semua file (.css dan .js) yang diperlukan untuk jqgrid
tambahkan tag <table> yang nantinya akan di replace dg grid
+ <div> buat navigasinya
kemudian baru di inisialisasi jqgrid nya.
yang perlu di perhatikan adalah
1. url nya
2. tipe datanya
3. colNames
4. colModel

untuk url bisa nge-link ke kontroller manapun, bisa ke kontroller yang sama dengan yang nampilin halaman, tapi buat fungsi sendiri, get_data() misalkan.
jadi buat fungsi baru yang fungsinya untuk membaca data dari dB dan kemudian data itu di format sesuai dengan yang di inginkan oleh jqGrid (XML/JSON).
kemudian untuk tipe data, menurut dokumentasinya jqgrid, bisa XML, JSON, trus apa lagi yah lupa...
yang sudah ku coba ya itu XML dan JSON.
colNames dan colModel panjangnya harus sama dan sesuai dengan data yang di ambil dr url

untuk mengaktifkan searching dan sorting, di bagian fungsi untuk membaca data dapat ditambahkan parameter" yang nantinya untuk memfilter data (halah apaan sih..). pokoknya parameter itu di dapat dengan $_GET or $_REQUEST aku dah coba dengan $this->input->get_post() nya CI tapi ga bisa, yang nantinya parameter itu sebagai ... apa sih namanya... itu loh kalo kita jalankan query maka ada WHERE nya dan ORDER BY ...
pokoknya itu lah.

kalo mau yang udah jalan aku ada, tapi gimana uploadnya nih? diupload kemana?

saya mau

May 8, 2010 by cuplis, 1 year 12 weeks ago
Comment: 6832

cuplis's picture

mas saya juga mau donk...
[email protected]
terim kasih

wah bisa di coba tuh

March 14, 2010 by memordial, 1 year 20 weeks ago
Comment: 6215

memordial's picture

bisa minta tolong di upload ke mediafire ajah .. :D
makasih sebelumnya ..

mau donk...klo ada yg udah

February 27, 2010 by cah_ajus, 1 year 22 weeks ago
Comment: 5979

cah_ajus's picture

mau donk...klo ada yg udah jalan....,yang udah ada delete multiple data...,kirim ke email ku dong ([email protected])....makasi.

Premium Drupal Themes by Adaptivethemes