JQGrid 学习【一】

最新推荐文章于 2024-09-09 09:35:48 发布

choujianpie4690

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量148

点赞数

文章标签： javascript json ui ViewUI

原文链接：https://my.oschina.net/tulongx/blog/416093

版权

其实本来是看到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里面的的标签改为中文,然后就正常了......

转载于:https://my.oschina.net/tulongx/blog/416093

choujianpie4690

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQGrid 学习【一】

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

扫一扫