Bootstrap学习笔记2——BoostrapTable下载与简单运用

落日映苍穹つ 2022-06-12 08:25 349阅读 0赞

这段时间主要在Bootstrap各个组件上进行学习，通过翻阅官方API(中文文档，英文我也看不懂啦![哭][cry.gif])进行简单的Demo实操。当然，这期间我也寻找了一些组件基于Bootstrap的好用插件,今天给大家带来一个表格组件的插件Bootstrap Table的简单运用介绍，详细内容请点击[这里][Link 1]进入官网查看(或者点击[这里][Link 2]有中文文档)。

## 一.BootstrapTable下载 ##

1.1.第一种办法当时是前往他的主页进行zip下载，或者前往gitHup下载源码引用。不过我觉得太麻烦，并不推荐这种方式。

2.2.第二种办法就是使用Grunt进行下载。官网有详细介绍，我也不啰嗦了。[点击这里][Link 3]

## 二.BootstrapTable引用 ##

这里注意了，很多同学误以为min.js与.js都是页面必须引来的内容，实际上这是一种误解。min.js与.js的区别主要在于： [min][] 是.js的压缩版，主要是生产环境中使用，而.js是方便用户阅读。 所以在页面中我们只需要对min.js引入便可。

引入效果如下：

现在我们便可以对table进行操作了。

## 三.BootStrapTable简单运用 ##

前台页面只需要写一个table标签即可：

具体table的操作，BootstrapTable交给了js来实现。通过向后台获取数据动态生成动态表格。

接下来展示一个我写的简单js代码：

$('#table').bootstrapTable({
    	url: '../../json/table.json',
    	method: 'get',
    	dataType: "json",
    	dataField: "data",
    	classes:'table',//边框
    	undefinedText:'',//当数据为 undefined 时显示的字符
    	pagination:true,//启动分页
    	paginationLoop:true,
    	pageNumber: 1,
    	pageSize:5,
    	pageList:[ 1, 5, 10, 20 ],
    	striped: true,
        showColumns: true,  //显示下拉框勾选要显示的列
        showRefresh: true,  //显示刷新按钮
        showToggle:true,//显示一行是否改成竖着
        showPaginationSwitch:true,//是否显示 下面的分页框
        search: true, //显示搜索框
        detailView:true,
        toolbal:'#toolbar',
        detailFormatter:function(index, row){
        	return JSON.stringify(row);
        },
        columns: [{
            field: 'checkbox',
            title: 'checkbox',
            checkbox:true
        }, {
            field: 'number',
            title: '序号',
            formatter: function(value,row,index){
            	return index+1;
            }
        }, {
            field: 'name',
            title: '名称',
            align: 'center'
        }, {
            field: 'biao',
            title: '标签',
            align: 'center'
        }, {
            field: 'content',
            title: '简介'
        },{
            title: '操作',
            field: 'caozuo',
            align: 'center',
            formatter:function(value,row,index){  
                var e = '<a  style="display: block;" class="btn btn-warning btn-xs" οnclick="edit(\''+ index + '\')">'+
                 '<i class="glyphicon glyphicon-pencil"></i>编辑</a>';
                var d = '<a  style="display: block;margin-top:5px;" class="btn btn-info btn-xs" οnclick="view(\''+ index + '\')">'+
                 '<i class="glyphicon glyphicon-list-alt"></i>查看</a>';  
                return e+d;  
            }}]	
    });

其实表格的具体API都在文档中，这个API文档真的很贴心，建议大家可以读读。

bootstrapTable很像easyUI，掌握了他的规则上手还是很快的。我今天主要将将他的几个特别属性，还有表格增删改查的简单实现。

先看我写的一个小Demo，我对美确实很尴尬，样式不是很好看，大家看下功能就行：

![Center][]

### 3.1.undefinedText与search ###

udefinedText:主要作用用于当后台取的一行数据，某一个字段没值时，显示你预设定的值，具体用法——udefinedText：'空'；

search：当设为true，它会智能的显示一个搜索框，但是该搜索框是面向所有字段搜索，并不针对某个字段搜索。

### 3.2.新增实现 ###

先贴代码：

这里介绍一个modal弹出框，属于Bootstrap的一个简单js插件，这里我先不做详细介绍，大家想看可以点击[这里][Link 4]学习。

点击新增，弹出模态框：

![Center 1][]

点击确认后，添加数据，当然正常交互应该通过Ajax传数据到后台，但今天我们只谈数据静态插入通过：

$("#table").bootstrapTable('prepend',row);

row是一个对象。这样就能进行数据新增。

### 3.3.删除实现 ###

先贴代码

图片我就不贴了，大家只要知道删除是通过这句：

$("#table").bootstrapTable('remove', {field: 'biao', values: rowsult});

###  field是主键值，values是一个主键数组。    ###

### 3.4.修改实现 ###

通过：

$("#table").bootstrapTable('updateRow', {index: $("#index").html(), row: row});

通过修改row进行修改内容，index存储表格行数。

### 3.5.查看实现 ###

这个主要对模态框进行操作了。

readonly\_tanchu（）这个函数方法主要是模态框样式的只读属性修改。

希望大家有批评什么建议可以评论我，希望能够对大家认识Bootstrap提供一点点小帮助。

[cry.gif]: http://static.blog.csdn.net/xheditor/xheditor_emot/default/cry.gif
[Link 1]: http://bootstrap-table.wenzhixin.net.cn/
[Link 2]: /images/20220612/513fa5fc10114a4a81a10a3bb9de7194.png
[Link 3]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/#编译-css-和-javascript-安装-grunt
[min]: https://www.baidu.com/s?wd=min&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBnynvnyc4mHbsmWckujKB0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6krHR1n10vnjmkrjmvnW0zr0
[Center]: /images/20220612/e1d91d991f974f35afd4af40b8a09951.png
[Link 4]: http://v3.bootcss.com/javascript/#modals
[Center 1]: /images/20220612/c8f02b7df54d43fba37e25a762145b62.png