bootstrap Table插件使用demo

所属分类: 网络编程 / JavaScript 阅读数: 1133
收藏 0 赞 0 分享

最近研究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,//條紋行 
        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; 
      } 
    } 
  } 

展示数据结果如下:

 

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

更多精彩内容其他人还在看

jQuery 行级解析读取XML文件(附源码)

项目中应用jQuery解析读取XML语言配置文件来实现语言的调度。这是jQuery解析读取XML文件功能的测试源码,现拿出来分享。
收藏 0 赞 0 分享

JS 文件本身编码转换 图文教程

JS编码转换,这句话本身就是一句具有二重义的话。通常理解为JS文件里能转换编码的代码,但是,我所碰到的问题并不是这样的,是要解决JS文件本身的编码问题,它是UTF-8编码的还是ANSI编码的?
收藏 0 赞 0 分享

jQuery Ajax之$.get()方法和$.post()方法

load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现Ajax的全部价值。在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是后面要讲解到的$.ajax方法)。
收藏 0 赞 0 分享

jQuery Ajax之load()方法

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是laod()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。
收藏 0 赞 0 分享

JavaScript 核心参考教程 内置对象

JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。
收藏 0 赞 0 分享

JavaScript 核心参考教程 RegExp对象

JavaScript 核心参考教程RegExp对象,学习正则表达式的朋友可以参考下。
收藏 0 赞 0 分享

javascript hashtable实现代码

javascript中没有像c#,java那样的哈希表(hashtable), 然而,javascript中的Array也只有一些类似于'哈希表'的非常简单功能。
收藏 0 赞 0 分享

百度留言本js 大家可以参考下

百度留言本js 大家可以参考下。
收藏 0 赞 0 分享

javascript 判断某年某月有多少天的实现代码 推荐

以前写网页的时候,经常碰到选择日期的问题,其实就是判断某年某月有多少天。
收藏 0 赞 0 分享

让iframe子窗体取父窗体地址栏参数(querystring)

突然用到,记录一下,对地址栏字符串用正则处理最好,有时间研究一下。 主要是思路。
收藏 0 赞 0 分享
查看更多