EasyUI DataGrid control uses

datagrid Control use

1. The goal is
Display the data of the database to tabs On the page , And provide query and paging
design sketch ：

** After deleting, modifying and adding, we will talk about today's query and presenting data to the table ：
First of all, we understand datagrid Control
Is a data table control ： And it has its own paging attribute
jsp Write a table label and toolbar in the interface
// form

// Two buttons

Search for newly added

js Interface
$(function() {}）// Automatic operation
datagrid It needs to be written in self operation **

$('#dg').datagrid({
    
       // Data file read file path 
		url : $("#ctx").val() + '/book.action?methodName=books',
		// Paging toolbar properties 
		pagination : true,
		// Real auto expand / Shrink the size of the column , To fit the width of the grid , Prevent horizontal scrolling .
		fitColumns : true,
		// Define toolbar I define search and add buttons here 
		toolbar : '#tb',
		// listed 
		columns : [ [ {
    
		//field Is to read data files , Properties must be the same to be read 
			field : 'bid',
			title : 'id',
			width : 100
		}, {
    
			field : 'bname',
			title : ' name ',
			width : 100
		}, {
    
			field : 'price',
			title : ' Price ',
			width : 100
		}, {
    
			field : ' operation ',
			title : ' operation ',
			width : 100,
			align : "right",
			formatter : function(value, row, index) {
    
				return "<a href='javascript:void(0);' οnclick='xg()'> modify </a>" +
						"&nbsp<a href='javascript:void(0);' οnclick='del()'> Delete </a> "
			}
		}

		] ]
	})

The latter is to transfer the background data to js coming
How to get data

public List<Book> executeQuery(Book book, PageBean pageBean) throws Exception {
    
	String bname = book.getBname();
	String sql = "select * from t_mvc_book where 1=1";
	// If you pass the name, add a fuzzy query statement 
	if (StringUtils.isNotBlank(bname)) {
    
		sql += " and bname like '%" + bname + "%'";
	}
	return super.executeQuery(sql, Book.class, pageBean);
}

Translate data into datagrid Need the form and send

	public String books(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    
	// Paging properties 
		PageBean pageBean = new PageBean();
		// Pass pages in 
		// stay easyui in , Click next page, previous page and other default paging effects , The parameters carried are page/rows
		// I packaged it pageBean Just these two properties 
		pageBean.setRequest(req);
		// Get all the data in the database 
		List<Book> list = bookdao.executeQuery(book, pageBean);
		// Change the data into the required format 
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("total", pageBean.getTotal());
		map.put("rows", list);
		// Convert data to josn And send it back 
		ResponseUtil.writem(resp, map);
		return null;
	}

Search function
Set click events for search
load Send data to the background
And the front dao Package method corresponds to

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

result ：