增强型表格/报表-jqGrid使用浅析

    jqGrid是一个基于Jquery的表格插件，官网地址：http://www.trirand.com/blog演示地址：http://www.trirand.com/jqgrid/jqgrid.html大家可以去下载开发包，使用这个插件又需要jquery-ui，所以这个组件也是必须的。
    和众多juery插件一样，这款插件的后台代码也是PHP的，而实际项目中使用的Struts2，我不得不又一次翻译代码并集成到Struts2中，后台和js交互的数据类型是json，这就需要一个json处理类来负责数据格式的转换。
    前端必须的css是：ui.jqgrid.css 在jqGrid中；jquery-ui.css 在jquery-ui中
    必须的js是：jquery.js jquery.jqGrid.js grid.locale-cn.js 最后一个是中文资源文件，其实我是按照英文文件自己翻译过来的
    若需要日期选择框，还需要ui.datepicker.css ui.datepicker.js
   下面是代码说明：
HTML代码：

<table id="list" class="scroll" width="100%"></table>
<div id="paging" class="scroll" style="text-align: center;"></div>

Table是这个插件使用的原始HTML的table，div来用于显示分页。Id值是自定义的，这个只要和js代码中的相关配置一致即可，都没什么说的，class是这个组件css中的样式
JS代码：

<script type="text/javascript"> 
var lastsel;
jQuery("#list").jqGrid({
   	url:'${base}/manage/user/userlist.action',
	datatype: 'json',
   	autowidth:true,
   	height:220,
   	rownumbers: true,
   	colNames:['用户ID','登录名','真实名','性别','生日'],
   	colModel:[	
   		{name:'userId',index:'userId', width:55,align:'center'},	
   		{name:'userName',index:'userName', width:55,align:'center',editable:true},	
   		{name:'realName',index:'realName', width:55,align:'center',editable:true},	
   		{name:'sex',index:'sex', width:55,align:'center',editable:true,edittype:"select",editoptions:{value:"男:男;女:女"}},
   		{name:'birthday',index:'birthday', width:55,align:'center',editable:true,sorttype:"date"}
   	],
  	rowNum:10,
   	rowList:[10,20,30],
   	imgpath: 'css3/images',
   	pager: jQuery('#paging'),
   	sortname: 'id',
    sortorder: "desc",
    multiselect: true,
    caption:"用户列表",
    onSelectRow: function(id){
		if(id && id!==lastsel){
			jQuery('#list').restoreRow(lastsel);
			jQuery('#list').editRow(id,true,pickdates);
			lastsel=id;
		}
	},
    editurl:" ${base}/manage/user/user!edit.action",
}).navGrid("#paging",{edit:false,add:true,del:true});
 
function pickdates(id){
	jQuery("#"+id+"_birthday","#list").datepicker({dateFormat:"yy-mm-dd"});
}
</script>

代码解释：
url是后台数据传送过来的地址，这里我用Struts2，没什么好说的了
datatype使用的是json，官方演示中还可以使用xml和js数组等，可以参考
autowidth按字面意思理解即可，列宽度自适应
hight就是控件的现实高度了
rownumbers指定是否给显示从1开始的编号
colNames是表头显示的内容了
colModel就是具体数据的显示了这里可以参考官方演示，非常详细
需要说明的是editable，该列是否可编辑 edittype指定可编辑的类型
RowNum指定每次显示的数据量
RowList是可选的现实数据量
Imgpath 还没琢磨明白具体的含义
Pager 就是分页了，上面指定过的div那层
sortname排序的依据列
sortorder 排序方式
multiselect 是否可以多选，用于批量删除
caption 表格的标题显示(这里的文字只能左对齐，我还没有找到居中的做法，还请高手赐教)
onSelectRow就是当选定一行时，执行什么操作，这里是选定时将表格变为input可编辑效果
editurl是做更新操作时的请求地址，那么在这个方法中区分是更新还是删除了
下面的js函数就是做日期选择用的了。
下面是后台代码说明：

/**
	 * 显示用户列表，封装为JsonView类型，前端使用jqGrid插件。设置的变量名都不得更改
	 * 集合类均使用泛型
	 * @author Sarin
	 */
	public String userlist() {
		//准备jqGrid分页参数
		int total_pages = 0;
		int limit = Integer.parseInt(rows);
		int t_page = Integer.parseInt(page);
		if (sidx == null) {
			sidx = "userId";
		}
		//查询需要分页数据的总记录数
		int count = Integer.parseInt(getServMgr().getUserService().getUsersCount());
		//计算分页参数
		if (count > 0) {
			total_pages = (int) Math.ceil(count / limit) + 1;
		}
		if (t_page > total_pages) {
			t_page = total_pages;
		}
		int start = limit * t_page - limit;
		//获取记录列表
		List users = getServMgr().getUserService().getAllUsers(sidx + " " + sord, start, limit);
		List<Map> rows = new ArrayList<Map>();
		for (int i = 0; i < users.size(); i++) {
			Map<String, Object> map = new HashMap<String, Object>();
			//封装jqGrid可识别的数据格式
			Object[] cell = new Object[] { ((Map) users.get(i)).get("USERID"), ((Map) users.get(i)).get("USERNAME"),
					((Map) users.get(i)).get("REALNAME"), ((Map) users.get(i)).get("SEX"),
					((Map) users.get(i)).get("BIRTHDAY") };
			map.put("id", ((Map) users.get(i)).get("USERID"));//设置更新时的更新依据，一般为主键
			map.put("cell", cell);
			rows.add(map);
		}
		//构建Json类型的数据，参数名不可为其他的
		JSONObject result = new JSONObject();
		result.put("total", total_pages);
		result.put("records", count);
		result.put("page", t_page);
		result.put("rows", rows);
		//封装成jsonView向客户端输出
		jsonView = new JsonView(result);
		return "userlist";
	}

Struts2的配置

<result-types>
  <result-type name="jsonView" class="***.***.util.json.JsonResult" />
</result-types>

<action name="userlist" class="***.***.action.UserAction" method="userlist">
    <result name="userlist" type="jsonView">
	<param name="jsonObjName">jsonView</param>
    </result>
</action>

JsonResult源码

package ***.***.util.json;

import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.dispatcher.StrutsResultSupport;
import com.opensymphony.xwork2.ActionInvocation;

public class JsonResult extends StrutsResultSupport {
	private String contentTypeName;
	private String jsonObjName = "";
	public void setContentTypeName(String contentTypeName) {
		this.contentTypeName = contentTypeName;
	}
	public void setJsonObjName(String jsonObjName) {
		this.jsonObjName = jsonObjName;
	}
	@Override
	protected void doExecute(String finalLocation, ActionInvocation invocation) throws Exception {
		HttpServletResponse response = (HttpServletResponse) invocation.getInvocationContext().get(HTTP_RESPONSE);
		String contentType = conditionalParse(contentTypeName, invocation);
		if (contentType == null) {
			contentType = "text/json;charset=UTF-8";
		}
		response.setContentType(contentType);
		PrintWriter out = response.getWriter();
		JsonView result = (JsonView) invocation.getStack().findValue(jsonObjName);
		out.println(result);
		out.flush();
		out.close();
	}
}

效果图：

评论

9 楼 sarin 2011-10-19  

yaozx027 写道

请教楼主：我在在线行编辑的时候日期控件不能使，也就是说我进行行编辑的时候，如果对OrderDate这一列进行编辑，控件出不来，只能通过键盘操作。求解。代码如下：
@model MvcApplication2.Models.OrdersJqGridModel
@using Trirand.Web.Mvc
<p>
    <script type="text/javascript" src="/Scripts/trirand/jquery.jqDatePicker.min.js"></script>   
    <script type="text/javascript">

        var lastSelection;
        function editRow(id) {
            if (id && id !== lastSelection) {
                var grid = $("#EditRowInlineGrid");
                grid.restoreRow(lastSelection);
                grid.editRow(id, true);
                lastSelection = id;
            }
        }
      
       </script>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

@Html.Trirand().JQGrid(Model.OrdersGrid, "EditRowInlineGrid")
@Html.Trirand().JQDatePicker(
            new JQDatePicker
                {
                    DisplayMode = DatePickerDisplayMode.ControlEditor,
                    ShowOn = ShowOn.Focus,                   
                    DateFormat = "yyyy/mm/dd",                                       
                    MinDate = new DateTime(1995,1,1),
                    MaxDate = new DateTime(2012,12,21)
                }, "DatePicker")
     

我使用的是jqueryUI中的datepicker

8 楼 yaozx027 2011-10-19  

请教楼主：我在在线行编辑的时候日期控件不能使，也就是说我进行行编辑的时候，如果对OrderDate这一列进行编辑，控件出不来，只能通过键盘操作。求解。代码如下：
@model MvcApplication2.Models.OrdersJqGridModel
@using Trirand.Web.Mvc
<p>
    <script type="text/javascript" src="/Scripts/trirand/jquery.jqDatePicker.min.js"></script>   
    <script type="text/javascript">

        var lastSelection;
        function editRow(id) {
            if (id && id !== lastSelection) {
                var grid = $("#EditRowInlineGrid");
                grid.restoreRow(lastSelection);
                grid.editRow(id, true);
                lastSelection = id;
            }
        }
      
       </script>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

@Html.Trirand().JQGrid(Model.OrdersGrid, "EditRowInlineGrid")
@Html.Trirand().JQDatePicker(
            new JQDatePicker
                {
                    DisplayMode = DatePickerDisplayMode.ControlEditor,
                    ShowOn = ShowOn.Focus,                   
                    DateFormat = "yyyy/mm/dd",                                       
                    MinDate = new DateTime(1995,1,1),
                    MaxDate = new DateTime(2012,12,21)
                }, "DatePicker")
     

7 楼 luosky 2009-12-16  

luosky 写道

其封装的cell字段用数组形式,其顺序直接就是前台展示字段的顺序,这点太不合理了.不知道有没有其他的方法可以后台能用map形式输出,前台通过键去获取数据展示么?

在 http://a3mao.iteye.com/blog/539929 上找到答案了

6 楼 luosky 2009-12-16  

其封装的cell字段用数组形式,其顺序直接就是前台展示字段的顺序,这点太不合理了.不知道有没有其他的方法可以后台能用map形式输出,前台通过键去获取数据展示么?

5 楼 pp7765 2009-11-29  

解决了，可以在选择事件时登记一下，也可以在翻页事件时登记

4 楼 pp7765 2009-11-29  

再请教LZ：
在可选择表格中，选定几条数据后如果翻页后就丢失了，例如在第一页选择了第3、6条记录，然后翻页到第二页再选择第12、13条，这时候Get Selected id's只能得到12、13.

有办法记录前页选择的记录不？

3 楼 pp7765 2009-11-29  

yes,谢谢LZ

2 楼 sarin 2009-11-29  

pp7765 写道

请问LZ：html代码如果外加一个层：
<div>
<table id="list" class="scroll" width="100%"></table> 
<div id="paging" class="scroll" style="text-align: center;"></div> 
</div>

页面就会出错，为什么？
谢谢！

您好，我经过测试没有发现问题，是不是您的页面没有文档类型的声明？
加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
试试

1 楼 pp7765 2009-11-29  

请问LZ：html代码如果外加一个层：
<div>
<table id="list" class="scroll" width="100%"></table> 
<div id="paging" class="scroll" style="text-align: center;"></div> 
</div>

页面就会出错，为什么？
谢谢！