DataGrid（数据表格）之查询

最新推荐文章于 2025-03-18 13:49:17 发布

小依不秃头

最新推荐文章于 2025-03-18 13:49:17 发布

阅读量2k

点赞数

分类专栏： EasyUI 文章标签： easyui

本文链接：https://blog.youkuaiyun.com/qq_54936371/article/details/120292324

版权

EasyUI 专栏收录该内容

6 篇文章

订阅专栏

知识总结

四、使用Javascript去创建DataGrid控件。

五、把json文件中数据变成数据库里面的数据

六、分页

七、链式编程结果集封装

八、查询条件

一、含义及作用

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

二、目标

点击左侧tree菜单，右侧Tab页显示datagrid查询出来的数据

三、思考及解决

思考：

创建一个存放数据的展示界面（使用datagrid控件）
点击左侧菜单显示对应界面

解决：

参考上节tree后端实现：tree的后端实现_小依不秃头的博客-优快云博客

给左侧菜单人员信息维护点击出现书籍界面（使用企业方法在WebContent下建立jsp文件建立对应的界面）

①通过打印node可以看出attributes下有self后有menuURL

②修改js文件的content:'<iframe width=100% height=100% src="'+node.attributes.self.menuURL+'"></iframe>',

③点击左侧的人员信息维护可以拿到对应的userManage界面（这里用书籍表代替）

四、使用Javascript去创建DataGrid控件。

1.写入到userManage.jsp界面中

<table id="dg"></table>

2.导入EasyUI的CSS和Javascript文件的页面

3.建立对应的js文件：book.js 在api中找到代码写入js文件中

$('#dg').datagrid({
    url:'datagrid_data1.json',
    columns:[[
        {field:'code',title:'代码',width:100},
        {field:'name',title:'名称',width:100},
        {field:'price',title:'价格',width:100,align:'right'}
    ]]
});

4.在jQuery文件中找到datagrid中demo找到json文件拷贝到项目中

（使用全路径： url:$("#ctx").val()+'/datagrid_data1.json'）

在js中写入对应json文件的属性可以显示出测试数据：

五、把json文件中数据变成数据库里面的数据

1.建立book实体类

package com.xhy.entity;

public class Book {
   private int bid;
   private String bname;
   private float price;
   public int getBid() {
       return bid;
   }
   public void setBid(int bid) {
       this.bid = bid;
   }
   public String getBname() {
       return bname;
   }
   public void setBname(String bname) {
       this.bname = bname;
   }
   public float getPrice() {
       return price;
   }
   public void setPrice(float price) {
       this.price = price;
   }
   @Override
   public String toString() {
       return "Book [bid=" + bid + ", bname=" + bname + ", price=" + price + "]";
   }

}

2.建立BookDaoextends BaseDao<Book>写list反法

package com.zking.dao;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.xhy.entity.Book;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

public class BookDao extends BaseDao<Book>{

   //查找
   public List<Book> list(Book book,PageBean pageBean) throws Exception{
       String sql="select * from t_mvc_book where 1=1";
       String bname=book.getBname();
       int bid=book.getBid();
       if(StringUtils.isNotBlank(bname)) {
           sql +=" and bname like '%"+ bname + "%'";
       }

       return super.executeQuery(sql, Book.class,pageBean);
   }

}

3.建立BookAction extends ActionSupport implements ModelDriver<Book>

package com.zking.web;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.xhy.entity.Book;
import com.zking.dao.BookDao;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.ResponseUtil;

public class BookAction extends ActionSupport implements ModelDriver<Book>{
private Book book=new Book();
private BookDao bookDao=new BookDao();

public String datagrid(HttpServletRequest req, HttpServletResponse resp) {
       // TODO Auto-generated method stub
   try {
       PageBean pageBean=new PageBean();
       List<Book> list=bookDao.list(book, pageBean);
       ObjectMapper om=new ObjectMapper();
       Map<String,Object>map=new HashMap<String, Object>();
       map.put("total", pageBean.getTotal());
       map.put("rows", list);
       ResponseUtil.writeJson(resp, map);
   } catch (Exception e) {
       e.printStackTrace();
   }
   return null;
   }
   @Override
   public Book getModel() {
       // TODO Auto-generated method stub
       return book;
   }

}

4.修改book.js中的url路径以及列：

$(function() {
   $('#dg').datagrid({
   url:$("#ctx").val()+'/book.action?methodName=datagrid',
   columns:[[
   {field:'bid',title:'id',width:100},
   {field:'bname',title:'名称',width:100},
   {field:'price',title:'价格',width:100,align:'right'}
   ]]
   });
})

5.运行结果：

六、分页

在api的属性可知：

在js文件中加入：pagination：true，

在Bookaction中加入数据化分页数据

pageBean.setRequest(req);

输出结果：

在easyui中，点击下一页上一页等默认的分页效果，携带的参数是page/rows

在bootstrap，点击下一页上一页等默认的分页效果，携带的参数是page/offset

在layui中，击下一页上一页等默认的分页效果，携带的参数是page/limit

七、链式编程结果集封装

在建立一个工具类（封装重复代码）R extends HashMap

package com.zking.util;

import java.util.HashMap;

public class R extends HashMap{
public R data(String key,Object value) {
this.put(key, value);
return this;
}

}

结果和前面一样：

八、查询条件

找到datagrid查询属性

把搜索的组件输入样式到userManger中：

<div id="tb">
<input class="easyui-textbox" id="name" name="name" style="width:20%;padding-left: 10px" data-options="label:'书名:',required:true">
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
</div>

界面展示：