欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery之datagrid查詢詳解

 更新時間：2021年09月14日 16:42:27   作者：小丸子✘  
接下來將從前臺提交查詢條件，從MSSQL返回json數(shù)據(jù)的一個事例來講解一下datagrid動態(tài)查詢數(shù)據(jù)，感興趣的你可不要錯過了哈，希望本文可以幫助到你

在Tree的項目上增加代碼；

一、點擊左側(cè)菜單；右側(cè)Tab頁顯示相關(guān)信息（死數(shù)據(jù)）

1、存放右側(cè)相關(guān)信息頁面（userManage.jsp）

①、使用Javascript加載數(shù)據(jù)。

<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、點擊左側(cè)菜單顯示對應(yīng)頁面

①、datagrid_data1.json（數(shù)據(jù)）

{"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(賦予右側(cè)相關(guān)信息的頁面地址)

③、使用File處理來自WebContent的JSON數(shù)據(jù)

根據(jù)id內(nèi)容獲得全路徑名

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、顯示界面

二、造數(shù)據(jù)（使用數(shù)據(jù)庫數(shù)據(jù)）

人員信息維護在數(shù)據(jù)庫在選擇書籍表綁定

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 實現(xiàn) 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 {
		//選中內(nèi)容想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數(shù)組
//		System.out.println(om.writeValueAsString(list));
		//轉(zhuǎn)為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數(shù)據(jù) 

$(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中找到相應(yīng)屬性

②、在book.js中增加屬性

③、分頁后界面

④、fitColumns:true,增加該屬性填充列；

3、封裝重復(fù)代碼（鏈?zhǔn)骄幊蹋?/h3>

①、封裝

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

//轉(zhuǎn)為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中找到相應(yīng)屬性：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()
});
});

最后呈現(xiàn)book.js

$(function() {
	/**
	 * 在easyUI中，點擊下一頁上一頁等默認(rèn)的分頁效果，攜帶參數(shù)是page\rows
	 * bootstrap,點擊下一頁上一頁等默認(rèn)的分頁效果，攜帶參數(shù)是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);

⑤、最終界面

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

相關(guān)文章

  • jquery搜索框效果實現(xiàn)方法

    jquery搜索框效果實現(xiàn)方法

    這篇文章主要介紹了jquery搜索框效果實現(xiàn)方法,分析了jquery搜索框效果的實現(xiàn)技巧及注意事項,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • jquery重新播放css動畫所遇問題解決

    jquery重新播放css動畫所遇問題解決

    做css動畫，遇到需要用腳本重新播放動畫的情況，下面與大家分享下，感興趣的朋友可以參考下，希望對大家有所幫助
    2013-08-08
  • jQuery插件jquery.kxbdmarquee.js實現(xiàn)無縫滾動效果

    jQuery插件jquery.kxbdmarquee.js實現(xiàn)無縫滾動效果

    這篇文章主要為大家詳細(xì)介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-02-02
  • JQuery 中幾個類選擇器的簡單使用介紹

    JQuery 中幾個類選擇器的簡單使用介紹

    類選擇器想必很多喜歡jquery的朋友早早就涉及到了吧，它們的使用也應(yīng)該了如指掌了吧，接下來幫大家溫習(xí)下幾個簡單類選擇器的使用方法，感興趣的你可以參考下哈，希望對你有所幫助
    2013-03-03
  • jQuery實現(xiàn)表格顏色交替顯示的方法

    jQuery實現(xiàn)表格顏色交替顯示的方法

    這篇文章主要介紹了jQuery實現(xiàn)表格顏色交替顯示的方法,涉及jQuery操作表格樣式的技巧,非常具有實用價值,需要的朋友可以參考下
    2015-03-03
  • Jquery實現(xiàn)下拉菜單案例

    Jquery實現(xiàn)下拉菜單案例

    這篇文章主要為大家詳細(xì)介紹了Jquery實現(xiàn)下拉菜單案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • jQuery UI Autocomplete 體驗分享

    jQuery UI Autocomplete 體驗分享

    jQuery UI Autocomplete是jQuery UI的自動完成組件，是我用過的最強大、最靈活的Autocomplete，它支持本地的Array/JSON數(shù)組、通過ajax請求的Array/JSON數(shù)組、JSONP、以及Function(最靈活)等方式來獲取數(shù)據(jù)
    2012-02-02
  • Jquery動態(tài)進行圖片縮略的原理及實現(xiàn)

    Jquery動態(tài)進行圖片縮略的原理及實現(xiàn)

    圖片縮略在某些情況下還是比較實用的，比如在做一些商品的預(yù)覽圖縮略等等，下面為大家介紹下具體的實現(xiàn)思路及代碼，有需求的朋友可以參考下
    2013-08-08
  • jQuery實現(xiàn)為LI列表前3行設(shè)置樣式的方法【2種方法】

    jQuery實現(xiàn)為LI列表前3行設(shè)置樣式的方法【2種方法】

    這篇文章主要介紹了jQuery實現(xiàn)為LI列表前3行設(shè)置樣式的方法,結(jié)合實例形式分析了css控制及jQuery元素獲取2種實現(xiàn)方法,需要的朋友可以參考下
    2016-09-09
  • jQuery前端分頁示例分享

    jQuery前端分頁示例分享

    這篇文章主要介紹了jQuery前端分頁示例分享的相關(guān)資料,需要的朋友可以參考下
    2015-02-02

最新評論