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、页面组织
<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>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><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><%@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"} ] }