Jquery之datagrid查詢?cè)斀?/h1>
更新時(shí)間:2021年09月14日 16:42:27 作者:小丸子✘
接下來將從前臺(tái)提交查詢條件,從MSSQL返回json數(shù)據(jù)的一個(gè)事例來講解一下datagrid動(dòng)態(tài)查詢數(shù)據(jù),感興趣的你可不要錯(cuò)過了哈,希望本文可以幫助到你
在Tree的項(xiàng)目上增加代碼;
一、點(diǎn)擊左側(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、點(diǎn)擊左側(cè)菜單顯示對(duì)應(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:'價(jià)格',width:100,align:'right'}
]]
});
})
3、顯示界面

二、造數(shù)據(jù)(使用數(shù)據(jù)庫數(shù)據(jù))
人員信息維護(hù)在數(shù)據(jù)庫在選擇書籍表綁定
1、entity、dao、web
①、實(shí)體類
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 實(shí)現(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對(duì)象
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:'價(jià)格',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對(duì)象
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中,點(diǎn)擊下一頁上一頁等默認(rèn)的分頁效果,攜帶參數(shù)是page\rows
* bootstrap,點(diǎn)擊下一頁上一頁等默認(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:'價(jià)格',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插件jquery.kxbdmarquee.js實(shí)現(xiàn)無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2017-02-02
-
JQuery 中幾個(gè)類選擇器的簡(jiǎn)單使用介紹
類選擇器想必很多喜歡jquery的朋友早早就涉及到了吧,它們的使用也應(yīng)該了如指掌了吧,接下來幫大家溫習(xí)下幾個(gè)簡(jiǎn)單類選擇器的使用方法,感興趣的你可以參考下哈,希望對(duì)你有所幫助 2013-03-03
-
jQuery實(shí)現(xiàn)表格顏色交替顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格顏色交替顯示的方法,涉及jQuery操作表格樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下 2015-03-03
-
jQuery UI Autocomplete 體驗(yàn)分享
jQuery UI Autocomplete是jQuery UI的自動(dòng)完成組件,是我用過的最強(qiáng)大、最靈活的Autocomplete,它支持本地的Array/JSON數(shù)組、通過ajax請(qǐng)求的Array/JSON數(shù)組、JSONP、以及Function(最靈活)等方式來獲取數(shù)據(jù) 2012-02-02
-
Jquery動(dòng)態(tài)進(jìn)行圖片縮略的原理及實(shí)現(xiàn)
圖片縮略在某些情況下還是比較實(shí)用的,比如在做一些商品的預(yù)覽圖縮略等等,下面為大家介紹下具體的實(shí)現(xiàn)思路及代碼,有需求的朋友可以參考下 2013-08-08
-
jQuery實(shí)現(xiàn)為L(zhǎng)I列表前3行設(shè)置樣式的方法【2種方法】
這篇文章主要介紹了jQuery實(shí)現(xiàn)為L(zhǎng)I列表前3行設(shè)置樣式的方法,結(jié)合實(shí)例形式分析了css控制及jQuery元素獲取2種實(shí)現(xiàn)方法,需要的朋友可以參考下 2016-09-09
最新評(píng)論
在Tree的項(xiàng)目上增加代碼;
一、點(diǎn)擊左側(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、點(diǎn)擊左側(cè)菜單顯示對(duì)應(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:'價(jià)格',width:100,align:'right'} ]] }); })
3、顯示界面
二、造數(shù)據(jù)(使用數(shù)據(jù)庫數(shù)據(jù))
人員信息維護(hù)在數(shù)據(jù)庫在選擇書籍表綁定
1、entity、dao、web
①、實(shí)體類
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 實(shí)現(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對(duì)象 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:'價(jià)格',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對(duì)象
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中,點(diǎn)擊下一頁上一頁等默認(rèn)的分頁效果,攜帶參數(shù)是page\rows * bootstrap,點(diǎn)擊下一頁上一頁等默認(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:'價(jià)格',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插件jquery.kxbdmarquee.js實(shí)現(xiàn)無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02JQuery 中幾個(gè)類選擇器的簡(jiǎn)單使用介紹
類選擇器想必很多喜歡jquery的朋友早早就涉及到了吧,它們的使用也應(yīng)該了如指掌了吧,接下來幫大家溫習(xí)下幾個(gè)簡(jiǎn)單類選擇器的使用方法,感興趣的你可以參考下哈,希望對(duì)你有所幫助2013-03-03jQuery實(shí)現(xiàn)表格顏色交替顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格顏色交替顯示的方法,涉及jQuery操作表格樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jQuery UI Autocomplete 體驗(yàn)分享
jQuery UI Autocomplete是jQuery UI的自動(dòng)完成組件,是我用過的最強(qiáng)大、最靈活的Autocomplete,它支持本地的Array/JSON數(shù)組、通過ajax請(qǐng)求的Array/JSON數(shù)組、JSONP、以及Function(最靈活)等方式來獲取數(shù)據(jù)2012-02-02Jquery動(dòng)態(tài)進(jìn)行圖片縮略的原理及實(shí)現(xiàn)
圖片縮略在某些情況下還是比較實(shí)用的,比如在做一些商品的預(yù)覽圖縮略等等,下面為大家介紹下具體的實(shí)現(xiàn)思路及代碼,有需求的朋友可以參考下2013-08-08jQuery實(shí)現(xiàn)為L(zhǎng)I列表前3行設(shè)置樣式的方法【2種方法】
這篇文章主要介紹了jQuery實(shí)現(xiàn)為L(zhǎng)I列表前3行設(shè)置樣式的方法,結(jié)合實(shí)例形式分析了css控制及jQuery元素獲取2種實(shí)現(xiàn)方法,需要的朋友可以參考下2016-09-09