最近研究bootstrap,它僅提供視覺效果,對于數(shù)據(jù)列表之類的并未涉及,網(wǎng)上找了一下,找到一個(gè)Table插件。
員工經(jīng)過長期磨合與沉淀,具備了協(xié)作精神,得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。成都創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念,因?yàn)椤皩W⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、電商網(wǎng)站開發(fā),微信小程序定制開發(fā),軟件按需網(wǎng)站設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
名為bootstrapTable。
官方地址:http://bootstrap-table.wenzhixin.net.cn/examples/
github:https://github.com/wenzhixin/bootstrap-table
因?yàn)橛⑽牟睿芯苛税胩欤隽艘粋€(gè)demo,將就看
HTML:
<table class="table" id="dataShow" >
<thead>
<tr>
<th data-checkbox="true">選擇</th>
<th data-field="rkey">供應(yīng)商名稱</th>
<th data-field="rkey">供應(yīng)商編碼</th>
<th data-field="name">物料編碼</th>
<th data-field="sex">申請類型</th>
<th data-field="birthdayString">試用申請編碼</th>
<th data-field="age">試用狀態(tài)</th>
<th data-field="age">廠別</th>
<th data-field="age">審批狀態(tài)</th>
<th data-field="birthday">申請時(shí)間</th>
<th data-field="age">試用結(jié)果</th>
</tr>
</thead>
</table> JS:
var currPageIndex = 0;
var currLimit = 10;
$(function () {
$("#dataShow").bootstrapTable({
url: "TradHandler.ashx?request=getTradList",
sortName: "rkey",//排序列
striped: true,//條紋行
sidePagination: "server",//服務(wù)器分頁
//showRefresh: true,//刷新功能
//search: true,//搜索功能
clickToSelect: true,//選擇行即選擇checkbox
singleSelect: true,//僅允許單選
//searchOnEnterKey: true,//ENTER鍵搜索
pagination: true,//啟用分頁
escape: true,//過濾危險(xiǎn)字符
queryParams: getParams,//攜帶參數(shù)
pageCount: 10,//每頁行數(shù)
pageIndex: 0,//其實(shí)頁
method: "get",//請求格式
//toolbar: "#toolBar",
onPageChange: function (number, size) {
currPageIndex = number;
currLimit = size
},
onLoadSuccess: function ()
{
$("#searchBtn").button('reset');
}
});
//搜索
$("#searchBtn").click(function () {
$(this).button('loading');
var nullparamss = {};
$("#dataShow").bootstrapTable("refresh", nullparamss);
});
//enter鍵搜索
$("#searchKey").keydown(function (event) {
if (event.keyCode == 13)
{
$("#searchBtn").click();
}
});
//阻止enter鍵提交表單
$("#mainForm").submit(function () {
return false;
});
});
//默認(rèn)加載時(shí)攜帶參數(shù)
function getParams(params) {
var searchKey = $("#searchKey").val();
return { bysex: 1, limit: params.limit, offset: params.offset, search: searchKey };
}
TradHandler.ashx:
/// <summary>
/// 獲取批量數(shù)據(jù)示例
/// </summary>
/// <param name="context"></param>
private void getTradList(HttpContext context)
{
//用于序列化實(shí)體類的對象
JavaScriptSerializer jss = new JavaScriptSerializer();
#region 模擬數(shù)據(jù)獲取
List<SimpleModel> list = new List<SimpleModel>();
for (int i = 0; i < 1000; i++)
{
list.Add(new SimpleModel() { age = 18, name = "小李" + i, rkey = i + 1, sex = "男" });
}
//請求中攜帶的條件
string bysex = context.Request.Params["bysex"];
string searchKey = context.Request.Params["search"];
//請求中攜帶的頁數(shù)和下標(biāo)
int dataIndex = Convert.ToInt32(context.Request.Params["offset"]);
int pageCount = Convert.ToInt32(context.Request.Params["limit"]);
//查詢滿足條件的數(shù)據(jù)
List<SimpleModel> getList;
if (bysex != null && searchKey != null)
{
getList = (from p in list
where p.sex == (bysex == "0" ? "女" : "男") && p.name.Contains(searchKey.Trim())
select p).ToList();
}
else
{
getList = list;
}
#endregion
//將結(jié)果增加一列序號列
Dictionary<int, SimpleModel> testModel = new Dictionary<int, SimpleModel>();
for (int i=0;i< getList.Count;i++)
{
testModel.Add(i + 1, getList[i]);
}
//給分頁實(shí)體賦值
PageModels<SimpleModel> model = new PageModels<SimpleModel>();
model.total = getList.Count;
if (getList.Count % pageCount == 0)
model.page = getList.Count / pageCount;
else
model.page = (getList.Count / pageCount) + 1;
//獲取對應(yīng)頁的數(shù)據(jù)
model.rows = testModel.Where(t => t.Key > dataIndex && t.Key <= dataIndex + pageCount).Select(t => t.Value).ToList();
//將查詢結(jié)果返回
context.Response.Write(jss.Serialize(model));
}
有同學(xué)問pagemodel實(shí)體類,這里也分享一下,泛型實(shí)體類,因?yàn)樵摬寮枰@些屬性才能正常自動(dòng)綁定
[Serializable]
public class TablePageModel<T>
{
/// <summary>
/// 總行數(shù)
/// </summary>
public long total { get; set; }
/// <summary>
/// 總頁數(shù)
/// </summary>
public int page { get; set; }
private List<T> _rows;
/// <summary>
/// 數(shù)據(jù)源
/// </summary>
public List<T> rows
{
get
{
if (_rows == null)
_rows = new List<T>();
return _rows;
}
set
{
_rows = value;
}
}
}
展示數(shù)據(jù)結(jié)果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站欄目:bootstrapTable插件使用demo
分享路徑:http://chinadenli.net/article40/phdceo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、ChatGPT、網(wǎng)頁設(shè)計(jì)公司、外貿(mào)建站、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)