How to implement datagrid query in Javascript
Editor to share with you how to achieve datagrid query in Javascript, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Add code to the Tree project; first, click the left menu; the right Tab page displays related information (dead data) 1, store the right related information page (userManage.jsp)
①, use Javascript to load data.
②, hidden domain (give book.jsp full path name)
Store the book page 2, click the left menu to display the corresponding page
①, datagrid_data1.json (data)
{"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 (the page address given to the relevant information on the right)
③, using File to process JSON data from WebContent
Get the full path name according to the content of 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:' name', width:100} {field:'unitcost',title:' Price', width:100,align:'right'}]]}) }) 3. Display interface
Second, create data (using database data)
Personnel information is maintained in the database binding in the selected book table
1 、 entity 、 dao 、 web
①, entity class
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}}
② and BookDao inherit BaseDao
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 {public List 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);}}
③ and BookAction inherit ActionSupport to implement ModelDriver
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 {private Book book=new Book () Private BookDao bd=new BookDao (); public String datagrid (HttpServletRequest req, HttpServletResponse resp) throws Exception {/ / want to try:Ctrl+Shift+z BookDao bd=new BookDao (); PageBean pageBean=new PageBean (); pageBean.setRequest (req); / / need to modify List list = bd.list (new Book (), pageBean) ObjectMapper om=new ObjectMapper (); / / Json array / / System.out.println (om.writeValueAsString (list)); / / convert to Json object Map map=new HashMap (); 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;};}
④, configure mvc2.xml
⑤, using File to process JSON data from WebContent
$(function () {$('# dg'). Datagrid ({url:$ ("# ctx"). Val () +'/ book.action?methodName=datagrid', columns: [[{field:'bid',title:'id',width:100}, {field:'bname',title:' name', width:100} {field:'price',title:' Price', width:100,align:'right'}]]}) })
⑥, get the interface
2. Add paging
Find the corresponding attributes in ① and api
②, adding attributes to book.js
③, paged interface
④, fitColumns:true, add this attribute to fill the column
3. Encapsulate repetitive code (chain programming)
①, encapsulation
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;}}
②, change the BookAction code
/ / converted to Json object
Map map=new HashMap ()
Map.put ("total", pageBean.getTotal ())
Map.put ("rows", list)
ResponseUtil.writeJson (resp, map)
Change to:
ResponseUtil.writeJson (resp, new R (). Data ("total", pageBean.getTotal ()) .data ("rows", list))
4. Add query conditions
Find the corresponding attribute in ① and api: toolbar
②, add to the userManage.jsp page:
Search
③, add to book.js:
$("# btn-search") .click (function () {
$('# dg'). Datagrid ('load', {
Bname: $("# bname") .val ()
});
});
The final presentation of book.js
$(function () {/ * in easyUI, click the next page, etc. Default paging effect. The parameter is page\ rows * bootstrap. Click the next page back page and other default paging effect. The carrying parameter is 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:' name', width:100}, {field:'price',title:' Price', width:100,align:'right'}]]}) ("# btn-search") .click (function () {$('# dg') .datagrid ('load', {bname: $("# bname"). Val ()});})
④, modify BookAction interface code
Set
List list = bd.list (new Book (), pageBean)
Modify to
List list = bd.list (book,pageBean)
⑤, final interface
The above is all the contents of the article "how to implement datagrid query in Javascript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
