datagrid.jsp
<%@ 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>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/css/default.css">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
<script
src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//页面加载完成后，创建数据表格datagrid
$("#mytable").datagrid({
//定义标题行所有的列
columns:[[
{title:'编号',field:'id',checkbox:true},
{title:'姓名',field:'name'},
{title:'年龄',field:'age'},
{title:'地址',field:'address'}
]],
//指定数据表格发送ajax请求的地址
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
rownumbers:true,
singleSelect:true,
//定义工具栏
toolbar:[
{text:'添加',iconCls:'icon-add',
//为按钮绑定单击事件
handler:function(){
alert('add...');
}
},
{text:'删除',iconCls:'icon-remove'},
{text:'修改',iconCls:'icon-edit'},
{text:'查询',iconCls:'icon-search'}
],
//显示分页条
pagination:true
});
});
</script>
</head>
<body>
<table id="mytable">
</table>
</body>
</html>
datagrid_data.json
{
"total":11,
"rows":[
{"id":"001","name":"tom","age":12,"address":"tianjing"},
{"id":"002","name":"jack","age":13,"address":"beijing"},
{"id":"003","name":"jeery","age":14,"address":"dahe"}
]
}