首页 > 其他 > 详细

EasyUI Datagrid的简单使用

时间:2018-05-19 10:56:14      阅读:237      评论:0      收藏:0      [点我收藏+]

此前同样写过EasyUI Datagrid的demo,好记性不如烂笔头,何况记性也不是那么好,赶紧记录一下。照搬上一篇EasyUI Tree的格式。

实现效果:获取数据库表的数据,在EasyUI Datagrid上展示出来并使用分页控件进行分页。

项目、框架、数据库:创建的是Maven项目,采用Spring+SpringMVC+Mybatis框架,数据库SQL Server 2005

1.创建数据库表

表结构:

技术分享图片

表数据:

技术分享图片

2.通过mybatis逆向工程映射TreeTestTable(表名略丑)

TreeTestTable表的实体类代码:

package com.lwl.EasyUIDemo.bean;

public class TreeTestTable {
    private Integer id;

    private Integer pid;

    private String value;
    
    set/get方法...
}

 

3.编写DatagridBean类(由于实际使用中表结构不同,因此需要编写一个类用于将获取到的数据对象转为前端Datagrid能够读取并加载的数据格式):

package com.lwl.EasyUIDemo.pojo;

import java.util.List;


public class DatagridBean {
    
    private int page;        // 当前第几页
    private int total;        // 数据总条数
    private List<?> rows;    // 数据列表
    
    public DatagridBean(int page, long total, List<?> rows) {
        this.page = page;
        this.total = (int)total;
        this.rows = rows;
    }
    set/get方法...
}

 4.编写Controller层代码:

package com.lwl.EasyUIDemo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.lwl.EasyUIDemo.bean.TreeTestTable;
import com.lwl.EasyUIDemo.pojo.DatagridBean;import com.lwl.EasyUIDemo.service.TreeTestTableService;

@Controller
public class TestController {
    
    @Autowired
    private TreeTestTableService treeService;
    
    
    /**
     * DataGrid数据获取
     */
    @RequestMapping("/getDatagrid")
    @ResponseBody
    public JSON getList(int page,int rows){
        PageHelper.startPage(page, rows);
        List<TreeTestTable> list = treeService.getData();
        PageInfo<TreeTestTable> pageInfo = new PageInfo<>(list);
        DatagridBean datagridBean = new DatagridBean(page, pageInfo.getTotal(),list);
        return (JSON) JSON.toJSON(datagridBean);
    }
    
}

5.对照controller层方法所引用的service方法来创建service接口:

package com.lwl.EasyUIDemo.service;

import java.util.List;

import com.lwl.EasyUIDemo.bean.TreeTestTable;

public interface TreeTestTableService {

    /**
     * 获取表的全部数据
     * @return
     */
    List<TreeTestTable> getData();

}

Service实现类:

package com.lwl.EasyUIDemo.serviceImpl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.lwl.EasyUIDemo.bean.TreeTestTable;
import com.lwl.EasyUIDemo.bean.TreeTestTableExample;
import com.lwl.EasyUIDemo.dao.TreeTestTableMapper;
import com.lwl.EasyUIDemo.service.TreeTestTableService;
@Service
public class TreeTestTableServiceImpl implements TreeTestTableService {

    @Autowired
    private TreeTestTableMapper tableMapper;

    /**
     * 获取表的全部数据
     */
    public List<TreeTestTable> getData() {
        return tableMapper.selectByExample(null);
    }
}

 6.编写jsp页面(关于EasyUI的使用格式等请自行查看EasyUI API文档):

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<% pageContext.setAttribute("path", request.getContextPath()); %>
<!DOCTYPE>
<html>
<head>
<title>EasyUI实例</title>
<!-- 载入easyui样式及图标样式 -->
<link rel="stylesheet" type="text/css" href="${path }/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${path }/easyui/themes/icon.css">
<!-- 载入jquery支持文件(必须写在其他js文件前)、easyui支持文件、easyui中文支持文件 -->
<script type="text/javascript" src="${path }/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${path }/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${path }/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>

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

<script>
$(#dg).datagrid({    
    url:getDatagrid,    
    columns:[[    
        {field:id,title:节点,width:100},    
        {field:pid,title:父节点,width:100},    
        {field:value,title:内容,width:100}    
    ]],
    striped:true,    // 斑马线
    pagination:true,// 分页
}); 
</script>
</body>
</html>

 运行看一下效果:

技术分享图片

需要注意的重点是DatagridBean的编写与controller请求数据的接收,数据的返回。 

以上仅仅是本人接触EasyUI Datagrid编写的简单例子,有任何理解或做法上的错误,欢迎批评指正!

 

EasyUI Datagrid的简单使用

原文:https://www.cnblogs.com/new-life/p/9059632.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!