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 相关文章推荐
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
js实现表格数据搜索
Aug 09 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python中pip的安装与使用教程
2018/08/10 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
外贸英语专业求职信范文
2013/12/25 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
团队口号大全
2014/06/06 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
售房协议书范本2014
2014/10/23 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python