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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
javascript json2 使用方法
Mar 16 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
js中for in的用法示例解析
Dec 25 Javascript
jquery操作angularjs对象
Jun 26 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
JS实现音量控制拖动
Jan 15 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
Laravel 5 学习笔记
2015/03/06 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
架构师岗位职责
2013/11/18 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
迟到早退检讨书
2014/02/10 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
重阳节座谈会主持词
2015/07/03 职场文书