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 (二) 万能的选择器
Oct 01 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
javascript编写简易计算器
May 06 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
微信小程序如何使用云开发
May 17 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
js+css3实现炫酷时钟
Aug 18 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 中文字符串首字母的获取函数分享
2013/11/04 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
js实现聊天对话框
2020/02/08 Javascript
python抓取网页内容示例分享
2014/02/24 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
浅析Python中字符串的intern机制
2020/10/03 Python
销售口号大全
2014/06/11 职场文书
个人安全生产责任书
2014/07/28 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
员工安全责任协议书
2016/03/22 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript