方式一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DEMO</title>
<%
String basePath = request.getContextPath();
%>
<link rel="stylesheet" type="text/css" href="/res/jquery-ui-1.12.1.custom/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/res/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css" />
<link rel="stylesheet" type="text/css" href="/res/Guriddo_jqGrid_JS_5.2.1/css/ui.jqgrid-bootstrap-ui.css" />
<link rel="stylesheet" type="text/css" href="/res/Guriddo_jqGrid_JS_5.2.1/css/ui.jqgrid.css" />
</head>
<body>
<div class="main" id="main">
<!--jqGrid所在-->
<table id="grid-table"></table>
<!--jqGrid 浏览导航栏所在-->
<div id="grid-pager"></div>
</div>
<script src="/res/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/res/Guriddo_jqGrid_JS_5.2.1/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="/res/Guriddo_jqGrid_JS_5.2.1/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
$(document).ready(function() {
$("#grid-table").jqGrid({
url:'<%=basePath%>/sys/list',
data: [], //当 datatype 为"local" 时需填写
datatype: "json", //数据来源，本地数据（local，json,jsonp,xml等）
height: 150, //高度，表格高度。可为数值、百分比或'auto'
mtype:"post",//提交方式
colNames: ['编号', '权限码', '权限名称'],
colModel: [{
name: 'id',
index: 'id', //索引。其和后台交互的参数为sidx
key: true, //当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略
100,
editable: false,
editoptions: {
size: "20",
maxlength: "30"
}
}, {
name: 'code',
index: 'code',
200, //宽度
editable: true, //是否可编辑
edittype: "select", //可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.s
editoptions: {
value: ""
}
}, {
name: 'name',
index: 'name',
60,
sorttype: "double",
editable: true
}],
viewrecords: false, //是否在浏览导航栏显示记录总数
rowNum: 10, //每页显示记录数
rowList: [10, 20, 30], //用于改变显示行数的下拉列表框的元素数组。
pager: pager_selector, //分页、按钮所在的浏览导航栏
altRows: true, //设置为交替行表格,默认为false
//toppager: true,//是否在上面显示浏览导航栏
multiselect: true, //是否多选
//multikey: "ctrlKey",//是否只能用Ctrl按键多选
multiboxonly: true, //是否只能点击复选框多选
// subGrid : true,
sortname:'id',//默认的排序列名
sortorder:'asc',//默认的排序方式（asc升序，desc降序）
caption: "权限表", //表名
auto true //自动宽
});
//浏览导航栏添加功能部分代码
$(grid_selector).navGrid(pager_selector, {
search: true, // 检索
add: true, //添加 （只有editable为true时才能显示属性）
edit: true, //修改（只有editable为true时才能显示属性）
del: true, //删除
refresh: true //刷新
}, {}, // edit options
{}, // add options
{}, // delete options
{
multipleSearch: true
} // search options - define multiple search
);
});
</script>
</body>
</html>
方式二：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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>
<%
String basePath = request.getContextPath();
%>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/res/jquery-ui-1.12.1.custom/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/res/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/res/Guriddo_jqGrid_JS_5.2.1/css/ui.jqgrid-bootstrap-ui.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/res/Guriddo_jqGrid_JS_5.2.1/css/ui.jqgrid.css" />
</head>
<style type="text/css">
table td,th{
border:1px solid #aaa;
}
</style>
<body>
<label>学号：</label><input type="text" id="name_"/><button onclick="search();">查询</button>
<table id="list"></table>
<div id="pager"></div>
<script src="<%=basePath%>/res/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=basePath%>/res/Guriddo_jqGrid_JS_5.2.1/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=basePath%>/res/Guriddo_jqGrid_JS_5.2.1/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
datatype: "json",
url:'<%=basePath%>/sys/list?q=1',
mtype:'POST',
height: 350,
auto true,
shrinkToFit: true,
rownumbers:true,
rowNum: 100,
rowList: [100, 200, 500],
colModel:[
{name:'id',index:'id',label:'id',hidden:true,editable : true},
{name:'code',index:'code',label:'权限码',editable : true},
{name:'name',index:'name',label:'名称',editable : true},
{name:'oper',index:'oper',label:'操作',editable : true,formatter:function(cellvalue,options,rowObject){
return rowObject.id=='add'?cellvalue:'<a href="javascript:del('+rowObject.id+');" style="color:red">删除</a>';
}}
],
jsonReader : {
root : "list",
total: "total",
records: "records"
},
sortable:false,
sortname:'id',
sortorder:'desc',
pager: "#pager",
viewrecords: true,
caption: "",
hidegrid: false,
beforeRequest:function(){
var rules = new Array();
var name = $.trim($('#name_').val());
if(name!=''){
rules.push({'field':'name','op':'seq','data':name});
}
var postData = $('#list').getGridParam('postData');
var filters = {groupOp:'AND',rules:rules};
postData.filters=JSON.stringify(filters);
},loadComplete:function(){
var data = {
id:'add',
code:'<input type="text" id="code"/>',
name:'<input type="text" id="name"/>',
oper:'<a href="javascript:add();">添加</a>'
}
$('#list').addRowData('add',data,'first');
}
});
});
function search(){
$('#list').setGridParam({page:1}).trigger('reloadGrid');
}
function add(){
var code = $('#code').val();
var name = $('#name').val();
$.post('<%=basePath%>/sys/add',{code:code,name:name},function(operResult){
if(operResult.result){
$('#list').trigger('reloadGrid');
alert(result.msg);
}else{
alert(result.msg);
}
});
}
function del(id){
$.post('<%=basePath%>/sys/delete',{id:id},function(operResult){
if(operResult.result){
$('#list').trigger('reloadGrid');
alert('删除成功！');
}else{
alert('删除失败！');
}
});
}
</script>
</body>
</html>