这段时间主要在Bootstrap各个组件上进行学习,通过翻阅官方API(中文文档,英文我也看不懂啦)进行简单的Demo实操。当然,这期间我也寻找了一些组件基于Bootstrap的好用插件,今天给大家带来一个表格组件的插件Bootstrap Table的简单运用介绍,详细内容请点击这里进入官网查看(或者点击这里有中文文档)。
1.1.第一种办法当时是前往他的主页进行zip下载,或者前往gitHup下载源码引用。不过我觉得太麻烦,并不推荐这种方式。
2.2.第二种办法就是使用Grunt进行下载。官网有详细介绍,我也不啰嗦了。点击这里
现在我们便可以对table进行操作了。
前台页面只需要写一个table标签即可:
接下来展示一个我写的简单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 = ''+
'编辑';
var d = ''+
'查看';
return e+d;
}}]
});
bootstrapTable很像easyUI,掌握了他的规则上手还是很快的。我今天主要将将他的几个特别属性,还有表格增删改查的简单实现。
先看我写的一个小Demo,我对美确实很尴尬,样式不是很好看,大家看下功能就行:
udefinedText:主要作用用于当后台取的一行数据,某一个字段没值时,显示你预设定的值,具体用法——udefinedText:'空';
search:当设为true,它会智能的显示一个搜索框,但是该搜索框是面向所有字段搜索,并不针对某个字段搜索。
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');
});
}
点击确认后,添加数据,当然正常交互应该通过Ajax传数据到后台,但今天我们只谈数据静态插入通过:
$("#table").bootstrapTable('prepend',row);
row是一个对象。这样就能进行数据新增。
先贴代码
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});
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存储表格行数。
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提供一点点小帮助。