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 注意事项 与原因分析
Apr 24 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
JS判断数组那点事
Oct 10 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
JS实现滑动导航效果
Jan 14 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开发模式(简写版)
2007/03/15 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php 启动报错如何解决
2014/01/17 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
django缓存配置的几种方法详解
2018/07/16 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
物业工作计划书
2014/01/10 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书