什么叫微信小程序_bootstrap Table插件使用demo

  • 栏目:行业动态 时间:2021-01-11 15:32 分享新闻到:
<返回列表

bootstrap Table插件使用demo       本篇文章主要介绍了bootstrap Table插件使用demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近研究bootstrap,它仅提供视觉效果,对于数据列表之类的并未涉及,网上找了一下,找到一个Table插件。

名为bootstrapTable。

github:

因为英文差,研究了半天,做了一个demo,将就看

HTML: 

 table id="dataShow" 
 thead 
 th data-checkbox="true" 选择 /th 
 th data-field="rkey" 供应商名称 /th 
 th data-field="rkey" 供应商编码 /th 
 th data-field="name" 物料编码 /th 
 th data-field="sex" 申请类型 /th 
 th data-field="birthdayString" 试用申请编码 /th 
 th data-field="age" 试用状态 /th 
 th data-field="age" 厂别 /th 
 th data-field="age" 审批状态 /th 
 th data-field="birthday" 申请时间 /th 
 th data-field="age" 试用结果 /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",//服务器分页 
 //showRefresh: true,//刷新功能 
 //search: true,//搜索功能 
 clickToSelect: true,//选择行即选择checkbox 
 singleSelect: true,//仅允许单选 
 //searchOnEnterKey: true,//ENTER键搜索 
 pagination: true,//启用分页 
 escape: true,//过滤危险字符 
 queryParams: getParams,//携带参数 
 pageCount: 10,//每页行数 
 pageIndex: 0,//其实页 
 method: "get",//请求格式 
 //toolbar: "#toolBar", 
 onPageChange: function (number, size) { 
 currPageIndex = number; 
 currLimit = size 
 ess: 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; 
 }); 

var searchKey = $("#searchKey").val(); return { bysex: 1, limit: params.limit, offset: params.offset, search: searchKey };

TradHandler.ashx:

/// summary 
 /// 获取批量数据示例 
 /// /summary 
 /// param name="context" /param 
 private void getTradList(HttpContext context) 
 //用于序列化实体类的对象 
 JavaScriptSerializer jss = new JavaScriptSerializer(); 
 #region 模拟数据获取 
 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"]; //請求中攜帶的頁數和下標 int dataIndex = Convert.ToInt32(context.Request.Params["offset"]); int pageCount = Convert.ToInt32(context.Request.Params["limit"]); //查询满足条件的数据 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 //将结果增加一列序号列 Dictionary int, SimpleModel testModel = new Dictionary int, SimpleModel for (int i=0;i getList.Count;i++) testModel.Add(i + 1, getList[i]); //给分页实体赋值 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; //獲取對應頁的數據 model.rows = testModel.Where(t = t.Key dataIndex t.Key = dataIndex + pageCount).Select(t = t.Value).ToList(); //将查询结果返回 context.Response.Write(jss.Serialize(model));

有同学问pagemodel实体类,这里也分享一下,泛型实体类,因为该插件需要这些属性才能正常自动绑定

[Serializable] 
 public class TablePageModel T 
 /// summary 
 /// 總行數 
 /// /summary 
 public long total { get; set; } 
 /// summary 
 /// 总页数 
 /// /summary 
 public int page { get; set; } 
 private List T _rows; 
 /// summary 
 /// 數據源 
 /// /summary 
 public List T rows 
 get 
 if (_rows == null) 
 _rows = new List T 
 return _rows; 
 set 
 _rows = value; 

展示数据结果如下:

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

什么叫微信小程序_bootstrap Table插件使用

行业动态 2021-01-11
bootstrap Table软件应用demo 近期科学研究bootstrap,它仅出示视觉效果实际效果,针对数据信...
查看全文

小程序开发如何_js完成数组和对象的深浅

行业动态 2021-01-11
js完成数字能量数组和目标的浓淡复制 本文关键为大伙儿详尽详细介绍了js完成数字能量...
查看全文

广州凡科互联网科技股份有限公司招聘天

行业动态 2021-01-11
招聘人数:22职位信息任职资格职位名称:天猫店长 运营(康佳厨房电器类目)店铺信息:h...
查看全文
返回全部新闻


区域站点: 南丰县建站培训   南宫市建站程序   囊谦县凡科建站   南和县企业建站   南华县建站培训   南江县建站程序   南京市凡科建站   南靖县企业建站   南康市建站培训   南乐县建站程序   南陵县凡科建站   南宁市企业建站   南平市建站培训   南皮县建站程序   南市区凡科建站   南通市企业建站   南投县建站培训   南雄市建站程序   南溪县凡科建站   南阳市企业建站   南漳县建站培训   南召县建站程序   南郑县凡科建站   那坡县企业建站   那曲县建站培训   纳雍县建站程序   讷河市凡科建站   内黄县企业建站   内江市建站培训   内丘县建站程序   内乡县凡科建站   嫩江市企业建站   聂荣县建站培训   尼玛县建站程序   尼木县凡科建站   宁安市企业建站   宁波市建站培训   宁城县建站程序   宁德市凡科建站   宁都县企业建站   宁国市建站培训   宁海县建站程序   宁化县凡科建站   宁晋县企业建站   宁陵县建站培训   宁明县建站程序   宁南县凡科建站   宁强县企业建站   宁陕县建站培训   宁武县建站程序   宁乡市凡科建站   宁阳县企业建站   宁远县建站培训   农安县建站程序   磐安县凡科建站   盘锦市企业建站   盘山县建站培训   磐石市建站程序   盘州市凡科建站   蓬安县企业建站   澎湖县建站培训   蓬莱市建站程序   彭山县凡科建站   蓬溪县企业建站   彭阳县建站培训   彭泽县建站程序   彭州市凡科建站   偏关县企业建站   平安县建站培训   平昌县建站程序   平定县凡科建站   屏东县企业建站   平度市建站培训   平果县建站程序   平和县凡科建站   平湖市企业建站   平江县建站培训   平乐县建站程序   平凉市凡科建站   平利县企业建站   平罗县建站培训   平陆县建站程序   屏南县凡科建站   平泉市企业建站   屏山县建站培训   平顺县建站程序   平塘县凡科建站   平潭县企业建站   平武县建站培训   萍乡市建站程序   平乡县凡科建站   平阳县企业建站   平遥县建站培训   平阴县建站程序   平邑县凡科建站   平远县企业建站   平舆县建站培训   皮山县建站程序   普安县凡科建站   浦北县企业建站   浦城县建站培训   普洱市建站程序   普格县凡科建站   浦江县企业建站   普兰县建站培训   普宁市建站程序   莆田市凡科建站   迁安市企业建站   乾安县建站培训   潜江市建站程序   潜山市凡科建站  

友情链接: 医慧互通 创建网站教程 巴渝烤哥 美国免费建站平台 免费网页建站 免费自助建站 手机版

Copyright © 2002-2020 凡科建站_企业建站_建站培训_建站程序_自建网站 版权所有 (网站地图) 备案号:粤ICP备10235580号