1、存放右侧相关信息页面
建立userManage.jsp界面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
存放书籍的页面
搜索
加载数据
放入隐藏域
2、点击左侧菜单显示对应页面①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"}
]}
②index.js数据
改路径
$(function() {
$('#dg').datagrid({
url:$("#ctx").val()+'/datagrid_data1.json',
columns:[[
{field:'productid',title:'id',width:100},
{field:'productname',title:'名称',width:100},
{field:'unitcost',title:'价格',width:100,align:'right'}
]]
});
})
————————————————
版权声明:本文为CSDN博主「Jay永不过时」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Cat_Jay_Fish/article/details/120290014
二、造数据(使用数据库数据)
①entity包
Book类
package com.lsy.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 + "]";
}
}
②dao包
package com.lsy.dao; import java.util.HashMap; import java.util.List; import java.util.Map; import com.fasterxml.jackson.databind.ObjectMapper; import com.lsy.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(map)); } }
③web包
package com.lsy.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.lsy.dao.BookDao; import com.lsy.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) { BookDao bookDao=new BookDao(); PageBean pageBean = new PageBean(); pageBean.setRequest(req); try { List list = bookDao.list(book, pageBean); ObjectMapper om=new ObjectMapper(); //json数组 // Map map=new HashMap (); // map.put("total", pageBean.getTotal()); // map.put("rows", list); //链式编程 ResponseUtil.writeJson(resp, new R() .data("total", pageBean.getTotal()) .data("rows", list)); } catch (Exception e) { e.printStackTrace(); } return null; } public Book getModel() { return book; } }
配置xml文件
使用file文件处理json数据
$('#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'}
]]
});
界面展示
页面中的分页数据代码
pagination:true,
返回的类型是boolean类型
3、封装重复代码(链式编程)
建立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代码
Map
// map.put("total", pageBean.getTotal());
// map.put("rows", list);
改为
ResponseUtil.writeJson(resp, new R()
.data("total", pageBean.getTotal())
.data("rows", list));
链式编程一直点就行了,方便
4、增加查询条件
代码
搜索
将此代码加到userManage.jsp 界面中
再去book.js文件中加
$("#btn-search").click(function() {
$('#dg').datagrid('load', {
bname: $("#bname").val()
});
});
BookAction中
标记的地方改为
List
list = bookDao.list(book, pageBean);
最终结果展示



