新聞中心
最近研究bootstrap,它僅提供視覺效果,對于數(shù)據(jù)列表之類的并未涉及,網(wǎng)上找了一下,找到一個Table插件。
員工經(jīng)過長期磨合與沉淀,具備了協(xié)作精神,得以通過團(tuán)隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。成都創(chuàng)新互聯(lián)堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念,因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、電商網(wǎng)站開發(fā),微信小程序定制開發(fā),軟件按需網(wǎng)站設(shè)計等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
名為bootstrapTable。
官方地址:http://bootstrap-table.wenzhixin.net.cn/examples/
github:https://github.com/wenzhixin/bootstrap-table
因為英文差,研究了半天,做了一個demo,將就看
HTML:
選擇 | 供應(yīng)商名稱 | 供應(yīng)商編碼 | 物料編碼 | 申請類型 | 試用申請編碼 | 試用狀態(tài) | 廠別 | 審批狀態(tài) | 申請時間 | 試用結(jié)果 |
---|
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,//過濾危險字符 queryParams: getParams,//攜帶參數(shù) pageCount: 10,//每頁行數(shù) pageIndex: 0,//其實頁 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ù) function getParams(params) { var searchKey = $("#searchKey").val(); return { bysex: 1, limit: params.limit, offset: params.offset, search: searchKey }; }
TradHandler.ashx:
////// 獲取批量數(shù)據(jù)示例 /// /// private void getTradList(HttpContext context) { //用于序列化實體類的對象 JavaScriptSerializer jss = new JavaScriptSerializer(); #region 模擬數(shù)據(jù)獲取 Listlist = new List (); 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 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 testModel = new Dictionary (); for (int i=0;i< getList.Count;i++) { testModel.Add(i + 1, getList[i]); } //給分頁實體賦值 PageModels model = new PageModels (); 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實體類,這里也分享一下,泛型實體類,因為該插件需要這些屬性才能正常自動綁定
[Serializable] public class TablePageModel{ /// /// 總行數(shù) /// public long total { get; set; } ////// 總頁數(shù) /// public int page { get; set; } private List_rows; /// /// 數(shù)據(jù)源 /// public Listrows { get { if (_rows == null) _rows = new List (); return _rows; } set { _rows = value; } } }
展示數(shù)據(jù)結(jié)果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
分享名稱:bootstrapTable插件使用demo
當(dāng)前URL:http://fisionsoft.com.cn/article/phdceo.html