我试图让jqgrid与codeigniter一起工作，但我不能这样做，我只想以json格式显示来自表的数据......但没有任何反应......但我不知道我做错了什么，我无法看到包含我正在呼叫的内容的表格。
我的控制器
class Grid extends Controller
{
public function f()
{
$this->load->model('dbgrid');
$var['grid'] = $this->dbgrid->getcontentfromtable();
foreach($var['grid'] as $row) {
$responce->rows[$i]['id']=$row->id;
$responce->rows[$i]['cell']=array($row->id,$row->id_catalogo);
}
$json = json_encode($responce);
$this->load->view('vgrid',$json);
}
function load_view_grid()
{
$this->load->view('vgrid');
}
}
我的模特
class Dbgrid extends Model{
function getcontentfromtable()
{
$sql = 'SELECT * FROM anuncios';
$query = $this->db->query($sql);
$result = $query->result();
return $result;
}
我的观点（脚本）
$(document).ready(function() {
jQuery("#list27").jqGrid({
url:'http://localhost/sitio/index.php/grid/f',
datatype: "json",
mtype: "post",
height: 255,
width: 600,
colNames:['ID','ID_CATALOGO'],
colModel:[
{name:'id',index:'id', width:65, sorttype:'int'},
{name:'id_catalogo',index:'id_catalogo', sorttype:'int'}
],
rowNum:50,
rowTotal: 2000,
rowList : [20,30,50],
loadonce:true,
rownumbers: true,
rownumWidth: 40,
gridview: true,
pager: '#pager27',
sortname: 'item_id',
viewrecords: true,
sortorder: "asc",
caption: "Loading data from server at once"
});
});
答案 0 :(得分：3)
您在评论中发布的服务器生成的数据
{"rows":{"":{"id":"11","cell":["11","225101503"]}}}
格式错误。输出应该看起来像
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
（见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data）。所以它应该至少像
{"rows":[{"id":"11","cell":["11","225101503"]}]}
通常，如果您定义jsonReader，您几乎可以读取任何数据。您生成的数据只能由函数定义的jsonReader重新生成（请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#jsonreader_as_function和jquery with ASP.NET MVC - calling ajax enabled web service）。最简单的方法是更改服务器代码以生成标准formet中的数据（参见上文），可以通过标准jsonReader进行处理。
还有一个小小的评论。使用sorttype对datatype: "json"无效。参数sorttype仅适用于本地数据的排序。在datatype: "json"的情况下，服务器将负责正确的数据排序。 jqGrid只向服务器发送列名，用户可以选择进行数据排序。
答案 1 :(得分：3)
我是代码点火器的新程序员。 我正在尝试将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);
}
}
最后，您在application / 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中，我将jquery-1.5.2.min.js，grid.locale-en.js（views / js / i18n /），jquery.jqGrid.min.js放在jqgrid包中。
以同样的方式jquery-ui-1.8.16.custom.css，ui.jqgrid.css需要在jqgrid包中也可用。
要运行完整进程，您必须创建一个名为jqgrid_sample的数据库，并在数据库中创建一个名为info的表包含字段...
ID
名称
电子邮件
护照
电话
传真
地址
就是这样。请享用。再见。
答案 2 :(得分：0)
这些解决方案是覆盖完整的JqGrid数据加载和CRUD。 这是非常简单的任务。只需完成以下步骤即可享受。
写下一个模型如下
class gridAction_model extends CI_Model {
public function __construct() {
$this->load->database();
}
function getAllTeacherDesignation($start, $limit, $sidx, $sord, $where) {
$this->db->select('DesignationId,DesignationName,Description,Status');
$this->db->limit($limit);
if ($where != NULL)
$this->db->where($where, NULL, FALSE);
$this->db->order_by($sidx, $sord);
$query = $this->db->get('TeacherDesignation', $limit, $start);
return $query->result();
}
function insert_teacherDesignation($data) {
return $this->db->insert('TeacherDesignation', $data);
}
function update_teacherDesignation($id, $data) {
$this->db->where('DesignationId', $id);
return $this->db->update('TeacherDesignation', $data);
}
function delete_teacherDesignation($id) {
$this->db->where('DesignationId', $id);
$this->db->delete('TeacherDesignation');
}
}
现在将以下方法添加到Controller类
class grid_action extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper("form");
$this->load->model("gridAction_model");
}
public function loadTeacherDesignationData() {
$page = isset($_POST['page']) ? $_POST['page'] : 1;
$limit = isset($_POST['rows']) ? $_POST['rows'] : 10;
$sidx = isset($_POST['sidx']) ? $_POST['sidx'] : 'DesignationName';
$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('TeacherDesignation');
if ($count > 0) {
$total_pages = ceil($count / $limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages)
$page = $total_pages;
$query = $this->gridAction_model->getAllTeacherDesignation($start, $limit, $sidx, $sord, $where);
$responce = new stdClass;
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i = 0;
foreach ($query as $row) {
$responce->rows[$i]['id'] = $row->DesignationId;
$responce->rows[$i]['cell'] = array($row->DesignationId, $row->DesignationName, $row->Description, $row->Status);
$i++;
}
echo json_encode($responce);
}
public function crudTeacherDesignation() {
$oper = $this->input->post('oper');
$id = $this->input->post('id');
$DesignationId = $this->input->post('DesignationId');
$DesignationName = $this->input->post('DesignationName');
$Description = $this->input->post('Description');
$Status = $this->input->post('Status');
switch ($oper) {
case 'add':
$data = array('DesignationId' => $DesignationId, 'DesignationName' => $DesignationName, 'Description' => $Description, 'Status' => $Status);
$this->gridAction_model->insert_teacherDesignation($data);
break;
case 'edit':
$data = array('DesignationId' => $DesignationId, 'DesignationName' => $DesignationName, 'Description' => $Description, 'Status' => $Status);
$this->gridAction_model->update_teacherDesignation($DesignationId, $data);
break;
case 'del':
$this->gridAction_model->delete_teacherDesignation($DesignationId);
break;
}
}
}
在视图中添加脚本
<table id="gridDesignation"> </table>
<div id="pager"> </div>
$(document).ready(function () {
jQuery("#gridDesignation").jqGrid({
url:'<?php echo base_url(); ?>grid_action/loadTeacherDesignationData',
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Designation ID','Designation Name','Description','Status'], //Grid column headings
colModel:[
{name:'DesignationId',index:'DesignationId', width:100, align:"left", editable:true, editrules:{required:true}},
{name:'DesignationName',index:'DesignationName', width:150, align:"left",editable:true,editrules:{required:true}},
{name:'Description',index:'Description', width:100, align:"left", sortable:false, editable:true,editrules:{required:true}},
{name:'Status',index:'Status', width:100, align:"right",editable:true,editrules:{required:true},
edittype:'select', editoptions:{value:"1:Active;0:InActive"}
}
],
rownumbers: true,
rowNum:10,
width: 750,
height: "100%",
rowList:[10,20,30],
pager: jQuery('#pager'),
sortname: 'DesignationName',
autowidth: true,
viewrecords: true,
gridview: true,
ondblClickRow: function(id){
$("#gridDesignation").editGridRow(id, {closeAfterEdit:true,mtype:'POST'});
},
sortorder: "desc",
editurl: '<?php echo base_url() ?>grid_action/crudTeacherDesignation', //URL Process CRUD
multiselect: false,
caption:"List Of Teacher Designation"
}).navGrid('#pager',
{view:true,edit:true,add:true,del:true},
{closeOnEscape:true},
{closeOnEscape:true},
{closeOnEscape:true},
{closeOnEscape:true},
{
closeOnEscape:true,closeAfterSearch:false,multipleSearch:false,
multipleGroup:false, showQuery:false,
drag:true,showOnLoad:false,sopt:['cn'],resize:false,
caption:'Search Record', Find:'Search',
Reset:'Reset Search'
}
);
});
答案 3 :(得分：0)
请注意，此处使用的triand示例代码多次具有 SQL注入风险。在生成$where字符串之前，你应该将你的searchString转义为;
替换它：
$where = "$searchField $ops '$searchString' ";
：
$searchString = mysql_real_escape_string($searchString);
$where = "$searchField $ops '$searchString' ";