Javascript之datagrid查询详解
程序员文章站
2022-06-09 16:40:09
目录在tree的项目上增加代码；一、点击左侧菜单；右侧tab页显示相关信息（死数据）1、存放右侧相关信息页面（usermanage.jsp）在tree的项目上增加代码；一、点击左侧菜单；右侧tab页显...
在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);
⑤、最终界面
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容！