最近研究bootstrap,它仅提供视觉效果,对于数据列表之类的并未涉及,网上找了一下,找到一个Table插件。
名为bootstrapTable。
官方地址:http://bootstrap-table.wenzhixin.net.cn/examples/
github:https://github.com/wenzhixin/bootstrap-table
因为英文差,研究了半天,做了一个demo,将就看
HTML:
<table class="table" id="dataShow" > <thead> <tr> <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", 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 }, 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; }); }); //默认加载时携带参数 function getParams(params) { 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; } } }
展示数据结果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 齐豫.2003-THE.UNHEARD.OF.CHYI.3CD【苏活音乐】【WAV+CUE】
- 黄乙玲1986-讲什么山盟海誓[日本东芝版][WAV+CUE]
- 曾庆瑜1991-柔情陷阱[台湾派森东芝版][WAV+CUE]
- 陈建江《享受男声》DTS-ES6.1【WAV】
- 群星《闪光的夏天 第5期》[FLAC/分轨][392.38MB]
- 徐小凤《三洋母带》1:1母盘直刻[WAV+CUE][981M]
- 王菲1995《菲靡靡之音》[香港首版][WAV+CUE][1G]
- 《双城之战》主题小游戏现已上线 扮演金克丝探索秘密基地
- 《霍格沃茨之遗》PS5Pro画面对比:光追性能显著提升
- 《怪猎荒野》PS5Pro主机版对比:B测性能都不稳定
- 黄宝欣.1992-黄宝欣金装精选2CD【HOMERUN】【WAV+CUE】
- 群星.1996-宝丽金流行爆弹精丫宝丽金】【WAV+CUE】
- 杜德伟.2005-独领风骚新歌精选辑3CD【滚石】【WAV+CUE】
- 安与骑兵《心无疆界》[低速原抓WAV+CUE]
- 柏菲唱片-群星〈胭花四乐〉2CD[原抓WAV+CUE]