easyui datagrid之查询

一、如何与tree交互跳转页面

1.在WebContent下建一个jsp文件夹用来装jsp文件

2.建一个jsp页面，将js和css导进去

找到api里面的datagrid，将代码复制到jsp文件里

 3.建一个js文件，将api里面的代码复制

1. $('#dg').datagrid({   
2.     url:'datagrid_data.json',   
3.     columns:[[   
4.         {field:'code',title:'代码',width:100},   
5.         {field:'name',title:'名称',width:100},   
6.         {field:'price',title:'价格',width:100,align:'right'}   
7.     ]]   
8. });  

4.一定要在jsp界面配置js路径 

二、datagrid的使用

1.找到tree表的url数据，以人员信息维护为例

 2.建一个jsp页面，路径为jsp文件夹下的userManage.jsp

3.导入js和css

4.建一个实体类，将要导入的数据属性写下

5.dao方法见以下代码

public List<Book> list(Book book,PageBean pageBean) throws Exception{
		String sql="select * from t_mvc_book where 1=1";
		String bname = book.getBname();
		if(StringUtils.isNotBlank(bname)) {
			sql+=" and bname like '%"+bname+"%'";
		}
		return super.executeQuery(sql, Book.class, pageBean);
		
	}

为查询全部的方法

6.子控制器

BookAction

package com.sjy.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.sjy.dao.BookDao;
import com.sjy.entity.Book;
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>{
public Book book=new Book();
public BookDao bookDao=new BookDao();
	@Override
	public Book getModel() {
		return book;
	}

		public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {
			
			PageBean pageBean=new PageBean();
			pageBean.setRequest(req);
			BookDao bookDao=new BookDao();
			List<Book> list = bookDao.list(book, pageBean);
			Map<String, Object> map=new HashMap<String, Object>();
			map.put("total", pageBean.getTotal());
			map.put("rows", list);
			ObjectMapper om=new ObjectMapper();
			ResponseUtil.writeJson(resp, map);
			return null;
		}
}

7.js文件内

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

field属性要用实体类的属性，否则会报错

8.配置xml文件

<action path="/book" type="com.sjy.web.BookAction">
    </action>

这样就写好一个datagrid啦

运行结果如下

人员信息维护对应的也就是这个datagrid了

三、分页以及查询 

1.分页只需要在js文件中加入一个pagination属性即可

 

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

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

fitColumns:true为填充列

使用后width达到100%

2.查询

2.1.将代码复制到manage.jsp文件中

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

2.2.在js文件中与查询组件进行绑定（通过 id=“tb”）

 样式结果为

2.3.在js文件中通过btn-search属性进行关键字查询

$(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:400},    
	        {field:'price',title:'价格',width:100,align:'right'}    
	    ]]    
	});
	
	
	
	$('btn-search').click(function(){
		$('#dg').datagrid('load', {    
			bname: $('bname').val(),    
			
		});
	})
	
})

bname为搜索按钮的的id和name属性

查询结果为

 

即可根据关键字进行查询