Bootstrap table表格初始化表格数据的方法


Posted in Javascript onJuly 25, 2018

一、项目说明

①此项目是ASP.NET项目,开发语言是C#

②bootstrap-table使用需要下载对应的css和js插件

③具体详情还需查看api文档

二、前端代码

<div class="table-responsive">
     <table id="table" class="text-nowrap"> </table>
  </div>

【说明】 ①text-nowrap设置表格超出不换行而显示滚动条,避免表格列过多

 

②table-responsive:有table-responsive,表格有滚动条没有table-responsive,网页有滚动条

$('#table').bootstrapTable({
        url: '/B_Product/GetProductData',     //请求后台的URL(*)
        method: 'get',           //请求方式(*)
        toolbar: '#toolbar',        //工具按钮用哪个容器
        striped: true,           //是否显示行间隔色
        cache: false,            //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        pagination: true,          //是否显示分页(*)
        sortable: false,           //是否启用排序
        sortOrder: "asc",          //排序方式
        queryParams: function (pageRequest) {
          return pageRequest;
        },//
        //传递参数(*)
        sidePagination: "server",      //分页方式:client客户端分页,server服务端分页(*)
        pageNumber: 1,            //初始化加载第一页,默认第一页
        pageSize: 10,            //每页的记录行数(*)
        pageList: [10, 25, 50, 100],    //可供选择的每页的行数(*)
        search: true,            //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
        strictSearch: true,
        showColumns: true,         //是否显示所有的列
        showRefresh: true,         //是否显示刷新按钮
        minimumCountColumns: 2,       //最少允许的列数
        clickToSelect: true,        //是否启用点击选中行
        height: tableHeight(),            //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
        uniqueId: "Id",           //每一行的唯一标识,一般为主键列
        showToggle: false,          //是否显示详细视图和列表视图的切换按钮
        cardView: false,          //是否显示详细视图
        detailView: false,          //是否显示父子表
        showExport: true, //是否显示导出按钮
        buttonsAlign: "right", //按钮位置
        exportTypes: ['excel'], //导出文件类型
        Icons: 'glyphicon-export',
        columns: [{
          checkbox: true
        }, {
            field: 'ID',
            title: '编号',
            visible: false
        }, {
          field: 'PRODUCTID',
          title: '产品编号'
        }, {
          field: 'PRODUCTNAME',
            title: '产品名称'
          }, {
          field: 'PRODUCTUSER',
          title: '货主名称'
        }, {
          field: 'PRICE',
          title: '单价(元)'        }, {
          field: 'BARCODERULE',
          title: '条码规则'                
          }, {
            field: 'ISUSING',
            title: '启用状态',
            formatter: function (value, row, index) {
              if (value == "启用")
                return '<span class="glyphicon glyphicon-ok label label-success" style="font-size:90%"> 启用</span>';
              else
                return '<span class="glyphicon glyphicon-remove label label-danger" style="font-size:90%"> 不启用</span>';
            }

          }, {
            field: 'REMARK1',
            title: '备注'
          }, 
        ]
      });

【说明】以上是表格初始化方法

①请求网址返回的数据是json数组

②传递的默认参数有页数和页的大小,如果在服务端分页,分页方式为:server

③表格随动(随着页面大小的改变,表格的大小随之改变)

 

这里写了一个tableHeight()方法获取屏幕的高度,同时利用Windows的resize方法重新传递参数,刷新表格

function tableHeight() {
   var h = $(window).height();
   return h-25;
}

【重新设置表格属性值并刷新】

$(window).resize(function () {
         $("#table").bootstrapTable('resetView', {
          height: tableHeight()
        });
      });
$("#table").bootstrapTable("refresh");//表格刷新数据

④为表格设置checkbox

在columns:中设置第一列 checkbox: true,将会用全选功能

  field: 'ID',       此名称需和json对应的key值相同才会显示对应的value值
                        title: '编号',       title是列名,显示的名称
                        visible: false     表示初始为不可见,可通过表格右上方的按钮设置列的显示和不显示

⑤在表格中设置样式

      表格中显示按钮等不同状态的

 formatter: function (value, row, index) {
              if (value == "启用")
                return '<span class="glyphicon glyphicon-ok label label-success" > 启用</span>';
              else
                return '<span class="glyphicon glyphicon-remove label label-danger" > 不启用</span>';
            }

返回的参数有三个,value代表当前值,row表示当前行,index当前行数

总结

以上所述是小编给大家介绍的Bootstrap table表格初始化表格数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
如何编写jquery插件
Mar 29 jQuery
微信小程序中input标签详解及简单实例
May 18 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 #Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 #Javascript
vue实现底部菜单功能
Jul 24 #Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 #Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 #Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 #Javascript
JavaScript引用类型Array实例分析
Jul 24 #Javascript
You might like
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
彻底理解Python list切片原理
2017/10/27 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python中常用的os操作汇总
2020/11/05 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
毕业生的自我评价
2013/12/30 职场文书
售后求职信范文
2014/03/15 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
入股协议书范本
2014/04/14 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python