封装js工具类，快速生成bootstrap table

最新推荐文章于 2024-04-22 12:31:21 发布

Kafka不卡

最新推荐文章于 2024-04-22 12:31:21 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_25302451/article/details/81115571

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

bootstrap table插件生成的表格，样式功能什么的都挺强大的，所以自己在使用过后，觉得用这样子的插件制作表格十分的快速便捷，就把自己的经验分享出来了。

首先先放一张最后的效果图

<!-- Bootstrap 3.3.2 -->
<link href="${baseUrl}plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="${baseUrl}plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<!-- bootstrap-datatables -->
<script src="${baseUrl}plugins/bootstrap-datatables/bootstrap-table.js" type="text/javascript"></script>
<link href="${baseUrl}plugins/bootstrap-datatables/bootstrap-table.css" rel="stylesheet" type="text/css" />
<script src="${baseUrl}plugins/bootstrap-datatables/bootstrap-table-zh-CN.js" type="text/javascript"></script>

<script src="${baseUrl}js/common/dataTable.js" type="text/javascript"></script>

首先先引入这bootstrap相关的css文件和js文件，然后在写一个空的table标签，就可以开始写js文件了

<body>
<div class="tb-div">
	<table id="tb_departments" data-click-to-select="true">
	</table>
</div>
<script type="text/javascript">
    $(function () {
        //1.初始化Table
	    var oTable = new TableInit();
        //表格数据地址
        var url='${pageContext.request.contextPath}/configs/query.do'
	    //请求方式
        var method='get'
        //表格唯一主键
	    var uniqueId="userId"
        
        var column=[{
            checkbox: true
        }, {
            field: 'userId',
            title: 'uid',
            align: 'center'
        }, {
            field: 'name',
            title: '管理员名称',
            align: 'center'
        }, {
            field: 'modifyTime',
            title: '修改时间',
            align: 'center'
        }, {
            field: 'createTime',
            title: '添加时间',
            align: 'center'
        },{
        	field: 'operate',
        	title: '操作',
        	align: 'center',
        	events: operateEvents,
        	formatter: operateFormatter
        	}]
    
          //调用方法,初始化表格
	    oTable.Init(url,method,column,uniqueId,20);

    })

     //生成删除按钮的方法
     function operateFormatter(value, row, index) {
		return [
		'<a class="remove" href="javascript:void(0)" title="Remove">',
		'<i class="glyphicon glyphicon-remove"></i>',
		'</a>'
		 ].join('');
		}
	
     //删除按钮的点击事件
	 window.operateEvents = {
		   'click .remove': function (e, value, row, index) {
				
			}
	 }
</script>
</body>

这样子，一个表格页面就写好了，剩下的就会自动生成了，当然后台返回的数据格式是json，并且带有total（数量）和 rows（数据数组），才能正常显示。

最后最关键的datatable.js我已经上传到码云，有需要的同学可以自行下载，一定要引入这个js

地址：https://gitee.com/caibingyan/bootstrapTable.git

Kafka不卡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
封装js工具类，快速生成bootstrap table

bootstrap table插件生成的表格，样式功能什么的都挺强大的，所以自己在使用过后，觉得用这样子的插件制作表格十分的快速便捷，就把自己的经验分享出来了。首先先放一张最后的效果图&lt;!-- Bootstrap 3.3.2 --&gt;&lt;link href="${baseUrl}plugins/bootstrap/css/bootstrap.min.css" rel=...
复制链接

扫一扫