我是代碼點火器中的新程序員。 我正在嘗試將jqgrid與代碼點火器集成在一起，七個小時後，我來到了一個成功的點，其中jqgrid和代碼點火器完全集成了搜索選項。
首先，在你的應用/模型目錄中寫一個模型。代碼是......
class JqgridSample extends CI_Model {
function getAllData($start,$limit,$sidx,$sord,$where){
$this->db->select('id,name,email,passport,phone,fax,address');
$this->db->limit($limit);
if($where != NULL)
$this->db->where($where,NULL,FALSE);
$this->db->order_by($sidx,$sord);
$query = $this->db->get('info',$limit,$start);
return $query->result();
}
}
然後，在你的應用程序/控制器目錄中寫一個控制器。該代碼是
class Demo extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->model('JqgridSample');
}
function jqGrid(){
$this->load->view('showGrid');
}
function loadData(){
$page = isset($_POST['page'])?$_POST['page']:1;
$limit = isset($_POST['rows'])?$_POST['rows']:10;
$sidx = isset($_POST['sidx'])?$_POST['sidx']:'name';
$sord = isset($_POST['sord'])?$_POST['sord']:'';
$start = $limit*$page - $limit;
$start = ($start<0)?0:$start;
$where = "";
$searchField = isset($_POST['searchField']) ? $_POST['searchField'] : false;
$searchOper = isset($_POST['searchOper']) ? $_POST['searchOper']: false;
$searchString = isset($_POST['searchString']) ? $_POST['searchString'] : false;
if ($_POST['_search'] == 'true') {
$ops = array(
'eq'=>'=',
'ne'=>'<>',
'lt'=>'<',
'le'=>'<=',
'gt'=>'>',
'ge'=>'>=',
'bw'=>'LIKE',
'bn'=>'NOT LIKE',
'in'=>'LIKE',
'ni'=>'NOT LIKE',
'ew'=>'LIKE',
'en'=>'NOT LIKE',
'cn'=>'LIKE',
'nc'=>'NOT LIKE'
);
foreach ($ops as $key=>$value){
if ($searchOper==$key) {
$ops = $value;
}
}
if($searchOper == 'eq') $searchString = $searchString;
if($searchOper == 'bw' || $searchOper == 'bn') $searchString .= '%';
if($searchOper == 'ew' || $searchOper == 'en') $searchString = '%'.$searchString;
if($searchOper == 'cn' || $searchOper == 'nc' || $searchOper == 'in' || $searchOper == 'ni') $searchString = '%'.$searchString.'%';
$where = "$searchField $ops '$searchString' ";
}
if(!$sidx)
$sidx =1;
$count = $this->db->count_all_results('info');
if($count > 0) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages)
$page=$total_pages;
$query = $this->JqgridSample->getAllData($start,$limit,$sidx,$sord,$where);
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
foreach($query as $row) {
$responce->rows[$i]['id']=$row->id;
$responce->rows[$i]['cell']=array($row->name,$row->email,$row->passport,$row->phone,$row->fax,$row->address);
$i++;
}
echo json_encode($responce);
}
}
最後，你在你的應用程序/ views目錄寫一個觀點..
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>application/views/css/custom-theme/jquery-ui-1.8.16.custom.css" />
<link type="text/css" href="<?php echo base_url()?>application/views/css/ui.jqgrid.css" rel="stylesheet" />
<link type="text/css" href="<?php echo base_url()?>application/views/css/plugins/searchFilter.css" rel="stylesheet" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script type="text/javascript" src="<?php echo base_url(); ?>application/views/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>application/views/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>application/views/js/jquery.jqGrid.min.js"></script>
<title>Codeigniter With JQGrid</title>
</head>
<body>
<center>
<h1>Codeigniter With JQGrid</h1>
<?php
$ci =& get_instance();
$base_url = base_url();
?>
<table id="list"></table><!--Grid table-->
<div id="pager"></div> <!--pagination div-->
</center>
</body>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#list").jqGrid({
url:'<?=$base_url.'index.php/demo/loadData'?>', //another controller function for generating data
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Name','Email','Passport','Phone','Fax','Address'], //Grid column headings
colModel:[
{name:'name',index:'name', width:100, align:"left"},
{name:'email',index:'email', width:150, align:"left"},
{name:'passport',index:'passport', width:100, align:"right"},
{name:'phone',index:'phone', width:100, align:"right"},
{name:'fax',index:'fax', width:100, align:"right"},
{name:'address',index:'address', width:100, align:"right"},
],
rowNum:10,
width: 750,
//height: 300,
rowList:[10,20,30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
rownumbers: true,
gridview: true,
caption:"List Of Person"
}).navGrid('#pager',{edit:false,add:false,del:false});
});
</script>
爲我自己，我的視圖文件在視圖目錄js和css中創建兩個文件夾。 和js foder我放置jqgrid包中找到的jquery-1.5.2.min.js，grid.locale-en.js（views/js/i18n /），jquery.jqGrid.min.js。
以同樣的方式jquery-ui-1.8.16.custom.css，ui.jqgrid.css需要的也是可用的jqgrid包。
運行全過程中，你必須創建一個數據庫名爲jqgrid_sample並在數據庫中創建一個名爲信息包含字段的表...
ID
名
電子郵件
護照
電話
傳真
地址
完蛋了。請享用。再見。
哦，上帝我希望我可以編輯您的文章，並修正自己的錯誤使用'代碼Blocks'。你有'http：// localhost/sitio/index.php/grid/f'輸出的例子嗎？ – Aren 2010-05-27 00:13:59
哈哈....對不起 這是輸出{「rows」：{「」：{「id」：「11」，「cell」：[「11」，「225101503」]}}} – Ivan 2010-05-27 00:28:01