Skip to main content

CI + jqGrid - WORKING

February 25, 2010 by noocom

noocom's picture

CI + jqGrid
It's Working....

lho koq file .txt???
maaf dikarenakan situs ini tidak mengijinkan mengupload file .rar maka terpaksa file nya aku ubah ekstensinya menjadi txt.
Jadi kalo udah di donlod langsung ubah ekstensinya jadi .rar
trus extract dan baca readmenya

semoga berhasil...

AttachmentSize
jqgrid.txt191.31 KB

Comments

bro cah_ajus

December 14, 2010 by firman_id, 40 weeks 1 day ago
Comment: 7470

firman_id's picture

bagii donk contohhnnya..
:d
kirim di mail sya
[email protected],
sya baru bljr nie...

Edit

December 5, 2010 by rose_see, 41 weeks 3 days ago
Comment: 7453

rose_see's picture

maaf mas mas..
jqGrid ini dah saya coba dan bisa menampilkan datanya,
cuman waktu tabelnya saya ganti misal tabel anggota (kode,nama,,tgllahir),
di model "country" udah saya ganti "anggota", di controller + view juga udah saya ganti field2nya, tp kok datanya g muncul ya???
permasalahan kira2 dimana y? huft :(

done

December 6, 2010 by rose_see, 41 weeks 3 days ago
Comment: 7454

rose_see's picture

dah bisa sodara, masalah di view
ternyata sortname-nya belum disesuaikan dg fieldnya tabel baru.. ahihihi

Not Found

December 2, 2010 by rose_see, 41 weeks 6 days ago
Comment: 7449

rose_see's picture

Maap kakak tak coba http://localhost/ci/index.php/jqgrid
tapi kok
404 Page Not Found
The page you requested was not found.
kira2 knp y? kok not found :(

maap udah bisa tampil, tapi

December 2, 2010 by rose_see, 41 weeks 6 days ago
Comment: 7450

rose_see's picture

maap udah bisa tampil, tapi kok datanta tidak tampil y?, spt pak heidymadia itu.
ada yg bisa bantu knp? :)

Perhatian buat yang gagal jalankan

December 2, 2010 by heidymadia, 42 weeks 10 hours ago
Comment: 7447

heidymadia's picture

Perhatian buat yang gagal untuk menjalankan jqgrid.

1. Mas noocom mengasumsikan bahwa di file autoload anda sudah menambahkan helper untuk url. Jika belum maka akan menghasilkan page kosong seperti yang dialami Mas gungun. Ini juga ditulis oleh mas ericgunawan

2. Dalam file sql tidak ada Perinta Create Tabel. Jika tabel belum ada, jalankan ini sebelum jalankan file sql.

CREATE TABLE IF NOT EXISTS `country` (
  `id` int(11) NOT NULL,
  `iso` varchar(3) NOT NULL,
  `name` varchar(255) NOT NULL,
  `iso3` varchar(4) NOT NULL,
  `numcode` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

itu versi kira kira yaa. Siapa tahu yang punya thread mau membetulkan.

Saya masih cari tahu kenapa belum bisa melihat data jsonnya sehingga tidak ada datanya. Print Screen Terlampir

thx alot

December 1, 2010 by Anonymous, 42 weeks 19 hours ago
Comment: 7444

Anonymous's picture

dicoba sekali langsung jalan, makasih ya ^.^

suip... thx

December 1, 2010 by Anonymous, 42 weeks 1 day ago
Comment: 7443

Anonymous's picture

mantaps master... well done.... :D

Problem dengan index.php (mod_rewrite)

November 2, 2010 by erricgunawan, 46 weeks 2 days ago
Comment: 7320

erricgunawan's picture

Thx buat bro noocom.

Saya udah coba n udah jalan.
Buat yang lainnya yang gak jalan, coba perhatikan konfigurasi database.php.

Selain itu, yang perlu ditambahkan juga adalah konfigurasi di autoload.php :

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Semoga bisa membantu.

Saya juga ada pertanyaan, mungkin bro noocom atau yang lain bisa bantu:

Di sample code, url untuk menampilkan data adalah:
url:'<?php echo site_url('jqgrid/get_json_data')?>'

Ketika dicoba dengan menggunakan default index page: 'index.php', sample berjalan lancar.

Tapi karena sy pake mod_rewrite yang digunakan untuk menghilangkan index.php , sample di atas jadi gak bisa jalan. Gak error, tapi datanya gak mau keluar.

Sebenernya bisa sih, dengan trik berikut:

url:'<?php echo base_url . 'index.php/jqgrid/get_json_data'; ?>', 

Tapi rasanya kok masih ada yang 'ngganjel' ya, dengan menambahkan 'index.php' kaya di atas.

Ada cara lain untuk ngatasin ini gak, ya?

Thanks b4 bro...

Sekarang sudah bisa upload

August 27, 2010 by admin, 1 year 3 weeks ago
Comment: 7069

admin's picture

Sekarang sudah bisa upload file untuk .rar,.tar.gz ataupun .zip

di view nya Kosong gak ada apa2

June 3, 2010 by gungun, 1 year 15 weeks ago
Comment: 6882

gungun's picture

Mas2 master yang baik, ak nubi ni di CI. aku coba pasangin jqgrid yang dr mas master itu. aku download, databasenya juga uda aku import tapi ko, pas run di browsernya, cuma putih ngeblank aja yaa....? itu kenapa mas?? mohoonn solusi dan bantuannya!!

Thanks b 4..^^

Waduh

June 7, 2010 by noocom, 1 year 15 weeks ago
Comment: 6890

noocom's picture

Wah kalo cuman halaman kosong malah membingungkan, jadi ga tau dimana error nya.
Kalo gitu coba di cek pake firebug (plugin untuk firefox) dulu.

minta donk...

April 28, 2010 by cuplis, 1 year 20 weeks ago
Comment: 6650

cuplis's picture

master @noocom
minta filenya donk...
saya sudah ubah ekstensinya malah ga bsa di ekstrak...
email saya
[email protected]
thank bgt

HHHHEEEEEELLLLPPPPP...!!!

April 9, 2010 by badieah, 1 year 23 weeks ago
Comment: 6257

badieah's picture

MASTER2..khususnya master noocom...gimane ni..file uda aq download dan uda aq taruh sebagaimana mestinya..database uda aq import..kok tabelnya kosong ya? kagak ade datanye...

bingung banget..
nyobain bikin yang paling sederhana juga data kagak tampil juga..

kasih solusi dunk..
penting banget nih...

:-(

sama

September 23, 2010 by triyadi, 51 weeks 6 days ago
Comment: 7160

triyadi's picture

sama master..

setelah aku buka source code nya hanya ini yang keluar

Mohon bimbingannya

Error gimana

April 13, 2010 by noocom, 1 year 23 weeks ago
Comment: 6263

noocom's picture

Erro gimana? tampilan tabel nya ke load ga?
Kamu pake firefox? coba di lihat request datanya di firebug trus kalo error ya di debug.. :D
sorry soalnya errornya kurang spesifik.
Setahuku demonya dah jalan dan dah dicoba di donlod dan dijalankan oleh user yang lain juga.
Semoga berhasil.

BEGINI Mr.NOOCOM

April 20, 2010 by badieah, 1 year 22 weeks ago
Comment: 6282

badieah's picture

begini lho master..bordernya tabel plus atribut2nya uda tampil semua..tapi tabel itu gda isinya sama sekali..
jadi data yang dari database g tampil di tabel.

tabelnya jadinya cuma kosong .gda datannya..

Firefox + FireBUG

April 20, 2010 by noocom, 1 year 22 weeks ago
Comment: 6284

noocom's picture

Gunakan browser Mozilla Firefox dan tambahkan extension Firebug.
trus gunakan firebug untuk "debug" request data ke server.
lihat apakah ada error nya.

kirim semua data jgrid

March 13, 2010 by shva, 1 year 27 weeks ago
Comment: 6209

shva's picture

Hai.. slam kenal
Sy buat form dari jqgrid.
Grid ini akan tampung data sementara yg sudah ditambahkan dari dialog form jqgrid. Ketika ditambhkan data / edit / hapus hanya akan berpengaruh pada gridnya aja (client), tp ketika di tekan proses akan submit semua data tersebut baru akan diproses diserver.

Sy pernah coba hal trsebut dgn YUI Grid dan itu bisa. Tp dgn jggrid gak tau cara dapatkan data dari grid-nya

Gimana ya kirim semua data dari jgrid untuk di post ke server ? tolong bantu...

saia sudah mencoba....tapi

February 25, 2010 by cah_ajus, 1 year 29 weeks ago
Comment: 5968

cah_ajus's picture

saia sudah mencoba....tapi msh gagal...,'
tampilannya muncul..,tapi datanya dari table country ngk muncul, jadi isi gridnya msh kosong..,itu gmn ya???pdahal database country-nya sudah saya import.
bisa dijelasin lagi ngk???coz saia tertarik bgt ma ini.....,makasi

sudah bisa

February 25, 2010 by cah_ajus, 1 year 29 weeks ago
Comment: 5969

cah_ajus's picture

sudah bisa koq....heheheee.....
sungguh manstabbbb ne........terima kasih broowww......
btw, klo mo ditambah link edit/delete di setiap rownya bisa ngk??

gimana tuh kok bisa??

February 16, 2011 by simon_ay, 31 weeks 1 day ago
Comment: 7614

simon_ay's picture

gw punya masalah yang sama, tapi kok errornya malah di jquerynya ya??? ada yang bisa membantu??

Tambah link edit/delete di setiap row

February 26, 2010 by noocom, 1 year 29 weeks ago
Comment: 5976

noocom's picture

Sory ga nyambung.... :)

Untuk menambahkan link edit or delete di setiap row lebih mudah lagi.
Kamu tinggal edit kode pada fungsi yang men-generate data JSON nya (get_json_data())
tambahin kode di bagian

$responce->rows[$i]['cell']=array($result[$i]['id'],
                                            $result[$i]['iso'],
                                            $result[$i]['name'],
                                            $result[$i]['iso3'],
                                            $result[$i]['numcode'],
                                            // tambahan
                                            anchor('jqgrid/edit/'.$result[$i]['id'], 'edit'),
                                            anchor('jqgrid/delete/'.$result[$i]['id'], 'delete')
                                        );

trus di bagian jqgrid nya di edit di bagian colNames dan colModel
jadi deh
try it...

Edit/Delete

February 26, 2010 by noocom, 1 year 29 weeks ago
Comment: 5975

noocom's picture

untuk edit:
setahuku jqgrid bisa edit in place, jadi ketika di klik di cell ato row akan berubah menjadi seperti input text. tapi aku belum coba :)
kalo secara manual dengan CI bisa juga, kalo yang ini aku dah coba, jadi prosesnya gini (punyaku)
salah satu kolom isinya dijadiin link (anchor) misalkan nama country dijadikan berupa http://codeigniter/index.php/jqgrid/edit/15
untuk mengubahnya menjadi link yang di edit kode di fungsi yang men-generate data JSON.
jadi pas di klik langsung mengarah ke halaman untuk edit, dan yang di edit data dengan id 15, gitu.
ato dengan cara lain yaitu dengan mendapatkan id dari field yang di select (di klik) di jqgrid, kalo g salah "sellrow" ato apa aku lupa, coba kamu lihat di dokumentasinya jqgrid. trus dengan id yang didapat kita kirimkan dengan, misalkan, tombol ato link yang mengarah ke halaman edit.

trus untuk delete:
prosesnya hampir sama, cuman biasanya kan kita bisa pilih lebih dari satu row untuk di delete, lha itu perlu di set di jqgrid nya biar bisa multiselect. Kalo ga salah tambahkan ke option inisialisasi jqgrid kode "multiselect:true"
nanti di sebelah kiri akan muncul satu kolom lagi berupa check box yang bisa kita check :)
trus untuk mendapatkan id-id dari row yang di select fungsinya sama dengan yang di atas cuma parameternya "sellarrow" nanti di dapat data berupa array dari id itu.
lha tinggal di post lewat fungsi .post() nya jquery.

bingung ga ???
aku sendiri bingung. :D
tapi secara garis besar prosesnya seperti itu.
sorry lagi males lihat dokumetasi 'n kode nih

kalo ada pertanyaan posting aja, OK

data gak ke kirim ke server

March 13, 2010 by shva, 1 year 27 weeks ago
Comment: 6210

shva's picture

Hai,
masalh ane gak tau cara kirim data smua data d jqgrid keserver,
ini sdh dicoba dgn saran agan paramternya diganti dgn sellarrow, tp gak kekirim juga ya ?
//var gr = jQuery("#htmlTable2").jqGrid('getGridParam','selrow');
var gr = jQuery("#htmlTable2").jqGrid('getGridParam','sellarrow');
$.post("test.php", gr,
function(data){
alert("Data Loaded: " + data);
}
);

Edit/Delete

February 26, 2010 by noocom, 1 year 29 weeks ago
Comment: 5974

noocom's picture

untuk edit:
setahuku jqgrid bisa edit in place, jadi ketika di klik di cell ato row akan berubah menjadi seperti input text. tapi aku belum coba :)
kalo secara manual dengan CI bisa juga, kalo yang ini aku dah coba, jadi prosesnya gini (punyaku)
salah satu kolom isinya dijadiin link (anchor) misalkan nama country dijadikan berupa http://codeigniter/index.php/jqgrid/edit/15
untuk mengubahnya menjadi link yang di edit kode di fungsi yang men-generate data JSON.
jadi pas di klik langsung mengarah ke halaman untuk edit, dan yang di edit data dengan id 15, gitu.
ato dengan cara lain yaitu dengan mendapatkan id dari field yang di select (di klik) di jqgrid, kalo g salah "sellrow" ato apa aku lupa, coba kamu lihat di dokumentasinya jqgrid. trus dengan id yang didapat kita kirimkan dengan, misalkan, tombol ato link yang mengarah ke halaman edit.

trus untuk delete:
prosesnya hampir sama, cuman biasanya kan kita bisa pilih lebih dari satu row untuk di delete, lha itu perlu di set di jqgrid nya biar bisa multiselect. Kalo ga salah tambahkan ke option inisialisasi jqgrid kode "multiselect:true"
nanti di sebelah kiri akan muncul satu kolom lagi berupa check box yang bisa kita check :)
trus untuk mendapatkan id-id dari row yang di select fungsinya sama dengan yang di atas cuma parameternya "sellarrow" nanti di dapat data berupa array dari id itu.
lha tinggal di post lewat fungsi .post() nya jquery.

bingung ga ???
aku sendiri bingung. :D
tapi secara garis besar prosesnya seperti itu.
sorry lagi males lihat dokumetasi 'n kode nih

kalo ada pertanyaan posting aja, OK

brooo, ada contoh aplikasi yg

February 27, 2010 by cah_ajus, 1 year 29 weeks ago
Comment: 5980

cah_ajus's picture

brooo, ada contoh aplikasi yg udah jadinya ngk??
aq bner2 mentok bwt nerapin delete multiple data ne.....klo ada boleh minta ngk???kirim email [email protected]

Delete Multi Select

February 27, 2010 by noocom, 1 year 29 weeks ago
Comment: 5983

noocom's picture

Atau gini deh ...

eit... tunggu dulu, kode mu tuh dah komplit yah?
koq ga ada tag form nya?

OK gini, tambahkan %lt;form> dengan id misalkan form-delete
di dalamnya tombol untuk delete itu
trus tambahkan hidden input dengan id misalkan row-ids

trus tambahkan script

// form submit
jQuery('#form-delete').submit(function(){
    var s = [];
    s = jQuery("#grid").jqGrid('getGridParam','selarrrow');    
    $('#row-ids').val(s);
});

script itu akan jalan ketika form di submit, sebelum submit hidden inputnya akan di isi dengan id dari row yang di select.
kira-kira gitulah.
ini lebih mudah daripada pake fungsi .post() nya jquery.

waduh....bingung aku

February 28, 2010 by cah_ajus, 1 year 29 weeks ago
Comment: 5985

cah_ajus's picture

waduh....bingung aku bos........aq ble minta alamat emailnya ngk???ntr aku kirimin scriptku...,bwt di cek.....sukur2x ditambahin, kan tinggal dikit lagi..,hehehe(ngarep...hahaha)

Kirim aja

March 2, 2010 by noocom, 1 year 29 weeks ago
Comment: 5987

noocom's picture

Kirim aja mungkin aku bisa bantu.

Delete Multi Select

February 27, 2010 by noocom, 1 year 29 weeks ago
Comment: 5982

noocom's picture

Lho kan tinggal ambil id dari row yang di select, simpan dalam sebuah variable (java script), trus kirim lewat fungsi .post / .ajax nya jquery.
trus di php nya tinggal ambil data id dari $_POST, lakukan proses penghapusan.
simple kan.
Ini fungsi untuk mendapatkan id dari row yand diselect (aku copy dari sample nya jqgrid)
jQuery("#m1").click( function() {
var s;
s = jQuery("#list9").jqGrid('getGridParam','selarrrow');
alert(s); }
);
m1 itu id dari link atau tombol untuk mentriger penghapusan
list9 itu id dari grid.
semoga berhasil.

nah itu proses d php-nya aku

February 28, 2010 by cah_ajus, 1 year 29 weeks ago
Comment: 5984

cah_ajus's picture

nah itu proses d php-nya aku bingung, brarti kan di controllernya aku bkin fungsi bwt nangkep id dari POST,trus lakuin proses hapus.nah bwtnya gmn sich?????????sumpah deh..bingung aku....ksi clue coding dong brooo......(bwt TA ne...)
bwt ngambil id-nya aku pke cara d bwh ini:
jQuery("#dedata").click( function()
{
var gr = jQuery("#grid").jqGrid('getGridParam','selarrrow');
if( gr != null ) jQuery("#grid").jqGrid('delGridRow',gr,{url:' echo site_url('admin/tampil_kategori/coba')',reloadAfterSubmit:false});
else alert("Please Select Row to delete!");
});

(Tanya)Kode menangkap id multi select delete

April 25, 2010 by candrairawan, 1 year 21 weeks ago
Comment: 6635

candrairawan's picture

Dear guys,

mohon bantuan pencerahan untuk delete multi select pada jqgrid.
gmn sih cara menangkap id multi selection yg di post ke server, saya sudah utak atik kok bingung, hanya bisa bekerja hanya single select aja. Tolong dikoreksi kode saya:

if($operation == "del")
{
$id=$_POST['id']; // parameters dari firebug adalah id = 0909, 6787, 3521
$total=count($id);
for($i=0;$i<$total;$i++)
{
$query="DELETE FROM table WHERE no='$id[$i]'";
$result = $db->query($query);
}
}

Sebelumnya Terima kasih atas bantuannya

Firebug

June 7, 2010 by noocom, 1 year 15 weeks ago
Comment: 6888

noocom's picture

Kalo udah dapet post data nya ya tinggal di proses seperti biasa dengan fungsi PHP tho.
seperti ini :

    function delete()
    {
        $ids = $_POST['id'];
        //echo $ids;
        $ids = explode(',', $ids);
        foreach($ids as $row=>$id){
            $this->jqgrid->delete($id);
        }
    }

Sepertinya di kodemu yang salah tuh penanganan post datanya.
Post data berupa string (id-id yang dipisahkan dengan koma) bukan array.
Jadi perlu di jadiin array dulu
$ids = explode(',', $ids);

oke cuyy...terima

February 27, 2010 by cah_ajus, 1 year 29 weeks ago
Comment: 5978

cah_ajus's picture

oke cuyy...terima kasih..............sudah berhasil diterapkan,boleh nanya lagi ngk??hehehe(sori rada crewet..,^_^)..,
1. gmana klo mau ganti warnanya itu biar ngk item???apa ganti di css-nya ato gmn???klo ganti di css, yg mana yach???hehee..
biar seperti yg disini warnanya
http://trirand.com/blog/jqgrid/jqgrid.html

2. kan aku nerapin 'multiselect:true', jadi klo mo delete lebih dari satu bisa di-check terlebih dahulu, itu trus klo mo ngapusnya gmn ya???tlong dong...,'

ne aku sertakan codenya...,bantuin dong bos...,

<table id="grid"></table> 
<div id="pager"></div>
 
<input type="BUTTON" id="dedata" value="Delete Selected" />

jQuery("#grid").jqGrid({
url:' echo site_url('admin/tampil_kategori/get_json_data')',
datatype: "json",
colNames:['Nama Praktikum','Nama Laboratorium','',''],
colModel:[

{name:'nama_praktikum',index:'nama_praktikum', width:50},
{name:'nama_laboratorium',index:'nama_laboratorium', width:50},
{name:'edit',index:'edit', width:11, search:false},
{name:'delete',index:'delete', width:15, search:false}],
rowNum:10,
rowList:[10,20,30],
pager: '#pager',
sortname: 'id_praktikum',
viewrecords: true,
multiselect:true,
sortorder: "desc",
width: 435,
height: "100%",
caption:"Data Praktikum" });
jQuery("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});

jQuery("#dedata").click( function()
{
var gr = jQuery("#grid").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#grid").jqGrid('delGridRow',gr,{url:' echo site_url('admin/tampil_kategori/coba')',reloadAfterSubmit:false});
else alert("Please Select Row to delete!");
});

Ganti warna

February 27, 2010 by noocom, 1 year 29 weeks ago
Comment: 5981

noocom's picture

Theme yang dipake by jqgrid diambil dari theme nya jquery ui.
Kamu tinggal donlod aja theme pack nya jquery ui, ada banyak tuh.
Extract trus tinggal pilih mana yang kamu suka. Setiap theme di pack dalam satu folder.
Yang aku pake itu namanya dark-hive (_assets/css/dark-hive)
Yang dipake di situs officialnya jqgrid itu kalo ga salah redmond
Kalo kamu mau ganti theme ya tinggal copy aja theme yang kamu mau ke folder css (1 folder sekaligus). Trus di view, di bagian kode yang me-load css-nya (ada 2 line), ganti aja kata dark-hive dengan theme yang kamu mau.
So kalo mau ganti-ganti theme ya kaya gitu caranya.
:)

kalau buat multi search di

February 20, 2011 by primbon, 30 weeks 4 days ago
Comment: 7620

primbon's picture

kalau buat multi search di jqgrid+CI gimana,mas?

oke..makasi boz....ganti

February 28, 2010 by cah_ajus, 1 year 29 weeks ago
Comment: 5986

cah_ajus's picture

oke..makasi boz....ganti warna sudah bisa dijalankan.....matur nuhun....

Premium Drupal Themes by Adaptivethemes