JQuery データグリッドクエリの詳細な説明

ツリー項目にコードを追加します。

1. 左側のメニューをクリックすると、右側のタブページに関連する情報（デッドデータ）が表示されます。

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 }">

<%@ ページ language="java" contentType="text/html; charset=UTF-8"
    ページエンコーディング="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<title>ストア書籍ページ</title>
<link rel="スタイルシート" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="スタイルシート" 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>
<本文>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<テーブルid="dg"></テーブル> 
</本文>
</html>

2. 左側のメニューをクリックして対応するページを表示します

①、datagrid_data1.json（データ）

{"合計":28,"行":[
	{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"ダルメシアン","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"斑点のある成犬のメス","itemid":"EST-10"},
	{"productid":"RP-SN-01","productname":"ガラガラヘビ","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"毒なし","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":"イグアナ","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"グリーンアダルト","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":"尾部付き","itemid":"EST-15"},
	{"productid":"FL-DLH-02","productname":"ペルシャ","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"成人女性","itemid":"EST-16"},
	{"productid":"FL-DLH-02","productname":"ペルシャ語","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"成人男性","itemid":"EST-17"},
	{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"成人男性","itemid":"EST-18"}
]}

②、index.js（右側に関連情報が記載されているページアドレス）

③. Fileを使用してWebContentからのJSONデータを処理する

IDコンテンツに基づいてフルパス名を取得します

url:$("#ctx").val()+'/datagrid_data1.json'

$(関数() {
	$('#dg').データグリッド({    
	    url:$("#ctx").val()+'/datagrid_data1.json',    
	    列:[[    
	        {フィールド:'製品ID'、タイトル:'ID'、幅:100}、    
	        {フィールド:'productname',タイトル:'名前',幅:100},    
	        {field:'unitcost',title:'価格',width:100,align:'right'}    
	    ]]    
	}); 
})

3. ディスプレイインターフェース

2. データを作成する（データベースデータを使用する）

人事情報はデータベースに保持され、選択されたブックテーブルにバインドされます。

1. エンティティ、DAO、Web

① エンティティクラス

パッケージ com.mwy.entity;
パブリッククラス Book {
	プライベート int 入札;
	プライベート文字列 bname;
	非公開浮動価格;
	パブリック int getBid() {
		返答入札;
	}
	パブリック void setBid(int bid) {
		this.bid = 入札;
	}
	パブリック文字列getBname() {
		bname を返します。
	}
	パブリック void setBname(String bname) {
		this.bname = bname;
	}
	パブリックフロートgetPrice() {
		返品価格;
	}
	パブリックvoid setPrice(float price) {
		this.price = 価格;
	}
	@オーバーライド
	パブリック文字列toString() {
		"Book [bid=" + bid + ", bname=" + bname + ", price=" + price + "]" を返します。
	}
	パブリックブック(int bid, String bname, float price) {
		素晴らしい（）;
		this.bid = 入札;
		this.bname = bname;
		this.price = 価格;
	}
	パブリックブック() {
		// TODO 自動生成されたコンストラクタ スタブ
	}
}

②、BookDaoはBaseDao<Book>を継承する

パッケージ com.mwy.dao;
java.util.HashMap をインポートします。
java.util.List をインポートします。
java.util.Map をインポートします。
com.fasterxml.jackson.databind.ObjectMapper をインポートします。
com.mwy.entity.Book をインポートします。
com.zking.util.BaseDao をインポートします。
com.zking.util.PageBean をインポートします。
com.zking.util.StringUtils をインポートします。
パブリッククラスBookDaoはBaseDao<Book>を拡張します{
	パブリックリスト<Book> list(Book book, PageBean pageBean) 例外をスローします {
		文字列 sql="select * from t_mvc_book where 1=1";
		文字列 bname=book.getBname();
		if(StringUtils.isNotBlank(bname)) {
			sql+=" および bname は '%"+bname+"%'" のようになります。
		}
		super.executeQuery(sql、Book.class、pageBean) を返します。
	}
}

③、BookActionはActionSupportを継承してModelDriver<Book>を実装する

パッケージ com.mwy.web;
java.util.HashMap をインポートします。
java.util.List をインポートします。
java.util.Map をインポートします。
javax.servlet.http.HttpServletRequest をインポートします。
javax.servlet.http.HttpServletResponse をインポートします。
com.fasterxml.jackson.databind.ObjectMapper をインポートします。
com.mwy.dao.BookDao をインポートします。
com.mwy.entity.Book をインポートします。
com.zking.framework.ActionSupport をインポートします。
com.zking.framework.ModelDriver をインポートします。
com.zking.util.PageBean をインポートします。
com.zking.util.ResponseUtil をインポートします。
パブリッククラス BookAction は ActionSupport を拡張し、ModelDriver<Book> を実装します{
	プライベートBook book = new Book();
	プライベート BookDao bd = new BookDao();
	パブリック文字列データグリッド(HttpServletRequest req、HttpServletResponse resp)は例外をスローします{
		//コンテンツを選択して試してください:Ctrl+Shift+z
		BookDao bd = 新しい BookDao();
		ページBean pageBean = 新しいページBean();
        ページBean.setRequest(req);
        // 後で変更する必要があります List<Book> list = bd.list(new Book(),pageBean);
		ObjectMapper om = 新しい ObjectMapper();
		//Json 配列 // System.out.println(om.writeValueAsString(list));
		//Json オブジェクトに変換 Map<String, Object> map=new HashMap<String, Object>();
		map.put("合計", pageBean.getTotal());
		map.put("行", リスト);
		ResponseUtil.writeJson(resp, map);
		System.out.println(om.writeValueAsString(map));
		null を返します。
	}
	@オーバーライド
	パブリックブックgetModel() {
		// TODO 自動生成されたメソッドスタブ
		本を返す;
	};
}

④、mvc2.xmlを設定する

<?xml バージョン="1.0" エンコーディング="UTF-8"?>
<設定>
	<アクション パス="/menu" タイプ="com.mwy.web.MenuAction">
	</アクション>
	<アクション パス="/book" タイプ="com.mwy.web.BookAction">
	</アクション>
</config>

⑤. Fileを使用してWebContentからのJSONデータを処理する

$(関数() {
	$('#dg').データグリッド({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',    
	    列:[[    
	        {フィールド:'入札'、タイトル:'ID'、幅:100}、    
	        {フィールド:'bname',タイトル:'名前',幅:100},    
	        {field:'price',title:'価格',width:100,align:'right'}    
	    ]]    
	}); 
})

⑥. インターフェースを取得する

2. ページングを追加する

①. APIで対応する属性を見つける

②. book.jsに属性を追加する

③、ページング後のインターフェース

④、fitColumns:true、列を埋めるためにこの属性を追加します。

3. 繰り返しコードをカプセル化する（チェーンプログラミング）

① 包装

パッケージ com.zking.util;
java.util.HashMap をインポートします。
パブリッククラスRはHashMapを拡張します{
	パブリックRデータ(文字列キー、オブジェクト値) {
		this.put(キー、値);
		これを返します。
	}
}

②、BookActionコードの変更

//Jsonオブジェクトに変換
Map<String, Object> map = new HashMap<String, Object>();
map.put("合計", pageBean.getTotal());
map.put("行", リスト);
ResponseUtil.writeJson(resp, map);

に：

ResponseUtil.writeJson(resp、新しいR()。データ("total"、pageBean.getTotal()。データ("rows"、リスト));

4. クエリ条件を追加する

①. API:ツールバーで対応する属性を見つける

②. 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').データグリッド('load', {
bname: $("#bname").val()
});
});

最後にbook.jsがレンダリングされる

$(関数() {
	/**
	 * easyUIでは、次のページ、前のページなどをクリックするとデフォルトのページング効果が得られ、パラメータはpage\rowsです。
	 * ブートストラップ、次のページ、前のページなどをクリックする。デフォルトのページング効果、パラメータはpage_offsetです。
	 */
	$('#dg').データグリッド({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',    
	    ページネーション:true、
	    fitColumns:true、
	    ツールバー: '#tb',
	    列:[[    
	        {フィールド:'入札'、タイトル:'ID'、幅:100}、    
	        {フィールド:'bname',タイトル:'名前',幅:100},    
	        {field:'price',title:'価格',width:100,align:'right'}    
	    ]]    
	}); 
	$("#btn-search").click(function(){
	   $('#dg').データグリッド('load', {    
		   bname: $("#bname").val()  
	   });  
	});
})

④. BookActionインターフェースコードを修正する

意思