Javascript之datagrid查询详解

目录
  • 在Tree的项目上增加代码;
  • 一、点击左侧菜单;右侧Tab页显示相关信息(死数据)
    • 1、存放右侧相关信息页面(userManage.jsp)
    • 2、点击左侧菜单显示对应页面
    • 3、显示界面
  • 二、造数据(使用数据库数据)
    • 1、entity、dao、web
    • 2、增加分页
    • 3、封装重复代码(链式编程)
    • 4、增加查询条件
  • 总结

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

③、使用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、显示界面

二、造数据(使用数据库数据)

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

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

⑥、得到界面

2、增加分页

①、api中找到相应属性

②、在book.js中增加属性

③、分页后界面

④、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>

③、在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);

⑤、最终界面

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-09-12

Jquery EasyUI Datagrid右键菜单实现方法

最近在学Jquery EasyUI,现在来说一说EasyUI的DataGrid,一般当我们在实现前端界面的时候,经常在DataGrid的上面或者后面加一些按钮,方便用户进行一些添加,删除,编辑等功能 用户在每次使用的时候,都需要去先选中一条或者多条数据,然后在去点按钮进行相关操作,这样其实还是很麻烦的,做项目的过程中,为了用户着想,做了一个右键菜单,用户想要删除或者编辑某一条数据直接在其位置上右键就可以. 下面上HTML 代码 <div id="menu" class="

基于datagrid框架的查询

复制代码 代码如下: <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" /><link href="jquery-easyui

jQuery easyui datagrid动态查询数据实例讲解

该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码 复制代码 代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu

jquery easyui dataGrid动态改变排序字段名的方法

jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致: 如:实体类中的属性为userName,前台filed="userName"而数据库的字段为user_name,这个时候如果把userName设置为排序列,然后去进行点击,就会抛出异常,因为dataGrid在排序的时候会以filed="userName"中的字段名为排序字段: 问题:

jQuery Easyui学习之datagrid 动态添加、移除editor

使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了. 比如像下面这样:添加行的时候每个值都是手动输入,修改的时候第一个值不能修改.我们来看下怎么实现这样的效果. easyui本身是不提供这么细节的功能的,需要我们自己拓展下: 在编辑的时候移除第一列的editor属性,添加的时候,添加第一列的属性. //扩展datagrid:动态添加删除editor $.extend($.fn.datagrid.methods, {

jquery easyui DataGrid简单示例

一.简单示例 HTML <table id="tbList" striped="true" rownumbers="true" fix="true" fitcolumns="true" title="标题" idfield="ID" checkbox="true" url="@Url.Action("ListData&qu

jQuery EasyUI之DataGrid使用实例详解

jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页,可以下载完整开发包,里面有示例代码可以参考. 运行效果图: 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分: <link href="../Js/jQueryEasyUI/them

jQuery中ajax - get() 方法实例详解

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

jQuery表单插件ajaxForm实例详解

前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t

jquery easyui validatebox remote的使用详解

validatebox 的validateType可以是一下3个格式: 1字符串 2数组,应用多个验证 3对象,每个key是一个验证名称value是验证的数组参数 下面是代码示例 <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options

jquery 校验中国身份证号码实例详解

jquery 校验中国身份证号码实例详解 大陆18位身份证(第二代身份证) 身份号码是一组具有特征组合码,由十七位数字本体码和一位校验码组成. 排列顺序从左至右依次为:六位数字地区码,八位数字生日码,三位数字顺序码和一位数字校验码. 校验方法: (1)先对前17位数字的权求和 S = Sum(Ci * Vi), i = 0, ... , 16 Ci:表示身份证号码上第i位置的数字值 Vi:表示第i位置上的"加权因子" 加权因子Vi: 7 9 10 5 8 4 2 1 6 3 7 9 1

jquery实现搜索框功能实例详解

搜索框实现搜索一个ul列表中的指定关键词的li. html代码: <ul class="todo-content"> <li class="todo-ltem"> <div class="todo-tip"> <p>fhasjfas</p> </div> <div class="todo-btnlist"> <button class=&

jquery.picsign图片标注组件实例详解

经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教. 因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足需求,并且存在一些bug,坑太多 因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了jquery.picsign组件 jQuery图片标注组件(jquery.picsign) 在线演示:http://artlessbruin.gitee.io/picsign/ gitee:https://gitee.com/Artle

jQuery中ajax - post() 方法实例详解

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

Jquery Easyui选项卡组件Tab使用详解(10)

本文实例为大家分享了Jquery Easyui选项卡组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-tabs" style="width: 400px;height: 250px"> <div title="Tab1" data-options="closable:true"> tab1 </div> <div title=&q

Jquery Easyui菜单组件Menu使用详解(15)

本文实例为大家分享了Jquery Easyui菜单组件的实现代码,供大家参考,具体内容如下 加载方式 菜单组件通常用于快捷菜单,在加载方式上,通过 class 或 JS 进行设置为菜单组件.然后,再通过 JS 事件部分再响应. <div id="box" class="easyui-menu"> <div>新建</div> <div> <span>打开</span> <!--二次菜单--&