Easyui Datagrid 如何实现后台交互显示用户数据列表

新手初学的时候可能有个疑问:如何在数据表格中不通过按钮事件直接显示后台列表信息?我在学习的时候也碰到了这个问题,纠结了很长时间,现在将代码贴出来给初学者以提示:

大家都知道EasyUi都是用json进行前后台数据交互的, datagrid有一个属性: url,可以直接到这个url中进行查询等后台操作,最后return一个json对象,这时datagrid可以直接接收这个 json对象,并自动把内容显示到table中。

前台:

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <!-- 显示列表 -->  
  2. <table id="dg" title="" class="easyui-datagrid"  
  3.     style="700px;height:250px"   
  4.     toolbar="#toolbar" pagination="true" rownumbers="true"  
  5.     fitColumns="true" singleSelect="true" fit="true" border="0"  
  6.     url="../servlet/Table_Do" >  
  7.     <thead>  
  8.         <tr>  
  9.             <th field="name" width="50">姓名</th>  
  10.             <th field="age" width="50">年龄</th>  
  11.             <th field="phone" width="50">电话</th>  
  12.             <th field="email" width="50">邮箱</th>  
  13.         </tr>  
  14.     </thead>  
  15. </table>  

后台:

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. public void doPost(HttpServletRequest request, HttpServletResponse response){  
  2.         String account="5";         //= request.getParameter("account");  
  3.         JSONObject json = new JSONObject();  
  4.         JSONArray array = new JSONArray();  
  5.         JSONObject member = null;  
  6.         Table t = new Table();  
  7.         ArrayList<Table> a;  
  8.         try {  
  9.             a = t.listAll();  
  10.             for (int i=0;i<a.size();i++) {  
  11.                 member = new JSONObject();  
  12.                 member.put("name", a.get(i).getName());  
  13.                 member.put("age", a.get(i).getAge());  
  14.                 member.put("phone", a.get(i).getPhone());  
  15.                 member.put("email", a.get(i).getEmail());  
  16.                 array.add(member);  
  17.             }  
  18.         } catch (SQLException e1) {  
  19.             e1.printStackTrace();  
  20.         }  
  21.         PrintWriter pw;  
  22.         try {  
  23.             pw = response.getWriter();  
  24.             pw.print(array.toString());  
  25.             pw.close();  
  26.         } catch (IOException e) {  
  27.             e.printStackTrace();  
  28.         }   
  29.     }  
[java] view plain copy 在CODE上查看代码片派生到我的代码片
  1. public ArrayList<Table> listAll() throws SQLException{  
  2.    Connection conn = null;  
  3.    PreparedStatement ps = null;  
  4.    ResultSet rs = null;  
  5.      
  6.    ArrayList<Table> list = new ArrayList<Table>();  
  7.    try{  
  8.     conn=DBConnection.getConnection();  
  9.     String sql = "select * from tab";  
  10.     ps = conn.prepareStatement(sql);  
  11.     rs = ps.executeQuery();  
  12.     Table user = new Table();  
  13.     while(rs.next()){  
  14.      user.setName(rs.getString("name"));  
  15.      user.setAge(rs.getInt("age"));  
  16.      user.setPhone(rs.getString("phone"));  
  17.      user.setEmail(rs.getString("email"));  
  18.      list.add(user);  
  19.    }  
  20.    }finally{  
  21.     DBConnection.close(rs, ps, conn);  
  22.    }  
  23.    return list;  
  24.   }  
 

这里需要注意几点:

一: 后台传来的数据一定要是json类型的

可以先在后台控制台打印一下看看

二:json数组的名称要和前台列表的表头对应

原文地址:https://www.cnblogs.com/tanzq/p/8372577.html