哪个网站的品牌特卖做的好,九江网站建设优化,徐州品牌网站建设,有教做桥梁质检资料的网站吗一#xff0c;点击人员信息回顾#xff0c;右侧Tab页显示书籍相关信息
1.要有一个存放书籍信息的展示页面
在WebContent目录下创建Folder文件夹jsp#xff0c;在jsp目录下创建useManage.jsp界面
2.点击右侧菜单#xff0c;显示对应页面 content : iframe width点击人员信息回顾右侧Tab页显示书籍相关信息
1.要有一个存放书籍信息的展示页面
在WebContent目录下创建Folder文件夹jsp在jsp目录下创建useManage.jsp界面
2.点击右侧菜单显示对应页面 content : iframe width100% height100% src node.attributes.self.menuURL /iframe, 3.引入datagrid数据表格以死数据的方式先引入进去 在useManage.jsp界面中添加数据表格 table iddg/table 添加相关依赖 link relstylesheet typetext/css href${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css link relstylesheet typetext/css href${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css script typetext/javascript src${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js/script script typetext/javascript src${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js/script script typetext/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 BaseDaoBook {public ListBook list(Book book, PageBean pageBean) throws Exception {String bname book.getBname();String sql select * from t_mvc_book where 11;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();ListBook list bookDao.list(new Book(), pageBean);ObjectMapper om new ObjectMapper();// json数组MapString, Object map new HashMapString, 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;//ctrlshifz trycatch包裹
public class BookAction extends ActionSupport implements ModelDriverBook {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);ListBook list bookDao.list(book, pageBean);ObjectMapper om new ObjectMapper();// json数组// MapString, Object map new HashMapString, 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?methodNamedatagrid, 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 typecom.zking.web.BookAction/action 三填充自动展开/收缩列的大小以适应网格的宽度防止水平滚动 fitColumns : true, 运行结果如下
注意
js文件中不支持el表达式 在easyUI中点击上一页下一页默认的分页效果携带的参数为page/rows
在bootstrap中点击上一页下一页默认的分页效果携带的参数为page/offset
layui 中page / limit
四查询
将代码复制到manage.jsp文件中 input classeasyui-textbox idbname namebname stylewidth:20%;padding-left: 10px data-optionslabel:书名:,required:true a idbtn-search href# classeasyui-linkbutton data-optionsiconCls:icon-search搜索/a a id href# classeasyui-linkbutton data-optionsiconCls: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?methodNamedatagrid, 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属性
运行结果如下
