JQGrid 学习【一】

原创
2015/05/18 10:58
阅读数 143

    其实本来是看到ejb之类的控件做起来页面很漂亮,再看普通的jsp中的table那么难看,就想着搜索一下有什么好看的jquery插件,就看到了jqgrid。感觉还行,就拿来学了1天,差不多能够简单应用了,当然没有将全部的功能都撸一遍。

    下面就正式开始了,从简单到复杂一点点,然后再说说怎么使用高级应用。

一、下载准备jqgrid

官方下载点:http://www.jqgrid.com,最新的版本应该是4.8;

jqgrid使用的ui是jquery-ui,如果觉得自带的太丑了,可以下载一个喜欢的jquery-ui;

地址:http://jqueryui.com/themeroller/,默认的ui是灰色,如果希望其他的,在左侧选择:


二、demo参考

第一次拿到jqgrid的时候,不知道从什么地方入手,那么就看看官网的demo:

英文版:http://www.trirand.com/blog/jqgrid/jqgrid.html

中文版:http://blog.mn886.net/jqGrid/

建议看英文版的demo,因为英文版的demo,在样例中可以查看整个页面的源码,而中文版的没有;


三、实例

3.1 页面引入jqgrid和jquery-ui

下载的jqgrid目录结构如下:

其中css是jqgrid的样式,用到文件ui.jqgrid.css

js中用到的:jquery.jqGrid.min.js

如果不想下载jquery,可以直接用里面的:jquery-1.11.0.min.js

i18n是国际化,主要是jqgrid的标签国际化:i18n/grid.locale-cn.js

【这里用到中文的话其实有点问题,不过解决方法很简单,后面会讲解】

jquery-ui:

引入:jquery-ui.css,其他的目录文件不变,直接引入工程


3.2 新建工程[web工程]

工程的目录结构就不截图了

3.3 构建测试数据

这里可以自己新建map作为测试数据,或者使用数据库,我这里使用的是mysql数据;

新建user表,字段为了测试有timestamp;

3.4 新建测试页面index.jsp

引入外部css和js:

<link rel="stylesheet" media="screen" type="text/css" href="<%=path%>/js/jquery-ui/jquery-ui.css"/>
<link rel="stylesheet" media="screen" type="text/css" href="<%=path%>/js/css/ui.jqgrid.css"/>
<script type="text/javascript" src="<%=path%>/js//jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.jqGrid.min.js"></script>

页面中body部分:

<body>
<table id="list"></table>
<div id="pager"></div>
</body>

其中table是数据显示位置,div是分页栏;

脚本:

<script type="text/javascript">
  $(function(){
      var rando = <%=new java.util.Random().nextInt() %>;
      $("#list").jqGrid({
            url:'userInfoServlet.do?rand=' + rando,// 获取数据的url,action
            datatype: "json",//后台返回的数据格式
            mtype:"get",//提交的方式,默认是get
            height:400,//高度,表格高度。可为数值、百分比或'auto'
            //width:1024,//这个宽度不能为百分比,
            autowidth:true,//自动宽
            colNames:['登陆名', '密码', '中文名称','英文名称','email','qq','座机号','手机号','最后登录时间','是否锁定'],
            colModel:[
                       {name:'loginName',index:'loginName', editable:true,sortable:true},
                       {name:'loginPass',index:'loginPass', width:100,editable:true},
                       {name:'name',index:'name', align:"center",editable:true},
                       {name:'ename',index:'ename', align:"center",editable:true},       
                       {name:'email',index:'email', sortable:false,editable:true},
                       {name:'qq',index:'qq', sortable:false,editable:true},
                       {name:'tel',index:'tel', sortable:false,editable:true},
                       {name:'phone',index:'phone', sortable:false,editable:true},
                       {name:'lastLoginTime',index:'lastLoinTime', sortable:false,editable:true,formatter:'date',formatoptions: {srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'}},
                       {name:'islock',index:'islock', align:"center",formatter:function(cellvalue, options, rowObject){if(cellvalue=="00"){return "未锁定";} else if(cellvalue=="11"){return "锁定";} else {return "剩余1次";}}}
                   ],
            postData:{page:1,hahah:123},//此参数用来向后台提交数据*****可以自己添加需要的参数
            caption:"用户管理-增删改",//表名称
            multiselect: true,//开启多选
            rowNum:10,//每页显示的条数,此参数会被传递到后台
            rowList:[10,20,30,50],//定义每页显示的条数下拉框选择,会覆盖rowNum
            viewrecords: true,//定义是否显示总的数据条数
            pager: '#pager',//定义翻页用的导航栏,必须是有效的html元素,可以放在任意位置
            rownumbers:true//添加左侧行号
        });
        $("#list").jqGrid('navGrid','#pager', {edit:true,add:true,del:true,search:true,refresh:true,addtext:'添加'});  
  });
</script>

各参数说明:

3.4.1 高度和宽度,注意不能加px,只写数值就可以了,也可以依据自己情况传入参数;

3.4.2 列表项

colNames

这个参数是定义结果记录的表头,有多少项就写多少个参数:

3.4.3 列表项格式

colModel

name:当前列的标识,可以理解成对应表字段名

index:传到后台的,用于排序的标识,

editable:true,是否允许编辑,这个一般是在编辑行数据的时候用到

sortable:true,是否允许排序,点击标题排序

align:"center",内容位置,left,center,right

postData:自定义参数,默认jqgrid会传入后台一些数据,也可以用这个参数来自定义一些想要传入的参数;

其他的参数可以搜索网上的说明,有很多,这里不做过多介绍。

如果数据有日期格式的,那么可以参看上面的lastLoginTime格式化日期,

下面的islock参数其实后台传入的是字符串,但是也可以依据自己的需求显示中文,常用的如性别之类的;

3.5 后台数据处理

新建简单的servlet,在web中配置好,

UserInfoServlet重写goGet方法:

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
		throws ServletException, IOException {
        //打印页面传递来的所有参数
	Enumeration enu=req.getParameterNames();  
		while(enu.hasMoreElements()){  
		String paraName=(String)enu.nextElement();  
		System.out.println(paraName+": "+req.getParameter(paraName));  
	}  
	//存储数据,转为json后传回页面
	Map<String, Object> map = new HashMap<String, Object>();
	map = buildReturn(map,req);
    // 使用json工具将map转化为json数据
    JsonConfig jsonConfig = new JsonConfig();
    jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);  //自动为我排除circle。
    //重写JsonValueProcessor,格式化date,默认的date格式没有带时分秒
    jsonConfig.registerJsonValueProcessor(Timestamp.class, new DateJsonValueProcessor());
    JSONObject json = JSONObject.fromObject(map,jsonConfig);
    resp.getWriter().write(json.toString());
}
private Map<String, Object> buildReturn(Map<String, Object> map,HttpServletRequest req) {
	// 从req中获取需要的参数
	Integer page = Integer.parseInt(req.getParameter("page"));// 当前的页数
	Integer rows = Integer.parseInt(req.getParameter("rows"));// 每页显示数据条数
	String sidx = req.getParameter("sidx");// 点击项目的id,依据这个进行排序,默认是空不是null
	String sord = req.getParameter("sord");// 排序的规则:asc / desc
	
	// 搜索
	String searchField = req.getParameter("searchField"); //搜索的字段名称 loginName
	String searchString = req.getParameter("searchString");// 输入的搜索条件 lo
	String searchOper = req.getParameter("searchOper");// 搜索条件 bw
	
	List<User> list = new ArrayList<User>();
	String sql = "select * from user where 1=1 limit 0,10 ";
	// 依据查询条件进行查询.
	if("".equals(sidx) || null == sidx){
		// 默认第一次加载的时候显示的数据
		sql = " select * from user where 1=1 limit " + (page -1 ) * rows + "," + rows + "";
		list = JDBCutils.getUsers(JDBCutils.getConnection(), sql);
	}else {
		sidx = StringUtils.lowerCase(sidx);
		sql = " select * from user where 1=1 order by "+ sidx + " " + sord +" limit " + (page -1 ) * rows + "," + rows + "";
		list = JDBCutils.getUsers(JDBCutils.getConnection(), sql);
	}
    //构建参数
    int countTotal = JDBCutils.exeSQL(JDBCutils.getConnection(), "select count(0) from user");
    int totalPageNum = (countTotal + (rows - 1)) / rows;// 总的页数
    if (totalPageNum < page) {//
    	page = totalPageNum;
    }
    
	map.put("total", totalPageNum);
	map.put("page", page);
	map.put("records", countTotal);
	map.put("rows", list);
	
    return map;
}

其中重写的DateJsonValueProcessor.java

public class DateJsonValueProcessor implements JsonValueProcessor {

    public static final String DEFAULT_DATE_PATTERN = "yyyy-MM-dd HH:mm:ss";
    private DateFormat dateFormat;

    public DateJsonValueProcessor() {
        this(DEFAULT_DATE_PATTERN);
    }

    public DateJsonValueProcessor(String datePattern) {
        try {
            dateFormat = new SimpleDateFormat(datePattern);
        } catch (Exception ex) {
            dateFormat = new SimpleDateFormat(DEFAULT_DATE_PATTERN);
        }
    }

    public Object processArrayValue(Object value, JsonConfig jsonConfig) {
        return process(value);
    }

    public Object processObjectValue(String key, Object value, JsonConfig jsonConfig) {
        return process(value);
    }

    /**
     * 这里对json的数值进行格式化处理
     */
    private Object process(Object value) {
        if (value instanceof Timestamp)
            return dateFormat.format((Timestamp) value);
        else if (value instanceof Date)
            return dateFormat.format((Date) value);
        else if (value == null)
            return "";
        else
            return value.toString();
    }

}

3.6 处理国际化时出现的问题

如果引入国际化的js:grid.locale-cn.js

会出现这样的情况:无论有没有数据,表格中间一直显示undefined,很多人说是因为加入了分页,要注释掉jqgrid中的pager:'#pager'这个行,其实不对,要么是没有引入国际化文件,要么就是中文国际化的问题。

解决:

第一种情况,只需要引入国际化文件grid.locale-en.js即可

第二种情况,就是中文导致错误,一般理解是文件编码异常,但是我检查了所有文件都是utf-8的,在servlet中加入编码转换也不行。最后没办法我就对比2个locale文件,发现区别就是标签不同其他都一样,我就直接修改en.js里面的的标签改为中文,然后就正常了......

展开阅读全文
打赏
0
3 收藏
分享
加载中
更多评论
打赏
0 评论
3 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部