Easyui Datagrid 如何实现后台交互显示用户数据列表
转自:https://blog.csdn.net/Tomsheng321/article/details/50722571?utm_source=blogxgwz9
新手初学的时候可能有个疑问:如何在数据表格中不通过按钮事件直接显示后台列表信息?我在学习的时候也碰到了这个问题,纠结了很长时间,现在将代码贴出来给初学者以提示:
大家都知道EasyUi都是用json进行前后台数据交互的, datagrid有一个属性: url,可以直接到这个url中进行查询等后台操作,最后return一个json对象,这是datagrid可以直接接收这个 json对象,并自动把内容显示到table中。下面贴出代码,很简单的servlet做后台处理。
前台:
- <!-- 显示列表 -->
- <table id="dg" title="" class="easyui-datagrid"
- style="width:700px;height:250px"
- toolbar="#toolbar" pagination="true" rownumbers="true"
- fitColumns="true" singleSelect="true" fit="true" border="0"
- url="../servlet/Table_Do" >
- <thead>
- <tr>
- <th field="name" width="50">姓名</th>
- <th field="age" width="50">年龄</th>
- <th field="phone" width="50">电话</th>
- <th field="email" width="50">邮箱</th>
- </tr>
- </thead>
- </table>
后台:
- public void doPost(HttpServletRequest request, HttpServletResponse response){
- String account="5"; //= request.getParameter("account");
- JSONObject json = new JSONObject();
- JSONArray array = new JSONArray();
- JSONObject member = null;
- Table t = new Table();
- ArrayList<Table> a;
- try {
- a = t.listAll();
- for (int i=0;i<a.size();i++) {
- member = new JSONObject();
- member.put("name", a.get(i).getName());
- member.put("age", a.get(i).getAge());
- member.put("phone", a.get(i).getPhone());
- member.put("email", a.get(i).getEmail());
- array.add(member);
- }
- } catch (SQLException e1) {
- e1.printStackTrace();
- }
- PrintWriter pw;
- try {
- pw = response.getWriter();
- pw.print(array.toString());
- pw.close();
- } catch (IOException e) {
- e.printStackTrace();
- }
- }
- public ArrayList<Table> listAll() throws SQLException{
- Connection conn = null;
- PreparedStatement ps = null;
- ResultSet rs = null;
- ArrayList<Table> list = new ArrayList<Table>();
- try{
- conn=DBConnection.getConnection();
- String sql = "select * from tab";
- ps = conn.prepareStatement(sql);
- rs = ps.executeQuery();
- Table user = new Table();
- while(rs.next()){
- user.setName(rs.getString("name"));
- user.setAge(rs.getInt("age"));
- user.setPhone(rs.getString("phone"));
- user.setEmail(rs.getString("email"));
- list.add(user);
- }
- }finally{
- DBConnection.close(rs, ps, conn);
- }
- return list;
- }
这里需要注意几点:
一: 后台传来的数据一定要是json类型的
可以现在后台控制台打印一下看看
二:json数组的名称要和前台列表的表头对应
Easyui Datagrid 如何实现后台交互显示用户数据列表的更多相关文章
- easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...
- jquery easyui datagrid 将值作为img显示图片时报404 undefined
原因:datagrid 在请求到数据先进行头部数据和样式的渲染,之后数据 obj = {} value = undefined index = 0 进行一次渲染, 在没有formater情况将数据 ...
- easyui datagrid 绑定从后台得到的复杂的特殊数据结构
由于项目需要,从后台得到的数据统一为了类似{state:xxx,data:xxx,message:xxx}类型 但是easyui datagrid却只认{total:xxx,rows:xxx}...所 ...
- EasyUI datagrid组件绑定有转义字符的json数据出错
最近项目中一个页面的datagrid出现了莫名其妙的问题, 首先是分页数据的第二页和第三页不能展示,过了一天后第一页也出不来了, 默认首页不出来导致后续分页处理无法进行, 整个数据都不出来了,最后只能 ...
- 关于EasyUI datagrid 无法在dialog中显示的问题分析及解决方案!
最近项目中引用了easyUI,很大程度上的简化了开发过程,但是随之而来的也遇到一些问题,比如:标题中遇到的问题,去网上搜罗了下关于这个问题的解决方案,不是说的很复杂就是干脆文不对题,国外的使用这种稍微 ...
- Easyui Datagrid的Rownumber行号显示问题
Datagrid中当你的行数据超过9999时,第一列的行号rownumber将会因为表格内容过长而导致无法显示全部数字, 这一点Easyui无法做到自适应 所以需要进行修改,这里扩展一个方法就行了. ...
- EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本
nowrap : true; 是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...
- jquery easyui DataGrid 动态的改变列显示的顺序
$.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = ...
- jquery easyUI DataGrid 初始化的时候就显示可排序的字段
在使用easy ui的列表中,想要标记可以排序的字段,使用户一看页面就知道哪些是可以点击排序的. 给可排序的字段添加 图标在列名后面.不可排序的字段还和原来一样. 步骤: 你需要一个图标 , 你需要给 ...
随机推荐
- docker 国内加速器配置
配置镜像加速器 阿里云 登录到 阿里云获取到专属加速地址bqr1dr1n.mirror.aliyuncs.com 找到服务 deamon.js 所在目录C:\ProgramData\docker\co ...
- thinking java
public class CrossContainerIteration{ public static void display(Iterator<Pet> it){ while(it.h ...
- L133
The U.S. Food and Drug Administration is considering a ban on flavorede-cigarettes in response to an ...
- win7/8 关闭非正常关机的自动修复功能
win7/8 关闭非正常关机的自动修复功能 1.桌面右键新建一个文档文本,双击打开文件新建文本文档,复制以下命令到文本里面! bcdedit /set {default} bootstatuspoli ...
- SpringMVC使用session实现简单登录
1.首先为了能直观地在jsp页面体现session的内容,我使用了jstl表达式,首先在pom.xml中引入jstl的依赖 <!-- jstl所需要的依赖 --> <dependen ...
- WCF+上传+大文件处理
大文件处理的方式拆分读取,此文只为记录文件处理方式,供日后查阅. 源码来自http://blog.csdn.net/lywust/article/details/7009248 经过改编将源码改编为文 ...
- 10 结构体和类 - —— 《Swift3.0 从入门到出家》
Swift中的面向对象5个要素:枚举.结构体.类.协议.扩展 面向对象研究的是对象,完成一件事情需要多个对象参与,是生活的映射 Swift中结构体和类非常相似,也就是结构体能完成类的所有功能.结构体是 ...
- Ambari-HDP
文档说明以及下载路径 https://docs.hortonworks.com/index.html Ambari的安装路径 https://docs.hortonworks.com/HDPDocum ...
- Mysql ERROR 1032 (HY000): Can't find record in TABLE
最近用Mysql出现一个很奇怪的问题. 用SELECT * FROM `v_vod` ORDER BY vod_addtime desc LIMIT 0,18查询得到1个错误 ERROR 1032 ( ...
- bzoj 4566 找相同字符 —— 广义后缀自动机
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4566 建出两个串的广义后缀自动机: 统计每个点在两个串中出现次数的子树和,其实就是在两个串中 ...