首页
所有分类
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 相关文章推荐
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 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对象用途
正则表达式(3) gevent(1) greenlet(1) 驱动模型(1) 分区(2) 信息校验(1) 静态压缩(1) 自动播放(1) Excel(4) Coroutine(1)
You might like
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
js获取div高度的代码
2008/08/09 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
python类继承用法实例分析
2015/05/27 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python win32 简单操作方法
2017/05/25 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
巴西最大的巴士票务门户：Quero Passagem
2020/11/21 全球购物
什么是数据抽象
2016/11/26 面试题
北京振戎融通Java面试题
2015/09/03 面试题
国培教师自我鉴定
2014/02/12 职场文书
调研汇报材料范文
2014/08/17 职场文书
建筑工地文明标语
2014/10/09 职场文书
学校运动会广播稿
2014/10/11 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
西安兵马俑导游词
2015/02/02 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
SQL Server中使用判断语句（IF ELSE/CASE WHEN ）案例
2021/07/07 SQL Server
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题