首页
所有分类
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 相关文章推荐
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
js中的面向对象入门
Mar 06 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
js实现验证码功能
Jul 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对象用途
迪杰斯特拉(1) Dijkstra(1) nacos(1) seata(1) Android Studio(4) MyBatis(5) 三角函数(1) cv2(1) 优先队列(1) exec(1)
You might like
逐步提升php框架的性能
2008/01/10 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
2019/11/21 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
50行Python代码实现视频中物体颜色识别和跟踪（必须以红色为例）
2019/11/20 Python
如何通过python实现人脸识别验证
2020/01/17 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
NUK奶瓶美国官网：NUK美国
2016/09/26 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
大学生创业计划书的用途
2014/01/08 职场文书
房地产营销策划方案
2014/02/08 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
劳资员岗位职责
2015/02/13 职场文书
亮剑观后感500字
2015/06/05 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
java解析XML详解
2021/07/09 Java/Android
Redis过期数据是否会被立马删除
2022/07/23 Redis