bootstrap Table插件使用demo


Posted in Javascript onAugust 07, 2017

最近研究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?request=getTradList", 
        sortName: "rkey",//排序列 
        striped: true,//?l?行 
        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"]; 
 
      //?求中?y?У捻??岛拖? 
      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插件使用demo 

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

Javascript 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 #Javascript
React进阶学习之组件的解耦之道
Aug 07 #Javascript
详解前端路由实现与react-router使用姿势
Aug 07 #Javascript
React中使用collections时key的重要性详解
Aug 07 #Javascript
react路由配置方式详解
Aug 07 #Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 #Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 #Javascript
You might like
ThinkPHP之M方法实例详解
2014/06/20 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
原生js 实现表单验证功能
2021/02/08 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python的re模块正则表达式操作
2016/05/25 Python
python manage.py runserver流程解析
2019/11/08 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python matlab库简单用法讲解
2020/12/31 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
公务员职务工作的自我评价
2013/11/01 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
《乡愁》教学反思
2014/02/18 职场文书
中班幼儿评语大全
2014/04/30 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
校长新学期寄语2016
2015/12/04 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电