JGrid中文：http://blog.mn886.net/jqGrid/（ JGrid英文：http://www.trirand.com/blog/jqgrid/jqgrid.html）
JGrid好的文章：http://www.cnblogs.com/kissdodog/p/3875992.html
案例：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'AddStar.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="/scripts/jqgrid/css/ui.jqgrid.css" media="all">
<link rel="stylesheet" type="text/css" href="/scripts/jqgrid/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" media="all">
<style type="text/css">
label {
color: BLUE;
}
th{
font-weight: bold;
font-size: 13px;
color: RED;
}
</style>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script src="/scripts/jqgrid/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/scripts/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script src="/scripts/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/scripts/jqgrid/js/plugins/grid.addons.js"></script>
<script src="/scripts/jqgrid/js/plugins/grid.postext.js"></script>
<script src="/scripts/jqgrid/js/plugins/grid.setcolumns.js"></script>
<script type="text/javascript" src="/scripts/jquery.form.js"></script>
<script type="text/javascript" src="/scripts/layer/layer.js"></script></head>
<body>
<table id="list"></table>
<div id="pager"></div>
<div id="addDialog" title="添加信息" style="display:none;">
<form id="addfrm" class="formStyle" enctype="multipart/form-data">
<table align="center">
<tr>
<td width="80"> 姓名:</td>
<td><input type="text" name="name" id="addName" /></td>
</tr>
<tr>
<td width="80">头像:</td>
<td> <input type="file" name="file" id="addFile"/></td>
</tr>
<tr>
<td width="80"> 性别:</td>
<td><input type="radio" name="sex" value="1" checked="checked"/>男<input type="radio" name="sex" value="0" />女</td>
</tr>
<tr>
<td width="80">国家:</td>
<td>
<select name="areaId" id="addArea">
<option value="1">中国</option>
<option value="2">加拿大</option>
<option value="3">法国</option>
<option value="4">日本</option>
<option value="5">韩国</option>
<option value="6">马来西亚</option>
<option value="7">新加坡</option>
<option value="8">英国</option>
<option value="9">美国</option>
</select>
</td>
</tr>
<tr>
<td width="80">运营状态:</td>
<td><input type="radio" name="operating" value="1" checked="checked" />正在运营<input type="radio" name="operating" value="0" />停止运营</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
//获取所有新增用户信息
$("#list").jqGrid({
url:"/admin/setup/getStarList.do",
height:'auto',
autowidth:true,
datatype: "json",
mtype: 'POST',
multiselect: false,
colNames:["编号","姓名","性别","头像","areaId","国家","是否运营","操作"],
colModel:[
{name:"id",index:"id",align:"center",width:8,editable:false,sortable:true},
{name:"name",index:"name",align:"center",width:20,editable:false,sortable:false},
{name:"sex",index:"sex",align:"center",width:20,editable:false,sortable:false,formatter:function(cellvalues,options,rowData){
var result;
if(cellvalues==1){
result="<span>男</span>";
}else{
result="<span>女</span>";
}
return result;
}},
{name:"headPic",index:"headPic",align:"center",width:20,editable:false,sortable:false,formatter:function(cellvalues,options,rowData){
var result;
if(cellvalues!=null){
result="<img src='"+cellvalues+"' />";
}else{
reslut ="";
}
return result;
}},
{name:"areaId",index:"areaId",align:"center",width:30,editable:false,sortable:false,hidden:true},
{name:"country",index:"country",align:"center",width:30,editable:false,sortable:false},
{name:"operating",index:"operating",align:"center",width:20,editable:true,sortable:false,formatter:function(cellvalues,options,rowData){
var result;
if(cellvalues==1){
result="<span>运营</span>";
}else{
result="<span>停止</span>";
}
return result;
}},
{name:"operating",index:"operating",align:"center",width:20,editable:true,sortable:false,formatter:function(cellvalues,options,rowData){
var reslut;
var starId=rowData["id"];
if(cellvalues==1){
reslut= "<font color=\"green\">上架</font>/<font onclick=\"outAway("+starId+",0)\" color=\"red\">下架</font>";
}else{
reslut= "<font onclick=\"outAway("+starId+",1)\" color=\"green\">上架</font>/<font color=\"red\">下架</font>";
}
return reslut;
}}
],
pager: "#pager",
rowNum:999999999,
rowList: [],
sortname: "autoId",
viewrecords: true,//记录总条数是否可见
sortorder: "desc",
hidegrid:false,
caption:"用户明细",
prmNames:{
page:"curPage", // 表示请求页码的参数名称
rows:"pageSize", // 表示请求行数的参数名称
sort:"orderBy",// 表示用于排序的列名的参数名称
order:"order" // 表示采用的排序方式的参数名称
},
postData:{
},
//从后台读取数据的类型参数可以在此设置
jsonReader:{
root:"dataRows",total:"allPage",records:"allNum"
}
});
jQuery("#list").jqGrid('navGrid','#pager',{
addtext:"添加",
addfunc:openAddDialog
});
});
/*增加*/
function openAddDialog(){
$("#addfrm")[0].reset();//清空表单数据
$("#addDialog").dialog("open");
}
$("#addDialog").dialog({
autoOpen:false,
width:"auto",
height:"auto",
modal:true,
position:'top',
buttons:{
"添加":function(){
var b=checkMes();
if(b){
var options={
url:"/admin/setup/addStar.do",
type:"post",
dataType:"json",
success:function(data){
if(data.flag){
if(data.isSuccess){
//alert("ok");
$("#addDialog").dialog("close");//关闭
$("#list").trigger("reloadGrid");//刷新
}
}
},
error:function(textStatus,errorThrown) {
layer.loadClose();
alert("系统ajax交互错误:"+textStatus);
layer.alert("系统繁忙，请稍后重试…");
}
};
$("#addfrm").ajaxSubmit(options);
}else{
layer.alert("请输入内容");
}
},
"取消":function(){
$(this).dialog("close");
}
},
"close":function(){
//$(this).dialog("close");
}
});
/*更新明星运营状态*/
function outAway(starId,operating){
if(starId>0 && status!=null){
$.ajax({
url:"/admin/setup/updateStarOperating.do",
data:{
"starId":starId,
"operating":operating
},
dataType:"json",
type:"post",
success:function(data){
if(data.flag){
if(data.isSuccess){
//alert("ok");
}
}
$("#list").trigger("reloadGrid");//刷新
},
error:function(){
layer.loadClose();
//alert("系统ajax交互错误:"+textStatus);
layer.alert("系统繁忙，请稍后重试…");
}
});
}
}
function checkMes(){
var result;
var addname=$("#addName").val().trim();
var addFile=$("#addFile").val().trim();
//alert(result);
if(addname==null || addname.length==0 ){
result=false;
}else{
if(addFile==null || addFile.length==0){
result=false;
}else{
result=true;
//alert("ok");
}
}
//alert(result);
return result;
}
</script>