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

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

一.BootstrapTable下载

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

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

二.BootstrapTable引用

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

引入效果如下：

	<link rel="stylesheet" type="text/css" href="../../node_modules/bootstrap/dist/css/bootstrap-table.min.css"/>
	<script src="../../node_modules/bootstrap/js/bootstrap-table.min.js"></script>
	<script src="../../node_modules/bootstrap/js/bootstrap-table-zh-CN.js"></script>

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

三.BootStrapTable简单运用

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

<table id="table" class="table"></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，我对美确实很尴尬，样式不是很好看，大家看下功能就行：

3.1.undefinedText与search

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

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

3.2.新增实现

先贴代码：

function add(){
	noReadonly_tanchu();
	$("#title").html("新增");
	$("#modal_body_del").hide();
	$("#modal_body").show();
	$('#myModal').modal({
		keyboard: true
	});
	
	$("#sure").on('click',function(){
		var row = {
		name:$("#name").val(),
		biao:$("#biao").val(),
		content:$("#content").val()
		}
	$("#table").bootstrapTable('prepend',row);
	$('#myModal').modal('hide');
	});
}

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

点击新增，弹出模态框：

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

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

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

3.3.删除实现

先贴代码

function del(){
	var rows = $("#table").bootstrapTable('getSelections');
	console.log(rows);
	if(rows.length == 0){
		alert("请选择！")
	}else{
		$("#title").html("删除");
		$("#modal_body").hide();
		$("#modal_body_del").show();
		
		$('#myModal').modal({
			keyboard: true
		});
		
		var rowsult = [];
		
		for(var i in rows){
			rowsult.push(rows[i].biao);
		}
		
		$("#sure").on('click',function(){
		$("#table").bootstrapTable('remove', {field: 'biao', values: rowsult});
		$('#myModal').modal('hide');
		});
	}
	
}

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

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

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

3.4.修改实现

function edit(index){
	var row = $("#table").bootstrapTable('getOptions').data[index];

	$("#modal_body_del").hide();
	$("#modal_body").show();
	$('#myModal').modal({
		keyboard: true
	});
	noReadonly_tanchu();
	$("#title").html("编辑");
	$("#name").val(row.name);
	$("#biao").val(row.biao);
	$("#content").val(row.content);
	$("#index").html(index);
	
	$("#sure").on('click',function(){
		var row = {
		name:$("#name").val(),
		biao:$("#biao").val(),
		content:$("#content").val()
		}
	$("#table").bootstrapTable('updateRow', {index: $("#index").html(), row: row});
	$('#myModal').modal('hide');
	});
}

通过：

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

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

3.5.查看实现

function view(index){
	var row = $("#table").bootstrapTable('getOptions').data[index];


	$("#modal_body_del").hide();
	$("#modal_body").show();
	$("#title").html("查看");
	$('#myModal').modal({
		keyboard: true
	});
	
	$("#name").val(row.name);
	$("#biao").val(row.biao);
	$("#content").val(row.content);
	readonly_tanchu();
	
	$("#sure").on('click',function(){
		$('#myModal').modal('hide');
	});
}

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

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

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