使用Struts2和jQuery EasyUI实现简单CRUD系统（五）——jsp,json,EasyUI的结合

最新推荐文章于 2019-06-03 23:01:00 发布

月轩居士

最新推荐文章于 2019-06-03 23:01:00 发布

阅读量890

点赞数

分类专栏： jQuery EasyUI 文章标签： struts2.0 datagrid jQuery EasyUI jsp

jQuery EasyUI 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

用到的EasyUI的数据网格，DataGrid。需用引用一个url传来的json数据，然后整齐美观地展现在页面上。想想自己之前做的东西，就直接拿数据库的数据和html的table代码进行拼接，整洁是整洁，但是代码写得特别别扭。让我站在一个设计者的思路上来看，如果我现在提供了一个表格模板，然后我要将你的数据读取进去之后再进行顺序的排列，那么我们就需要定义一种通用的格式了，我能读取任何遵循这种格式的数据并把它展现在DataGird中，这就是EasyUI的功能，而格式的功能是谁实现呢——JSON登场了。

JSON，javascript object notation,js对象标记（表示）法，类似xml但是比xml小且快。xml提取元素的话使用dom操作，需要child这些东西。

JSON能通过js解析和ajax传输，对了，要的就是这个。

ajax做到的功能就是页面的不刷新而偷偷与服务器连接后拿到数据再返回到前端。

我这个表格展现在这里，其实我要的数据是偷偷用了ajax拿到数据，并且通过js解析之后再准确地放回表格中。

（一）JSON

语法规则：

分名称和值对，数据分隔： {}保存对象 []保存数组

“a”:1 对应js中的 a = 1。
json数据例子：
[{"id":1,"name":"ee","password":"1"},
{"id":2,"name":"df2","password":"123"},
{"id":3,"name":"45ty","password":"123"},
{"id":4,"name":"sdfy","password":"123"},
{"id":10,"name":"sdfy","password":"123"}]

数组里有4个元素，一个元素是一个对象：有id，name和password。

（二）EasyUI的DataGrid获取json数据。

DataGrid：

[html]view plaincopy 
   
 <%@ 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>  
 <script src="http://localhost:8080/EasyProject/jquery.min.js" type="text/javascript"></script>  
 <script src="http://localhost:8080/EasyProject/jquery.easyui.min.js" type="text/javascript"></script>  
 <link href="http://localhost:8080/EasyProject/themes/default/easyui.css" rel="stylesheet"type="text/css" />  
 <link href="http://localhost:8080/EasyProject/themes/icon.css" rel="stylesheet" type="text/css" />  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>Insert title here</title>  
 </head>  
 <body>  
 <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"  
         url="list_ej"  
         toolbar="#toolbar"  
         rownumbers="true" fitColumns="true" singleSelect="true">  
     <thead>  
         <tr>  
 <!--             <th field="id" width="50">id</th>  
             <th field="name" width="50">name</th>  
             <th field="password" width="50">password</th> -->  
               
 <!--         这种写法也是可以的       <th data-options="field:'id',width:150">id</th> -->  
   
                 <th field="id",width=“120">id</th>  
                 <th field="name",width="120">name</th>  
                 <th data-options="field:'password',width:'120',align:'right'">password</th>  
         </tr>  
     </thead>  
 </table>  
 <div id="toolbar">  
     <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新建</a>  
     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a>  
     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>  
 </div>  
   
 </body>  
 </html>  

[html]view plaincopy 
   
 url="list_ej"  

重点的地方就是url，url写的一定要是返回json格式数据的url，我们用了action就可以通过这个url跳到响应的jsp页面。

list_ej通过下面的action拿到数据之后，再跳到list_ej.jsp。

action里面拿到数据库数据并进行json数据的转换，网上一查的全部都是复制黏贴用了json框架的，有代码的那些又写得乱起八糟，自己摸索了好久。

JSONArray可以将list里面的数据转换成JSON格式。

[java]view plaincopy 
   
 public String list_ej(){  
         ActionContext ctx=ActionContext.getContext();  
         Connection c = ConnectToSQL.getConn();  
         Statement st = ConnectToSQL.getSt(c);  
         List<User> list = new ArrayList<User>();  
         String result="{}";  
         try {  
             ResultSet rs = st.executeQuery("select * from user");  
             while(rs.next()){  
                 User u = new User();  
                 u.setId(rs.getInt("userid"));  
                 u.setName(rs.getString("username"));  
                 u.setPassword(rs.getString("password"));  
                 list.add(u);  
             }  
         } catch (SQLException e) {  
             // TODO Auto-generated catch block  
             e.printStackTrace();  
         }  
         List<User> o  = JSONArray.fromObject(list);  
         result=o.toString();  
         try {  
 //          ServletActionContext.getResponse().getWriter().println(JSONArray.fromObject(list));  
             ctx.put("json", result);  
               
         } catch (Exception e) {  
             // TODO Auto-generated catch block  
             e.printStackTrace();  
         }   
         return "success";  
     }  

我们拿到数据之后，使用原生的JSON类，进行JSON格式的转换，然后再把字符串返回到另外一个页面List_ej.jsp。这个页面就是最终DataGrid取数据的地方。

问题所在

这里自己挖了一个大坑：自己之前写的jsp。

[java]view plaincopy 
   
 <%@page import="com.opensymphony.xwork2.ActionContext"%>  
 <%@ 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">  
 <%@ page import="util.*, org.apache.struts2.ServletActionContext"%>  
     <%@ taglib prefix="s" uri="/struts-tags"%>    
 <%@ page import="java.sql.*,java.util.*,net.sf.json.*"%>  
 <%!  
     Connection c = null;  
     Statement st = null;  
     ResultSet rs = null;  
     String s = "";  
 %>  
   
 <%  
 String path = request.getContextPath();  
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
 %>  
   
   
   
 <html>  
 <head>  
 <script src="http://localhost:8080/EasyProject/jquery.min.js" type="text/javascript"></script>  
 <script src="http://localhost:8080/EasyProject/jquery.easyui.min.js" type="text/javascript"></script>  
 <link href="http://localhost:8080/EasyProject/themes/default/easyui.css" rel="stylesheet"type="text/css" />  
 <link href="http://localhost:8080/EasyProject/themes/icon.css" rel="stylesheet" type="text/css" />  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>Insert title here</title>  
 </head>  
 <body>  
 <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"  
         toolbar="#toolbar"  
         rownumbers="true" fitColumns="true" singleSelect="true">  
     <thead>  
         <tr>  
             <th field="id" width="50">id</th>  
             <th field="name" width="50">name</th>  
             <th field="password" width="50">password</th>  
         </tr>  
     </thead>  
 </table>  
 <div id="toolbar">  
     <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>  
     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>  
     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>  
 </div>  
 <%  
 /* Connection c = ConnectToSQL.getConn(); 
 Statement st = ConnectToSQL.getSt(c); 
 List<User> list = new ArrayList<User>(); 
 try { 
     ResultSet rs = st.executeQuery("select * from user"); 
     while(rs.next()){ 
         User u = new User(); 
         u.setId(rs.getInt("userid")); 
         u.setName(rs.getString("username")); 
         u.setPassword(rs.getString("password")); 
         list.add(u); 
     } 
 } catch (SQLException e) { 
     // TODO Auto-generated catch block 
     e.printStackTrace(); 
 } 
 List<User> o  = JSONArray.fromObject(list); */  
 String json=(String)request.getAttribute("json");  
 System.out.println(json);  
 %>  
   
 <%=json%>  
 </body>  
 </html>  

这样的逻辑是没有问题的，就是一直显示不出来。调了好久。

其实问题在于————我写太多东西了。

list_jsp里面只需要：

[html]view plaincopy 
   
 <%  
 String json=(String)request.getAttribute("json");  
 %>  
 <%=json%>  

最后，DataGird顺利取到数据库数据。

月轩居士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Struts2和jQuery EasyUI实现简单CRUD系统（五）——jsp,json,EasyUI的结合

用到的EasyUI的数据网格，DataGrid。需用引用一个url传来的json数据，然后整齐美观地展现在页面上。想想自己之前做的东西，就直接拿数据库的数据和html的table代码进行拼接，整洁是整洁，但是代码写得特别别扭。让我站在一个设计者的思路上来看，如果我现在提供了一个表格模板，然后我要将你的数据读取进去之后再进行顺序的排列，那么我们就需要定义一种通用的格式了，我能读取任何遵循这种格式的数
复制链接

扫一扫

专栏目录