前几天在网上看见了jqGrid插件 觉得还不错就拿来学习下,从网上找的实例各种有毛病 照着做的话总是出现问题 并且还并不是最新版本。
经过参照前辈大神们的经验 今天终于搞出来了(只是还有一点需要连接数据库的 ,以后补充)
第一步:
下载jquery jqGrid 官方网址是:http://www.trirand.com/blog/?page_id=6
下载之后解压缩之后如下图:
第二步:
从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目录中)。有了所有需要的文件后,你就可以安装了
第三步:将jqGrid包中css目录下的ui-jqgrid.css以及plugin目录下的ui.multiselect.css都复制到web的css目录下
将JQuery UI包中的css目录下的所有都复制到web的css目录下
将jqGrid包中js目录下的所有目录和文件复制到web的js目录下
第四步:
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.10.0.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.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.jqGrid.src.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:'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: "1" //行id 定义为0时 行不能选中
},
rowNum:2,
rowList:[10,20,30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
});
$('#list').navGrid('#pager', {
refresh : true,
edit : true,
add : true,
del : true,
search : true,
refreshtitle : "刷新",
edittitle : "修改",
addtitle : "添加",
deltitle : "删除",
searchtitle : "搜索"
});
//alert(jQuery("#list").getGridParam('userData'));
// alert(jQuery("#list").getUserData() + ":" + jQuery("#list").getUserDataItem( "tax" ));
});
</script>
</head>
<body>
<div align="center">
<table id="list"></table>
</div>
<div id="pager"></div>
</body>
</html>
第五步: data.jsp代码:
{
"page":1,
"total":2,
"records":4,
"rows":[
{
"id":0,
"name":"sfsf",
"amount":10,
"tax":30,
"total":50.1,
"note":"3eee2",
"email":"766915976@qq.com",
"item.price":"1000.72",
"item.weight":"1.22",
"stock":"true",
"ship":"1"
},
{
"id":1,
"name":"sfsf",
"amount":10,
"tax":30,
"total":50.1,
"note":"3eee2"
},
{
"id":2,
"name":"sfsf",
"amount":10,
"tax":30,
"total":50.1,
"note":"3eee2"
},
{
"id":3,
"name":"sfsf",
"amount":10,
"tax":30,
"total":50.1,
"note":"3eee2"
}]
}
到此:根据jsp生成的Demo完成