最近在选择一套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"}
]
}
- 大小: 4.7 KB
分享到:
相关推荐
jqGrid4.2 2011-12-1最新版本
jqGrid是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。
MVC4网站中集成jqGrid表格插件-示例源代码
MVC4网站中集成jqGrid表格插件-示例源代码,包含基础basecontroller,以及5个controller
# jqgrid jquery plugin packaged for the rails asset pipelinegem 'jqgrid-jquery-rails' , '~> 4.6.001' 然后执行: $ bundle 或将其自己安装为: $ gem install jqgrid-jquery-rails 宝石版本注意事项: 版本的...
截止今天最新的程序,看好日期哟,另外截止今天官网的正式版还没有出来,请不要被骗
jQgrid+demo
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqGrid没有setComplexGroupHeaders方法,使用此插件实现三级分组表头功能
jqGrid增加时--判断开始日期与结束日期(实例代码)。需要的朋友可以过来参考下,希望对大家有所帮助
NULL 博文链接:https://only-xxp.iteye.com/blog/768029
jqgrid-contextmenu-show-hide-columns jQGrid 具有显示/隐藏列功能(上下文菜单) 此存储库是讨论在 jqGrid 中添加显示/隐藏列功能的最佳方法的草案。 在列中添加可见性属性 右键单击标题以显示带有列复选框列表...
jquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zip
jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jquery.jqGrid-4.4.3,用于web页面的列表分页显示
jquery.jqGrid-4.5.2.zip 官方资源文件
Jqgrid demo-史上最强大,没有之一, 为了大家能够更好的学习和使用Jqgrid网格插件,我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实现一个Jqgrid网格插件的demo。当然官方网站上面已经有了PHP版本和ASP.NET版本...
jqgrid jquey 样式 让表格变得更漂亮
JqGrid插件包,包含国际化语言插件