首页
所有分类
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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 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对象用途
复读(1) GZIP(2) DNS服务器(2) FTP服务器(1) 磁盘分区(1) DBLink(1) .NET Framework(2) IIS7(1) 事务并发(1) 界面设计(1)
You might like
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
thinkphp 5框架实现登陆，登出及session登陆状态检测功能示例
2019/10/10 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
Vue 组件注册实例详解
2019/02/23 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
[15:09]DOTA2国际邀请赛采访专栏：Loda
2013/08/06 DOTA
python3使用flask编写注册post接口的方法
2018/12/28 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
俄罗斯大型在线书店：Читай-город
2019/10/10 全球购物
Roxy荷兰官方网站：冲浪、滑雪板、服装和配件
2019/10/22 全球购物
伦敦新晋轻奢耳饰潮牌：Tada & Toy
2020/05/25 全球购物
美国最大的购物网站：Amazon.com（亚马逊美国）
2020/05/23 全球购物
西部世纪面试题
2014/12/05 面试题
初中学校军训方案
2014/05/09 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
MySQL 数据丢失排查案例
2021/05/08 MySQL
webpack的移动端适配方案小结
2021/07/25 Javascript
《战锤40K：暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
DE1103使用报告
2022/04/05 无线电