Easyui之datagrid之查询

目标：在上次博客的基础上点击左侧树状图会出来数据库对应的页面并且有分页和查询效果

 第一步：先创建一个相应的页面并且导入相对的jquery文件

注：因为数据库里是对应的路径 

第二步：创建一个对应的js文件（我这是book.js）并且修改之前的路径并且把easyui中的源码导入到创建的js文件 

jsp页面：

1. <table id="dg"></table> 
2. 对应的js层：
3. $('#dg').datagrid({   
4.     url:'datagrid_data.json',   
5.     columns:[[   
6.         {field:'code',title:'代码',width:100},   
7.         {field:'name',title:'名称',width:100},   
8.         {field:'price',title:'价格',width:100,align:'right'}   
9.     ]]   
10. }); 

第三步：导入easyui中dome中的datagrid_data1.json

{"total":28,"rows":[
	{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

第四步：把第二步中的field中的名字改成第三步的名字就得到了第三步中的死数据 

第五步：导入数据库中的数据 

        5.1:写实体类

                以我的book举例

package com.sg.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;
	}
	public Book(int bid, String bname, float price) {
		super();
		this.bid = bid;
		this.bname = bname;
		this.price = price;
	}
	public Book() {
		// TODO Auto-generated constructor stub
	}
	@Override
	public String toString() {
		return "Book [bid=" + bid + ", bname=" + bname + ", price=" + price + "]";
	}
	
}

        5.2:写dao方法

package com.sg.dao;

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

import com.fasterxml.jackson.databind.ObjectMapper;
import com.sg.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 {
		// TODO Auto-generated method stub
		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<Book> list = bookDao.list(new Book(),new PageBean());
		ObjectMapper om=new ObjectMapper();
//		json数据
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("total", pageBean.getTotal());
		map.put("rows", list);
		System.out.println(om.writeValueAsString(list));
	}
}

        5.3:写web包中的Action()

package com.sg.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.sg.dao.BookDao;
import com.sg.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<Book>{
	private Book book=new Book();
	private BookDao bookDao=new BookDao();
	public String datagrid(HttpServletRequest req, HttpServletResponse resp) {
		// TODO Auto-generated method stub
		BookDao bookDao=new BookDao();
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		try {
			List<Book> list = bookDao.list(book,pageBean);
			ObjectMapper om=new ObjectMapper();
//			json数据
//			Map<String, Object> map=new HashMap<String, Object>();
//			map.put("total", pageBean.getTotal());
//			map.put("rows", list);
			ResponseUtil.writeJson(resp, new R()
					.data("total", pageBean.getTotal())
					.data("rows", list));
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
		return null;
	}
	@Override
	public Book getModel() {
		// TODO Auto-generated method stub
		return book;
	}
}

        5.4:再把下面的field中的名字改成实体类对应的属性名

  $(function(){
	  /**
	   * 在easyui中，点击下一页上一页等默认的分页效果，携带的参数是page/rows
	   * bootstrap,点击下一页上一页等默认的分页效果，携带的参数是page/offset
	   */
	  $('#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()
			}); 
	  });
	  
  })

5.5:分页

pagination:true

5.6:填充

fitColumns:true

5.7:查询的样式

jsp页面：

<div id="tb">
    <input class="easyui-textbox" id="bname" name="bname" 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="" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a> -->
</div>

js:

$('#btn-search').click(function(){
		  $('#dg').datagrid('load', {    
			    bname: $("#bname").val()
			}); 
	  });

测试结果：

优化：链表编程 

作用：减少代码的重复性

怎么做：

先创建一个新的类并且写对应的方法

然后再到需要用的地方调用就可以了

链表类：

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;
	}
}

调用：

 向后台请求数据的关键字：

easyui:   page/rows

bootstarp:   page/offset

layui:   page/limit

今天就到这了！！！