zoukankan      html  css  js  c++  java
  • 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数组的名称要和前台列表的表头对应

  • 相关阅读:
    20191017-1 每周例行报告
    20191010-2 每周例行报告
    20190919-1 每周例行报告
    彭思雨20190919-3效能分析
    zipfile
    subprocess
    configparser
    hashlib
    json & pickle
    headpq
  • 原文地址:https://www.cnblogs.com/tanzq/p/8372577.html
Copyright © 2011-2022 走看看