动态加载bootstrap表格数据
2016-11-29 本文已影响641人
AdrianRD
表格效果如下
表格效果
完整demo下载
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - Bootstrap Table</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--<link rel="shortcut icon" href="favicon.ico">-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-table.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body>
<!-- 响应式表格 -->
<div id="kechengguanli" style="width: 80%; margin: 20px;"></div>
<!-- 全局js -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap table -->
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-mobile.min.js"></script>
<script src="js/table-bs.js"></script>
</body>
</html>
js
//普通bootstrap表格
function Table_bs($box){
var _init_bit = false;
var _box = $box;
this.init = function(){
_box.addClass('table-responsive');
var html = '';
html += '<table class="table table-bordered " style="text-align: center; ">';
html += '<thead style="font-weight: bold;">';
// html += '<tr>';
// html += '</tr>';
html += '</thead>';
html += '<tbody>';
// html += '<tr>';
// html += '</tr>';
html += '</tbody>';
html += '</table>';
_box.append($(html));
_init_bit = true;
}
this.load = function(option){
if(!_init_bit){
this.init();
}
// 表头
var thead = option.colNames;
var html_thead = '';
html_thead += '<tr>';
for(var i=0;i<thead.length;i++){
html_thead += '<td>' + thead[i] + '</td>';
}
html_thead += '</tr>';
_box.find('thead').append($(html_thead));
// 表身
var tbody = option.data;
var html_tbody = '';
for(var j1=0;j1<tbody.length;j1++){
var buff = tbody[j1];
html_tbody += '<tr>';
for(var j2=0;j2<buff.length;j2++){
html_tbody += '<td>' + buff[j2] + '</td>';
}
html_tbody += '</tr>';
}
_box.find('tbody').append($(html_tbody));
}
}
var option = {
colNames: ['选择', '课程ID', '课程名称', '类型', '排序值', '状态', '是否免费', '操作', '课件试听'],
data:[
['<input type="checkbox">','168','强化数学1下','纯视频（16:9）','50','在线2016-07-05','收费','<div class="btn-group btn-group-xs"><button type="button" class="btn btn-info" data-event="edit"><span class="glyphicon glyphicon-edit"></span></button></div>','<a href="#" data-event="add_child">学员听课</a>/<a href="#" data-event="add_child">管理员听课</a>'],
['<input type="checkbox">','169','强化数学1下','纯视频（16:9）','50','在线2016-07-05','收费','<div class="btn-group btn-group-xs"><button type="button" class="btn btn-info" data-event="edit"><span class="glyphicon glyphicon-edit"></span></button></div>','<a href="#" data-event="add_child">学员听课</a>/<a href="#" data-event="add_child">管理员听课</a>'],
]
}
$(function(){
var t = new Table_bs($('#kechengguanli'));
t.load(option);
});
