官方网站建设公司排名seo实战培训学校
一，点击人员信息回顾，右侧Tab页显示书籍相关信息
1.要有一个存放书籍信息的展示页面
在WebContent目录下创建Folder文件夹jsp，在jsp目录下创建useManage.jsp界面
2.点击右侧菜单，显示对应页面
content : '<iframe width="100%" height="100%" src="'
+ node.attributes.self.menuURL
+ '"></iframe>',
3.引入datagrid数据表格，以死数据的方式先引入进去
在useManage.jsp界面中添加数据表格
<table id="dg"></table>
添加相关依赖
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/book.js"></script>
每个表都需要建立相应的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;}@Overridepublic 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<Book> {public List<Book> 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<Book> 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<Book> {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<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));return null;}@Overridepublic Book getModel() {// TODO Auto-generated method stubreturn book;}}book.js代码如下：
$(function() {
/**
* 注意：js文件中不支持el表达式 在easyUI中点击上一页下一页默认的分页效果，携带的参数为page和rows
* 在bootstrap中点击上一页下一页默认的分页效果，携带的参数为page和offset
*/
$('#dg').datagrid({
url : $("#ctx").val() + '/book.action?methodName=datagrid',
pagination : true,fitColumns : true,
toorbar : '#tb',
columns : [ [ {
field : 'bid',
title : 'id',
width : 100
}, {
field : 'bname',
title : '名称',
width : 100
}, {
field : 'price',
title : '价格',
width : 100,
align : 'right'
} ] ]
});
})
二，分页的实现：在datagrid控件底部显示分页工具栏
pagination : true,
mvc2.xml配置：
<action path="/book" type="com.zking.web.BookAction"></action>
三，填充：自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动
fitColumns : true,
运行结果如下：
注意：
js文件中不支持el表达式 在easyUI中点击上一页下一页默认的分页效果，携带的参数为page/rows
在bootstrap中点击上一页下一页默认的分页效果，携带的参数为page/offset
layui 中page / limit
四，查询
将代码复制到manage.jsp文件中
<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>
在js文件中与查询组件进行绑定（通过 id=“tb”），最后book.js文件为：
$(function() {
/**
* 注意：js文件中不支持el表达式 在easyUI中点击上一页下一页默认的分页效果，携带的参数为page和rows
* 在bootstrap中点击上一页下一页默认的分页效果，携带的参数为page和offset layui 中page limit
*/
$('#dg').datagrid({
url : $('#ctx').val() + '/book.action?methodName=datagrid',
pagination : true,
fitColumns : true,
toorbar : '#tb',
columns : [ [ {
field : 'bid',
title : 'id',
width : 100
}, {
field : 'bname',
title : '名称',
width : 600
}, {
field : 'price',
title : '价格',
width : 100,
align : 'right'
} ] ]
});
$("#btn-search").click(function() {
$('#dg').datagrid('load', {
bname : $("#bname").val(),
});
})
})
.在js文件中通过btn-search属性进行关键字查询，bname为搜索按钮的的id和name属性
运行结果如下：
