浏览 5384 次
|
锁定老帖子 主题：JqGrid4.2实践-1-安装
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-11-22
最近在选择一套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"}
]
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
