easyUI之datagrid（数据表格）使用

href=“${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css”>

href=“${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css”>

src=“${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js”>

src=“${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js”>

src=“${pageContext.request.contextPath }/static/js/book.js”>

每个表都需要建立相应的js

建立book.js

将demo文件中的datagrid.data1.json复制到WebContent目录下

book.js代码如下：

$(function() {

/**

* 注意：js文件中不支持el表达式

*/

$(‘#dg’).datagrid({

url:‘datagrid_data1.json’,

columns:[[

{field:‘productid’,title:‘id’,width:100},

{field:‘productname’,title:‘名称’,width:100},

{field:‘unitcost’,title:‘价格’,width:100,align:‘right’}

]]

});

})

4.造数据

建立实体类Book

package com.zking.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;

}

@Override

public String toString() {

return “Book [bid=” + bid + “, bname=” + bname + “, price=” + price + “]”;

}

}

建立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(), 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));

}

}

BookAction子控制器

package com.zking.web;

import java.util.List;

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;

//ctrl+shif+z trycatch包裹

public class BookAction extends ActionSupport implements ModelDriver {

private Book book = new Book();

public BookDao bookDao = new BookDao();

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

BookDao bookDao = new BookDao();

PageBean pageBean = new PageBean();

pageBean.setRequest(req);

List 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));

return null;

}

@Override

public Book getModel() {

// TODO Auto-generated method stub

return book;

}

}

book.js代码如下：

$(function() {

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分