求教jqgrid用jsp的兑现

求教jqgrid用jsp的实现
我在网上查了很多资料，示例很少，官方示例是用php写的，不懂
我想用jsp写，后来找到一个代码：http://huashui.org/post/jqgrid-base-study-7.html
但他用的是struts2，我只想用1，不知如何写
我写的jsp代码如下，查询和刷新按钮无法显示，无法实现分页功能，请各位高手指教后台程序怎么写
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>

<style>
html,body {
margin: 10; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}

.ui-tabs-nav li {
position: relative;
}

.ui-tabs-selected a span {
padding-right: 10px;
}

.ui-tabs-close {
display: none;
position: absolute;
top: 3px;
right: 0px;
z-index: 800;
width: 16px;
height: 14px;
font-size: 10px;
font-style: normal;
cursor: pointer;
}

.ui-tabs-selected .ui-tabs-close {
display: block;
}

.ui-layout-west .ui-jqgrid tr.jqgrow td {
border-bottom: 0px none;
}

.ui-datepicker {
z-index: 1200;}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list1").jqGrid({ //jqGrid固定的写法:jQuery("#list").jqGrid({参数})
datatype: "local", //数据来源，本地数据
height: 250,//表格高度
width:1000, //表格宽度
colNames:['编号','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}

],
pager: '#pager', //分页工具栏
imgpath: 'themes/redmond/images', //图片路径
rowNum:10, //每页显示记录数
viewrecords: true, //是否显示行数
rowList:[10,20,30], //可调整每页显示的记录数
multiselect: false, //是否支持多选
sortname: 'id',//根据哪个字段排序
caption: "jqGrid表格测试", //表格标题
recordtext: "记录 {0} - {1} of {2}",//显示记录数的格式
emptyrecords: "无数据",//空记录时的提示信息
loadtext: "获取数据中...",//获得数据时的提示信息
pgtext : "第几页 {0} 总页数 {1}"//页数显示格式
});

var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"11",invdate:"2008-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"10",invdate:"2009-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"12",invdate:"2017-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list1").addRowData(i+1,mydata[i]);

});
</script>
<body>

<table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll"></div>
</body>

</head>

<body>

</body>
</html>

[解决办法]
刚想回答你呢你就搞出来了下次搞慢点。jqgrid之前我也在用，蛮不错的，不过一开始上手确实很郁闷。

主要麻烦的地方就是后台返回的json的定制。
自认为对这个还是比较熟悉了，有问题可以留言给我，很高兴能帮到你。
[解决办法]
一下是查询代码：
function query(){
$("#list").setGridParam({page:1,postData:{searchCustomerName:$("#searchCustomerName").val(),searchOrderId:$("#searchOrderId").val(),
searchIpAddress:$("#searchIpAddress").val(),searchSalse:$("#searchSalse").val()}});
$("#list").trigger("reloadGrid");//刷新表格

}

作一下说明：
page:1---使得每次查询后返回到第一页，这里的page 应该可以在request里面获得

postData 为查询参数，可以多个，格式如上，
[解决办法]
$('#list1').navGrid('#nav',{refresh: true,edit: true, add: true,del: true,search: true,refreshtitle:"刷新",edittitle:"修改",addtitle:"添加",deltitle:"删除",searchtitle:"搜索"});
});

它默认的查询修改删除按钮我都没用。
而是通过超链接去调用自己写好的方法，再通过ajax去后台删，完了刷新下表，比如删除或批量删除：
//jqGrid删除单条记录
function jqGridDel(jqGridId,url,id,idName){
if (!confirm("是否删除记录？","是","否")){
return;
}
var param = {};
if (idName == null || idName == ''){
idName = "entityId";
}
eval("param."+idName+"=id");//这里是像后台传递一个 entittyId=??的主键标识，当然这个值是在后台写超链接的时候写进去的。忘了说：json 里面的可以是超链接。
$.get(url,param,
function(data,textStatus){
if(data.success == true){
//alert("成功删除一条记录！");
$(jqGridId).trigger("reloadGrid");
if($("#tagTree").length>0){
$.tree_reference('tagTree').refresh();
}
}else{
alert(data.message);
}
},"json");
}

[解决办法]
我之前都没有用他自带的按钮。都是自己弄个button然后去调它的接口
网站上的demo你多看看。

求教jqgrid用jsp的兑现

热点推荐