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 相关文章推荐
图片onload事件触发问题解决方法
Jul 31 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
使用React代码动态生成栅格布局的方法
May 24 Javascript
编写v-for循环的技巧汇总
Dec 01 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读取MySQL数据代码
2008/06/05 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
如何用python整理附件
2018/05/13 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python批量处理文件或文件夹
2020/07/28 Python
python的faker库用法
2019/11/28 Python
Django配置文件代码说明
2019/12/04 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
什么是TCP/IP
2014/07/27 面试题
骨干教师培训方案
2014/05/06 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
《全神贯注》教学反思
2016/02/22 职场文书