JqGrid4.2实践-1-安装

gongm_24

浏览: 143243 次
性别:
来自: 深圳

最近访客更多访客>>

mittermeyer

smilefei

zgycsmb

alex079

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS_JqGrid

jqgrid

    最近在选择一套UI控件，看了好多种，最终还是选择了JqGrid，虽然不太符合现在的需求，但也作为学习用。如果大家有什么好的推荐，请多多指教。

   JqGrid demo : http://www.trirand.com/blog/jqgrid/jqgrid.html
   JqGrid API : http://www.secondpersonplural.ca/jqgriddocs/index.htm

1、下载JqGrid
目前最新版的是4.2，解压后的目录如下图

2、下载JQuery UI主题
从jqGrid 3.5版开始，jqGrid 完全兼容UI主题。为此，你需要下载所需的主题。主题可从jQuery UI站点http://jqueryui.com/themeroller/中下载，你也可以创建你自己的主题，详细信息请访问http://jqueryui.com。如果你只使用表格组件，只需使用基本的CSS文件ui.theme.css和ui.core.css（位于UI主题包的development-bundle/themes目录中）。有了所有需要的文件后，你就可以安装了。

3、安装
将jqGrid包中css目录下的ui-jqgrid.css以及plugin目录下的ui.multiselect.css都复制到web的css目录下
将JQuery UI包中的css目录下的所有都复制到web的css目录下
将jqGrid包中js目录下的所有目录和文件复制到web的js目录下

4、页面组织

<link href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> 
<link href="${pageContext.request.contextPath}/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 
<link href="${pageContext.request.contextPath}/css/ui.multiselect.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.jqGrid.min.js"></script>

如果需要单独使用功能可以将jqgrid包中的src目录复制到web的js目录下
修改grid.loader.js文件

var pathtojsfiles = "js/src/";

不需要加载的功能可以在文件中自行选择进行注释掉

<link href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> 
<link href="${pageContext.request.contextPath}/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 
<link href="${pageContext.request.contextPath}/css/ui.multiselect.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/src/grid.loader.js"></script>

5、第一个页面

<script> 
jQuery(document).ready(function(){ 
jQuery("#list").jqGrid({ 
url:'jqgrid-demo-json-data.jsp', 
datatype: "json", 
mtype: 'POST', 
colModel:[ 
{name:'name',label:'Name', width:150,editable: true}, 
{name:'id',width:50, sorttype:"int", editable: true}, 
{name:'email',label:'Email', width:150,editable: true,formatter:'email'}, 
{name:'stock',label:'Stock', width:60, align:"center", editable: true,formatter:'checkbox',edittype:"checkbox"}, 
{name:'item.price',label:'Price', width:100, align:"right", editable: true,formatter:'currency'}, 
{name:'item.weight',label:'Weight',width:60, align:"right", editable: true,formatter:'number'}, 
{name:'ship',label:'Ship Via',width:90, editable: true,formatter:'select', edittype:"select",editoptions:{value:"2:FedEx;1:InTime;3:TNT;4:ARK;5:ARAMEX"}},      
{name:'note',label:'Notes', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}      
   ], 
jsonReader : { 
        root: "rows", 
        page: "page", 
        total: "total", 
        records: "records", 
        repeatitems: false, 
        userdata: "userdata", 
        id: "0" 
    }, 
   rowNum:10, 
   rowList:[10,20,30], 
   pager: '#pager', 
   sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    caption:"JSON Example" 
  }); 
  alert(jQuery("#list").getGridParam('userData')); 
  alert(jQuery("#list").getUserData() + ":" + jQuery("#list").getUserDataItem( "tax" )); 
}); 
</script> 
</head> 
<body> 
<table id="list"></table> 
<div id="pager"></div> 
</body> 
</html>

JSP页面内容

<%@page contentType="text/html;charset=UTF-8"%> 
{ 
   "page" : "1", 
   "total" : "1", 
   "records" : "4", 
   "userdata" : { totalinvoice:"1",tax:"sillycat"}, 
   "rows":[ 
      {id:"12345",name:"Desktop Computers",email:"josh@josh.com",item:{price:"1000.72", weight: "1.22" }, note:"note",stock:"0",ship:"1"}, 
      {id:"23456",name:"<var>laptop</var>",note:"Long text ",stock:"yes",item:{price:"56.72", weight:"1.22"},ship:"2"}, 
      {id:"34567",name:"LCD Monitor",note:"note3",stock:"true",item:{price:"99999.72", weight:"1.22"},ship:"3"}, 
      {id:"45678",name:"Speakers",note:"note",stock:"false",ship:"4"} 
    ] 
}

jquery.jqGrid-4.2.0.zip (482.5 KB)
下载次数: 364

jquery-ui-1.8.16.custom.zip (1 MB)
下载次数: 333

查看图片附件

分享到：

JqGrid4.2实践-2-集成Spring MVC | Json-lib 与 hibernate _lazy共同使用的问 ...

2011-11-22 19:32
浏览 2507
评论(2)
论坛回复 / 浏览 (0 / 5384)
分类:Web前端
查看更多

2 楼 576017120 2011-12-20

非常感谢你的分享，我不知道为什，在分页提交参数时老是绑定不上自定义的参数，我是下面这样写的
$("#recordtable").jqGrid({
......
postData:{ss:"dd",aa:"ddd"},
....
})
在页面第一次加载的时候能够绑定上我定义的参数，之后一直都是上传我第一次绑定的参数，我再这么修改也不起作用，后来想其他办法解决，看到了你的文章，进入了JqGrid API : http://www.secondpersonplural.ca/jqgriddocs/index.htm，之后通过
$("#recordtable").jqGrid().setGridParam({url:"/SelfManageApplication/validateCardData?startdate="+jsondatalist.startdate}); 这种办法解决了，我之前弄了半天，你知道为什么吗？官方api也是支持postData:{ss:"dd",aa:"ddd"}的，但死活不好用，请指教。

1 楼 tianyaxiang 2011-12-12

这个收费吗？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论