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 相关文章推荐
js下用层来实现select的title提示属性
Feb 23 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
使用js画图之画切线
Jan 12 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 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
国外十大最流行的PHP框架排名
2013/07/04 PHP
smarty自定义函数用法示例
2016/05/20 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
jQuery 选择器理解
2010/03/16 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
jQuery事件用法详解
2016/10/06 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python购物车程序简单代码
2018/04/18 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python分布式编程实现过程解析
2019/11/08 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
教师自我评价范例
2013/09/24 职场文书
应届生会计电算化求职信
2013/10/03 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
四风自我剖析材料
2014/09/30 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript