jquery easyui 结合jsp简单展现table数据示例


Posted in Javascript onApril 18, 2014
<%@ 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> 
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
<script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script> 
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> 
<body> 
<table id="dg" title="My Users" class="easyui-datagrid" style="width:500px;height:250px" 
url="getUsers.jsp" 
toolbar="#toolbar" rownumbers="true" 
fitColumns="true" singleSelect="true"> 
<thead> 
<tr> 
<th field="firstname" width="50">First Name</th> 
<th field="lastname" width="50">Last Name</th> 
<th field="phone" width="50">Phone</th> 
<th field="email" width="50">Email</th> 
</tr> 
</thead> 
</table> 
</body> 
</html>

<%@page import="net.sf.json.JSONArray"%> 
<%@page import="java.util.*"%> 
<%@page import="org.codehaus.jackson.map.ObjectMapper"%> 
<%@ 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> 
</head> 
<body> 
<% 
//String json = "{\"firstname\":\"firstname\",\"lastname\":\"lastname\",\"phone\":123456,\"email\":\"281446883@qq.com\"}"; 
List<Map<String,String>> list = new ArrayList<Map<String,String>>(); 
Map<String,String> user1 = new HashMap<String,String>(); 
user1.put("firstname", "name1"); 
user1.put("lastname", "name2"); 
user1.put("phone", "1234"); 
user1.put("email", "281446888@qq.com"); 
list.add(user1); Map<String,String> user2 = new HashMap<String,String>(); 
user2.put("firstname", "name2"); 
user2.put("lastname", "name4"); 
user2.put("phone", "1234"); 
user2.put("email", "281446888@qq.com"); 
list.add(user2); 
JSONArray jsonArray = JSONArray.fromObject(list); 
System.out.println(jsonArray.toString()); 
Map<String,Object> map = new HashMap<String,Object>(); 
map.put("total", 1); 
map.put("rows", jsonArray); 
ObjectMapper objMap = new ObjectMapper(); 
objMap.writeValue(response.getWriter(), map); 
//System.out.println(json); 
%> 
</body> 
</html>

效果:
jquery easyui 结合jsp简单展现table数据示例
Javascript 相关文章推荐
理解Javascript_08_函数对象
Oct 15 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 #Javascript
用jquery仿做发微博功能示例
Apr 18 #Javascript
实例说明为什么不要行内使用javascript
Apr 18 #Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 #Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 #Javascript
JQuery each()嵌套使用小结
Apr 18 #Javascript
JavaScript编程的10个实用小技巧
Apr 18 #Javascript
You might like
PHP中if和or运行效率对比
2014/12/12 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
three.js实现圆柱体
2018/12/30 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
中学生个人自我评价
2014/02/06 职场文书
班长竞选演讲稿
2014/04/24 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
2014年卫生工作总结
2014/11/27 职场文书
公路施工安全责任书
2015/05/08 职场文书
民事纠纷协议书
2016/03/23 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
Python Pandas 删除列操作
2022/03/16 Python