JqGrid4.2实践-1-安装
最近在选择一套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、页面组织
如果需要单独使用功能可以将jqgrid包中的src目录复制到web的js目录下
修改grid.loader.js文件
不需要加载的功能可以在文件中自行选择进行注释掉
5、第一个页面
JSP页面内容
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:"[email protected]",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"}
]
}