bootstrap Table插件使用demo

最近研究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;
      }
    }
  }

展示数据结果如下:

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

(0)

相关推荐

  • bootstrap table表格插件使用详解

    bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, paginationLoop: false, classes: 'table tabl

  • BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

  • 使用contextMenu插件实现Bootstrap table弹出右键菜单

    如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中,其中"开发高效,设备兼容"的特点表现得非常明显.再加上它默认的美观的UI组件,简直就是很多前端的大爱啊!!! 今天在这里跟大家分享Bootstrap table弹出右键菜单的实现方法. 最近遇到有一个需求,需要在Bootstrap table上使用右键.网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstra

  • bootstrap table插件的分页与checkbox使用详解

    今天需要实现这样一个功能,有checkbox列表可供选择,要选择不分页之间的行并保存 最终实现的功能如图:(图片来自网上) 具体实现 首先,来看具体的代码,这里只截取实现功能所需代码 var selectionIds =[],selectionNames=[]; var curd = { init:function(){ this._getCheckParam(); }, /** * 初始化 * @private */ /** * 表格操作 */ //表格分页之前处理多选框数据 _respons

  • BootStrap中Table分页插件使用详解

    分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu

  • 使用bootstraptable插件实现表格记录的查询、分页、排序操作

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用.Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行.移动列位置等一些特殊的功能,插件可

  • 值得分享的轻量级Bootstrap Table表格插件

    基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头.单/复选.排序.分页.搜索及自定义表头等功能,更好的提高开发效率和减少开发时间. 1.插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框.复选框.排序.分页等,插件下载. 2.特点: 基于Bootstrap 3开发(同时支持 Bootstrap 2) 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用AJAX获取JS

  • ABP入门系列应用BootstrapTable表格插件

    ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ABP的官方网站 : http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate 1. 引言 之前的文章ABP入门系列之分页

  • bootstrap Table插件使用demo

    最近研究bootstrap,它仅提供视觉效果,对于数据列表之类的并未涉及,网上找了一下,找到一个Table插件. 名为bootstrapTable. 官方地址:http://bootstrap-table.wenzhixin.net.cn/examples/ github:https://github.com/wenzhixin/bootstrap-table 因为英文差,研究了半天,做了一个demo,将就看 HTML: <table class="table" id="

  • bootstrap table插件动态加载表头

    bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表加载的数据需求不同,所以需要动态的更换表头. 网上有很多加载表格数据的例子,但是却没有找到如何动态加载表格,再加在数据. 虽然可以一个表格加载一种数据,但是本着学习的态度尝试了下这种方式,结果发现是可以执行的.分享下思路和实现过程,以备日后使用. 思路: 1.写接口,查询出要展示的列.注意接口中必须要有字段中文名称(columns属性的title值),字段的英文名称(columns的field字段),特别注意filed

  • bootstrap table小案例

    Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头.单复选.排序.分页.搜索以及自定义表头等功能. 1.所需要的库:     bootstrap.min.css     bootstrap-table.css     jquery.min.js     bootstrap.min.js     bootstrap-table.js 2.Bootstrap Table获取数据的方式: Bootstrap Table通过data属性标

  • Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据的起止时间,查询一定时间范围的数据.在线编辑功能通过扩展Bootstrap Table实现,使用X-editable实现. Bootstrap Table有两种使用方式: 1.对普通的 table 设置 data 属性: 2.通过JavaScript 来启用 Bootstrap Table 插件.

  • Bootstrap Table从零开始

    本文博主将从零开始,一步一步的告诉大家如何在前端用bootstrap Table插件展示一个表格 首先,要下载bootstrap Table插件所必须的js,地址:https://github.com/wenzhixin/bootstrap-table 官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 本文项目地址:bootstraptable 本文需要注意点地方博主已用红笔圈起来 先展示效果图 接下来就开始使

  • 第一次记录Bootstrap table学习笔记(1)

    第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题. |引入CSS文件 <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> |引入相关库 我们需要引入Jquery库.bootstrap库.以及bootstrap-table.j

  • Bootstrap table 实现树形表格联动选中联动取消功能

    公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"

  • BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl

随机推荐