easyui

一、利用dategrid进行数据展示及链式编程结果类封装:

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

实现思路：     

1、新建一个jsp文件夹，创建一个uesemanagejsp界面，同时要写一个book.js

 2、将MVC框架导进去，写好对应的enetity、dao、web类

 3、配置xml文件

 4.分页   5.查询

1、要有一个存放书籍的展示页面

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>









   

   

   

  









  



    

    搜索

2、点击左侧菜单，显示对应页面

 content:'',    

注：在在index.jsp文件中改变跳转路径

3、引入datagrid数据表格，以死数据的方式引进去

$(function() {

$('#dg').datagrid({    

    url:$('#ctx').val()+'/book.action?methodName=datagrid',    

    pagination:true,

    toolbar:'#tb',

    columns:[[    

        {field:'bid',title:'id',width:100},    

        {field:'bname',title:'名称',width:100},    

        {field:'price',title:'价格',width:100,align:'right'}    

    ]]    

});

注：datagrid数据直接显示在界面上（book.js）

4.建立数据（从数据库表中拿值）

1.BookDao

package com.zking.dao;



import java.util.HashMap;

import java.util.List;

import java.util.Map;



import com.fasterxml.jackson.databind.ObjectMapper;

import com.zking.entity.Book;

import com.zking.util.baseDao;

import com.zking.util.PageBean;

import com.zking.util.StringUtils;



public class BookDao extends baseDao{





public List list(Book book, PageBean pageBean) throws Exception {

String bname=book.getBname();

String sql="select * from t_mvc_book where 1=1";

if(StringUtils.isNotBlank(bname)) {

sql+=" and bname like '%"+bname+"%'";

}

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

}



public static void main(String[] args) throws Exception{

BookDao bookDao=new BookDao();

PageBean pageBean=new PageBean();

List list=bookDao.list(new Book(),new PageBean());

ObjectMapper om=new ObjectMapper();

//json数组

Map map=new HashMap();

map.put("total",pageBean.getTotal());

map.put("rows", list);

System.out.println(om.writevalueAsString(list));

}

}

2.BookAction

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.zking.dao.BookDao;

import com.zking.entity.Book;

import com.zking.framework.ActionSupport;

import com.zking.framework.ModelDriver;

import com.zking.util.PageBean;

import com.zking.util.R;

import com.zking.util.ResponseUtil;



public class BookAction extends ActionSupport implements ModelDriver{

    private Book book=new Book();

    private BookDao bookDao=new BookDao();



    public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {

     BookDao bookDao=new BookDao();

PageBean pageBean=new PageBean();

        pageBean.setRequest(req);

try {

List list=bookDao.list(book,pageBean);

ObjectMapper om=new ObjectMapper();

//json数组



ResponseUtil.writeJson(resp,new R().data("total", pageBean.getTotal()).data("rows", list));

} catch (Exception e) {

e.printStackTrace();

}

     return null;

    }   

    

public Book getModel() {

return book;

}



}

效果：点击人员信息维护，右侧Tab页显示数据库表中相关信息

5.分页

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

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

在js中添加分页方法 pagination:true,

在BookAction中的datagrid加入PageBean分页初始化

pageBean.setRequest(req);

 book.js

$(function(){

$('#dg').datagrid({    

    url:$("#ctx").val()+'/book.action?methodName=datagrid',    

    pagination:true,

    fitColumns:true,

    toolbar: '#tb',



    columns:[[    

        {field:'bid',title:'id',width:100},    

        {field:'bname',title:'名称',width:100},    

        {field:'price',title:'价格',width:100,align:'right'}    

    ]]    

});  



$("#btn-search").click(function(){

$('#dg').datagrid('load',{

bname: $('#bname').val()

});

});



})

mvc.xml 中配置

6、结果集的封装：

新建一个工具R类:

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;

  }

}

链式编程在bookAction改写

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.zking.dao.BookDao;

import com.zking.entity.Book;

import com.zking.framework.ActionSupport;

import com.zking.framework.ModelDriver;

import com.zking.util.PageBean;

import com.zking.util.R;

import com.zking.util.ResponseUtil;



public class BookAction extends ActionSupport implements ModelDriver{

    private Book book=new Book();

    private BookDao bookDao=new BookDao();



    public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {

        BookDao bookDao=new BookDao();

        PageBean pageBean=new PageBean();

        pageBean.setRequest(req);

        try {

            List list=bookDao.list(book,pageBean);

            ObjectMapper om=new ObjectMapper();

            //json数组

            

            ResponseUtil.writeJson(resp,new R().data("total", pageBean.getTotal()).data("rows", list));

        } catch (Exception e) {

            e.printStackTrace();

        }    

        return null;

    }   

    

    public Book getModel() {

        return book;

    }



}