首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript之datagrid查询详解

Posted in Javascript onSeptember 15, 2021

在Tree的项目上增加代码；

一、点击左侧菜单；右侧Tab页显示相关信息（死数据）

1、存放右侧相关信息页面（userManage.jsp）

①、使用Javascript加载数据。

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/book.js"></script>

②、隐藏域（给book.jsp全路径名）

<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>存放书籍页面</title>
<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>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<table id="dg"></table> 
</body>
</html>

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(赋予右侧相关信息的页面地址)

Javascript之datagrid查询详解

③、使用File处理来自WebContent的JSON数据

根据id内容获得全路径名

url:$("#ctx").val()+'/datagrid_data1.json'

$(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'}    
	    ]]    
	}); 
})

3、显示界面

Javascript之datagrid查询详解

二、造数据（使用数据库数据）

人员信息维护在数据库在选择书籍表绑定

1、entity、dao、web

①、实体类

package com.mwy.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 + "]";
	}
	public Book(int bid, String bname, float price) {
		super();
		this.bid = bid;
		this.bname = bname;
		this.price = price;
	}
	public Book() {
		// TODO Auto-generated constructor stub
	}
}

②、BookDao 继承 BaseDao<Book>

package com.mwy.dao;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mwy.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 sql="select * from t_mvc_book where 1=1";
		String bname=book.getBname();
		if(StringUtils.isNotBlank(bname)) {
			sql+=" and bname like '%"+bname+"%'";
		}
		return super.executeQuery(sql, Book.class, pageBean);
	}
}

③、 BookAction 继承ActionSupport 实现 ModelDriver<Book>

package com.mwy.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.mwy.dao.BookDao;
import com.mwy.entity.Book;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.ResponseUtil;
public class BookAction extends ActionSupport implements ModelDriver<Book>{
	private Book book=new Book();
	private BookDao bd=new BookDao();
	public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		//选中内容想try:Ctrl+Shift+z
		BookDao bd=new BookDao();
		PageBean pageBean=new PageBean();
        pageBean.setRequest(req);
        //后面需要修改
		List<Book> list = bd.list(new Book(),pageBean);
		ObjectMapper om=new ObjectMapper();
		//Json数组
//		System.out.println(om.writeValueAsString(list));
		//转为Json对象
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("total", pageBean.getTotal());
		map.put("rows", list);
		ResponseUtil.writeJson(resp, map);
		System.out.println(om.writeValueAsString(map));
		return null;
	}
	@Override
	public Book getModel() {
		// TODO Auto-generated method stub
		return book;
	};
}

④、配置mvc2.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/menu" type="com.mwy.web.MenuAction">
	</action>
	<action path="/book" type="com.mwy.web.BookAction">
	</action>
</config>

⑤、使用File处理来自WebContent的JSON数据 

$(function() {
	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',    
	    columns:[[    
	        {field:'bid',title:'id',width:100},    
	        {field:'bname',title:'名称',width:100},    
	        {field:'price',title:'价格',width:100,align:'right'}    
	    ]]    
	}); 
})

⑥、得到界面

Javascript之datagrid查询详解

2、增加分页

①、api中找到相应属性

Javascript之datagrid查询详解

②、在book.js中增加属性

Javascript之datagrid查询详解

③、分页后界面

Javascript之datagrid查询详解

④、fitColumns:true,增加该属性填充列；

3、封装重复代码（链式编程）

①、封装

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代码

//转为Json对象
Map<String, Object> map=new HashMap<String, Object>();
map.put("total", pageBean.getTotal());
map.put("rows", list);
ResponseUtil.writeJson(resp , map);

改为：

ResponseUtil.writeJson(resp, new R().data("total", pageBean.getTotal()).data("rows", list));

4、增加查询条件

①、api中找到相应属性：toolbar

②、在userManage.jsp页面上增加：

<div id="tb">
    <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>
</div>

Javascript之datagrid查询详解

③、在book.js里增加：

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

最后呈现book.js

$(function() {
	/**
	 * 在easyUI中，点击下一页上一页等默认的分页效果，携带参数是page\rows
	 * bootstrap,点击下一页上一页等默认的分页效果，携带参数是page\offset
	 */
	$('#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'}    
	    ]]    
	}); 
	$("#btn-search").click(function(){
	   $('#dg').datagrid('load', {    
		   bname: $("#bname").val()  
	   });  
	});
})

④、修改BookAction界面代码

将

List<Book> list = bd.list(new Book(),pageBean);

修改为

List<Book> list = bd.list(book,pageBean);

⑤、最终界面

Javascript之datagrid查询详解

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注三水点靠木的更多内容！

Javascript之datagrid查询详解

- Author -

小丸子✘

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
js 作用域和变量详解
Feb 16 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
Js类的构建与继承案例详解
Sep 15 #Javascript
JavaScript 数组去重详解
Sep 15 #Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 #Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 #Javascript
javascript函数式编程基础
Sep 15 #Javascript
15个值得收藏的JavaScript函数
Sep 15 #Javascript
详解JavaScript中Arguments对象用途
mt-swipe(1) Switch(1) exists(2) Spring Bean(1) REST(1) openEuler(1) Spring JPA(1) 慢日志(1) cmd(1) 远程桌面(2)
You might like
php创建多级目录代码
2008/06/05 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
php验证码实现代码（3种）
2015/09/07 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Django的信号机制详解
2017/05/05 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
2019年Java 最常见的 面试题
2016/10/19 面试题
优秀毕业生推荐信
2013/11/02 职场文书
求职简历中的自我评价分享
2013/12/08 职场文书
社区七一党员活动方案
2014/01/25 职场文书
民族团结先进个人材料
2014/02/05 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
防溺水主题班会教案
2015/08/12 职场文书
运动会广播稿200字
2015/08/19 职场文书