- Beranda
- Komunitas
- Tech
- Website, Webmaster, Webdeveloper
[HELP] Membuat DataPicker, DropDown List dan RadioButton di JqGrid


TS
aditya135
[HELP] Membuat DataPicker, DropDown List dan RadioButton di JqGrid
Permisi agan/sista semua, kebetulan ane lagi bikin projek kuliah pake JqGrid . Ane udah nyoba cari bantuan dari google dan beberapa udah ane terapin tapi masih gagal.
Barangkali agan - agan / sista disini punya source code nya atau punya tutorialnya bagaimana cara nerapin nya. Ane mohon bantuannya. Terima kasih sebelum dan sesudahnya.
Quote:
Pertanyaan ane gini gimana caranya buat bikin datepicker (kalender), dropdown list dan radiobutton di dalam input datanya?
Input form punya ane gan :
View :
Controller
Dan Yang inginkan seperti ini gan :
![[HELP] Membuat DataPicker, DropDown List dan RadioButton di JqGrid](https://s.kaskus.id/images/2013/03/26/5225366_20130326095609.png)
Input form punya ane gan :
Spoiler for Picture:
![[HELP] Membuat DataPicker, DropDown List dan RadioButton di JqGrid](https://s.kaskus.id/images/2013/03/26/5225366_20130326093527.png)
View :
Spoiler for Source Code View:
<?php
@session_start();
////cek user logged in
if(!isset($_SESSION['username']) and !isset($_SESSION['pass'])){
header('location:http://localhost/pln/login/checklogin.php'); //ke halaman login
}
?>
<html>
<head>
<title>:. Laporan Trafo | Aplikasi Sistem Manajemen Trafo PT PLN (PERSERO) Yogyakarta .:</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
<LINK REL="SHORTCUT ICON" HREF="image/pln.jpg"/>
<!-- Mengincludekan JQueryUI CSS. Rename nama sunny dan sesuaikan Folder yg ada di dalam Folder CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/sunny/jquery-ui-1.8.16.custom.css" />
<!-- Mengincludekan CSS Jqgrid -->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="SHORTCUT ICON" HREF="http://localhost/pln/image/pln.jpg"/>
<!--<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>-->
<!-- Mengincludekan Library Jquery -->
[removed][removed]
<!-- Mengincludekan Locale untuk JQGrid -->
[removed][removed]
<!-- Mengincludekan Library untuk JQGrid -->
[removed][removed]
<link rel="stylesheet" type="text/css" media="screen" href="css/css/datepicker.css" />
[removed][removed]
</head>
<style type="text/css">
#body{
width: 653px;
height: auto;
margin-top: 20px;
margin-left: -300px;
/*
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
position: center;
*/
line-height:1.4em;
}
</style>
<body>
<div id="centered" class="left">
<div align="center">
<div id="body">
<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
</div>
</div>
<div id="outer-outer">
<!--============================= OUTER WARAPPER | BACKGROUND KUNING =======================================--->
<div id="outer-wrapper">
<!--============================= HEADER =======================================--->
<div align="center">
<div id="header"></div>
</div>
<!--============================== KONTEN =======================-->
<div id='content-content-laporantrafo' class='corner-bottom left'>
<center/>
<br><br>
[removed]
$(document).ready(function(){
var grid = $("#list2");
grid.jqGrid({
url: 'index.php/welcome/json', //URL Tujuan Yg Mengenerate data Json nya
datatype: "json", //Datatype yg di gunakan
height: "auto", //Mengset Tinggi table jadi Auto menyesuaikan dengan isi table
width: "auto",
mtype: "GET",
colNames: ['id','Kode Tiang','Fasa','Keterangan','Tanggal Input','Status','Action'],
colModel: [
{name:'id', key:true, index:'id', hidden:true,editable:false,editrules:{required:true}},
{name:'id_tiang', width:'100', align:'center', index:'id_tiang',editable:true,editrules:{required:true}},
{name:'fasa', witdh:'75', align:'center', index:'fasa',editable:true,editrules:{required:true}},
{name:'keterangan', witdh:'500', align:'left', index:'keterangan',editable:true,editrules:{required:true}},
{name:'tgl_input', witdh:'75', align:'center', index:'tgl_input',editable:true,editrules:{required:true}},
{name:'status', witdh:'75', align:'center', index:'status',editable:true,editrules:{required:true}},
{name: 'myac', width:60, fixed:true, sortable:false, search:false, align:'center', resizable: false, resize:false, formatter:'actions',
formatoptions:{
keys:true,editbutton: true, delbutton: true,
onSuccess:function(jqXHR) {
alert(jqXHR.responseText);
return true;}}}
],
rownumbers:true,
rowNum: 10,
rowList: [10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
editurl: '<?php echo base_url() ?>index.php/welcome/crud', //URL Proses CRUD Nya
multiselect: false,
caption: "Record Test", //Caption List
});
grid.jqGrid('navGrid','#pager2',{view:true,edit:true,add:true,del:true},{},{},{},{closeOnEscape:true,closeAfterSearch:false,multipleSearch:false, multipleGroup:false, showQuery:false,drag:true,showOnLoad:false,sopt:['cn'],resize:false,caption:'Cari Record', Find:'Cari', Reset:'Batalkan Pencarian'});
});
[removed]
</div>
<!--==================== FOOTER ====================-->
<div id="footer">
<br>
<div align="center">
<div id="tulisan-footer">
<b>Copyright @ 2013 PT. PLN (Persero) Yogyakarta - All Right Reserved</b> <br>
Distribusi Jawa Tengah dan D.I Yogyakarta, APJ Yogyakarta <br><br>
Support Sistem : <a href="#">Home</a> | <a href="#">Chat</a> | <a href="#">Tanya Jawab</a> | <a href="#">Bantuan</a> | <a href="#">About</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html
@session_start();
////cek user logged in
if(!isset($_SESSION['username']) and !isset($_SESSION['pass'])){
header('location:http://localhost/pln/login/checklogin.php'); //ke halaman login
}
?>
<html>
<head>
<title>:. Laporan Trafo | Aplikasi Sistem Manajemen Trafo PT PLN (PERSERO) Yogyakarta .:</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
<LINK REL="SHORTCUT ICON" HREF="image/pln.jpg"/>
<!-- Mengincludekan JQueryUI CSS. Rename nama sunny dan sesuaikan Folder yg ada di dalam Folder CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/sunny/jquery-ui-1.8.16.custom.css" />
<!-- Mengincludekan CSS Jqgrid -->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="SHORTCUT ICON" HREF="http://localhost/pln/image/pln.jpg"/>
<!--<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>-->
<!-- Mengincludekan Library Jquery -->
[removed][removed]
<!-- Mengincludekan Locale untuk JQGrid -->
[removed][removed]
<!-- Mengincludekan Library untuk JQGrid -->
[removed][removed]
<link rel="stylesheet" type="text/css" media="screen" href="css/css/datepicker.css" />
[removed][removed]
</head>
<style type="text/css">
#body{
width: 653px;
height: auto;
margin-top: 20px;
margin-left: -300px;
/*
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
position: center;
*/
line-height:1.4em;
}
</style>
<body>
<div id="centered" class="left">
<div align="center">
<div id="body">
<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
</div>
</div>
<div id="outer-outer">
<!--============================= OUTER WARAPPER | BACKGROUND KUNING =======================================--->
<div id="outer-wrapper">
<!--============================= HEADER =======================================--->
<div align="center">
<div id="header"></div>
</div>
<!--============================== KONTEN =======================-->
<div id='content-content-laporantrafo' class='corner-bottom left'>
<center/>
<br><br>
[removed]
$(document).ready(function(){
var grid = $("#list2");
grid.jqGrid({
url: 'index.php/welcome/json', //URL Tujuan Yg Mengenerate data Json nya
datatype: "json", //Datatype yg di gunakan
height: "auto", //Mengset Tinggi table jadi Auto menyesuaikan dengan isi table
width: "auto",
mtype: "GET",
colNames: ['id','Kode Tiang','Fasa','Keterangan','Tanggal Input','Status','Action'],
colModel: [
{name:'id', key:true, index:'id', hidden:true,editable:false,editrules:{required:true}},
{name:'id_tiang', width:'100', align:'center', index:'id_tiang',editable:true,editrules:{required:true}},
{name:'fasa', witdh:'75', align:'center', index:'fasa',editable:true,editrules:{required:true}},
{name:'keterangan', witdh:'500', align:'left', index:'keterangan',editable:true,editrules:{required:true}},
{name:'tgl_input', witdh:'75', align:'center', index:'tgl_input',editable:true,editrules:{required:true}},
{name:'status', witdh:'75', align:'center', index:'status',editable:true,editrules:{required:true}},
{name: 'myac', width:60, fixed:true, sortable:false, search:false, align:'center', resizable: false, resize:false, formatter:'actions',
formatoptions:{
keys:true,editbutton: true, delbutton: true,
onSuccess:function(jqXHR) {
alert(jqXHR.responseText);
return true;}}}
],
rownumbers:true,
rowNum: 10,
rowList: [10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
editurl: '<?php echo base_url() ?>index.php/welcome/crud', //URL Proses CRUD Nya
multiselect: false,
caption: "Record Test", //Caption List
});
grid.jqGrid('navGrid','#pager2',{view:true,edit:true,add:true,del:true},{},{},{},{closeOnEscape:true,closeAfterSearch:false,multipleSearch:false, multipleGroup:false, showQuery:false,drag:true,showOnLoad:false,sopt:['cn'],resize:false,caption:'Cari Record', Find:'Cari', Reset:'Batalkan Pencarian'});
});
[removed]
</div>
<!--==================== FOOTER ====================-->
<div id="footer">
<br>
<div align="center">
<div id="tulisan-footer">
<b>Copyright @ 2013 PT. PLN (Persero) Yogyakarta - All Right Reserved</b> <br>
Distribusi Jawa Tengah dan D.I Yogyakarta, APJ Yogyakarta <br><br>
Support Sistem : <a href="#">Home</a> | <a href="#">Chat</a> | <a href="#">Tanya Jawab</a> | <a href="#">Bantuan</a> | <a href="#">About</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html
Controller
Spoiler for Source Code Controller:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->helper('url'); // Load Helper URL CI
$this->load->model('m_jqgrid'); // Load Model m_jqgrid
}
function index() {
$this->grid(); //Default di arahkan ke function grid
}
function grid() {
$this->load->view('laporan_trafo2'); // Load View jqgrid
}
function json() {
$page = $this->input->get('page');
$limit = $this->input->get('rows');
$sidx = $this->input->get('sidx');
$sord = $this->input->get('sord');
if(!$sidx) $sidx=1;
# Untuk Single Searchingnya #
$where = ""; //if there is no search request sent by jqgrid, $where should be empty
$searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false;
$searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false;
if ($_GET['_search'] == 'true') {
$where = array($searchField => $searchString);
}
# End #
$count = $this->m_jqgrid->count_buku($where);
$count > 0 ? $total_pages = ceil($count/$limit) : $total_pages = 0;
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit;
if($start <0) $start = 0;
$data1 = $this->m_jqgrid->get_buku($where, $sidx, $sord, $limit, $start)->result();
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
foreach($data1 as $line){
$responce->rows[$i]['id'] = $line->id;
$responce->rows[$i]['cell'] = array($line->id,$line->id_tiang,$line->fasa,$line->keterangan,$line->tgl_input,$line->status);
$i++;
}
echo json_encode($responce);
}
function crud() {
$oper=$this->input->post('oper');
$id=$this->input->post('id');
$id_tiang=$this->input->post('id_tiang');
$fasa=$this->input->post('fasa');
$keterangan=$this->input->post('keterangan');
$tgl_input=$this->input->post('tgl_input');
$status=$this->input->post('status');
switch ($oper) {
case 'add':
$datanya=array('id_tiang'=>$id_tiang,'fasa'=>$fasa,'keterangan'=>$keterangan,'tgl_input'=>$tgl_input,'status'=>$status);
$this->m_jqgrid->insert_buku($datanya);
break;
case 'edit':
$datanya=array('id_tiang'=>$id_tiang,'fasa'=>$fasa,'keterangan'=>$keterangan,'tgl_input'=>$tgl_input,'status'=>$status);
$this->m_jqgrid->update_buku($id, $datanya);
break;
case 'del':
$this->m_jqgrid->delete_buku($id);
break;
}
}
}
class Welcome extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->helper('url'); // Load Helper URL CI
$this->load->model('m_jqgrid'); // Load Model m_jqgrid
}
function index() {
$this->grid(); //Default di arahkan ke function grid
}
function grid() {
$this->load->view('laporan_trafo2'); // Load View jqgrid
}
function json() {
$page = $this->input->get('page');
$limit = $this->input->get('rows');
$sidx = $this->input->get('sidx');
$sord = $this->input->get('sord');
if(!$sidx) $sidx=1;
# Untuk Single Searchingnya #
$where = ""; //if there is no search request sent by jqgrid, $where should be empty
$searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false;
$searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false;
if ($_GET['_search'] == 'true') {
$where = array($searchField => $searchString);
}
# End #
$count = $this->m_jqgrid->count_buku($where);
$count > 0 ? $total_pages = ceil($count/$limit) : $total_pages = 0;
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit;
if($start <0) $start = 0;
$data1 = $this->m_jqgrid->get_buku($where, $sidx, $sord, $limit, $start)->result();
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
foreach($data1 as $line){
$responce->rows[$i]['id'] = $line->id;
$responce->rows[$i]['cell'] = array($line->id,$line->id_tiang,$line->fasa,$line->keterangan,$line->tgl_input,$line->status);
$i++;
}
echo json_encode($responce);
}
function crud() {
$oper=$this->input->post('oper');
$id=$this->input->post('id');
$id_tiang=$this->input->post('id_tiang');
$fasa=$this->input->post('fasa');
$keterangan=$this->input->post('keterangan');
$tgl_input=$this->input->post('tgl_input');
$status=$this->input->post('status');
switch ($oper) {
case 'add':
$datanya=array('id_tiang'=>$id_tiang,'fasa'=>$fasa,'keterangan'=>$keterangan,'tgl_input'=>$tgl_input,'status'=>$status);
$this->m_jqgrid->insert_buku($datanya);
break;
case 'edit':
$datanya=array('id_tiang'=>$id_tiang,'fasa'=>$fasa,'keterangan'=>$keterangan,'tgl_input'=>$tgl_input,'status'=>$status);
$this->m_jqgrid->update_buku($id, $datanya);
break;
case 'del':
$this->m_jqgrid->delete_buku($id);
break;
}
}
}
Dan Yang inginkan seperti ini gan :
Spoiler for Yang ane inginin:
![[HELP] Membuat DataPicker, DropDown List dan RadioButton di JqGrid](https://s.kaskus.id/images/2013/03/26/5225366_20130326095609.png)
Barangkali agan - agan / sista disini punya source code nya atau punya tutorialnya bagaimana cara nerapin nya. Ane mohon bantuannya. Terima kasih sebelum dan sesudahnya.
Diubah oleh aditya135 27-03-2013 07:56
0
1.4K
Kutip
2
Balasan


Komentar yang asik ya
Urutan
Terbaru
Terlama


Komentar yang asik ya
Komunitas Pilihan