Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.