如何在JQGridview

问题描述:

我喜添functionalty在concrete5 CMS工作,它的Zend基于CMS框架和MVC模式如何在JQGridview

我尝试我的数据操纵到jqgridview,它在GridView返回数据,但分页不工作,我不知道如何添加编辑,删除和查找功能在jqgridview ,也是我得到在GridView中心“未定义”错误

脚本:

$(function() { 

    $("#eList").jqGrid({ 
     datatype: "local", 
     data: <?php echo json_encode($emplist) ?>, 
     pager: true, 
     colNames:['Emp ID','Name','Email', 'Role', 'Contact No','Status'], 
     colModel:[ 
      {name:'emp_id',index:'emp_id', width:55}, 
      {name:'emp_name',index:'emp_name', width:90, editable:true}, 
      {name:'uEMail',index:'uEMail', width:100}, 
      {name:'role_name',index:'role_name', width:80, align:"right"}, 
      {name:'emp_contact_no',index:'emp_contact_no', width:80, align:"right",editable:true}, 
      {name:'status_name',index:'status_name', width:80,align:"right"} 
     ], 
     rowNum:5, 
     rowList:[5,10,20], 
     pager : '#ePage', 
     sortname: 'emp_name', 
     viewrecords: true, 
     sortorder: "desc", 
     editurl: "local", 
     caption: "Using navigator" 
    }); 

    $("#eList").jqGrid('navGrid',selector,options,pEdit,pAdd,pDel,pSearch); 

    $("#eList").jqGrid('navGrid',"#ePage",{edit:true,add:true,del:true}); 

    $("#eList").jqGrid('inlineNav',"#ePage"); 
}); 

HTML

<table id = "eList" > 
</table> 
<div id = "ePage" > 
</div> 

请建议我如何添加的功能,或任何很好的例子或jqGrid的的演示或学习的jqGrid

为了能够使用本地分页数据的服务器有关的任何链接(<?php echo json_encode($emplist) ?> )应该返回全部数据,您应该包含选项loadonce: true。我建议您另外使用选项gridview: trueautoencode: true。我建议您从colModel中删除所有index属性,并将key: true选项添加到emp_id列的定义中,如果它的值是唯一的并且可用作rowid(id属性的值为<tr>元素的值)。

您应该删除包含未定义变量的行$("#eList").jqGrid('navGrid',selector,options,pEdit,pAdd,pDel,pSearch);

+0

嗨,我已经阅读了大部分有关jqgrid的答案和演示页面。在我的代码中,只是在gridview中显示它的值。如果添加寻呼机:真,寻呼机:'#ePage',这两行。它显示undebined –

+0

首先我想知道哪些是js和css文件为此jqgrid添加 –

+0

@KumarShanmugam:关于CSS和JS文件请参阅[这里](http://www.trirand.com/jqgridwiki/doku.php? ID =维基:first_grid#html_file)。添加“pager:true”是错误的。像“pager:true”,“pager:'#ePage”这样两次添加两个属性也是错误的。我建议你在调试器中打开页面。例如,您可以使用Internet Explorer,按F12启动开发人员工具,转到“脚本”字幕,然后启动“开始调试”按钮。它允许你**看到带有未定义错误的行**。 – Oleg