关于bootstrap-table的初次使用，和遇到的问题记录（自己看的）

1.新的工作接触到了bootstrap-table，用于后台管理系统的开发，项目用到的东西比较多，前端接触的主要是thymeleaf模板和bootstrap-table加上lay-ui；

2.bootstrap-table主要遇到的问题：项目通过二次封装使用这个插件，一开始是有点摸不着头脑，因为没有文档，只能看着bt的文档对照着写。接下来说一说这几天遇到的问题，还有怎么解决的；

　　2-1：表格初始化数据的问题。页面是用layuiAdmin的iframe版，bt数据通过url请求回来，设置各个表头的数据，然后在初始化。

　　2-2：需要在表格的操作列绑定事件，看代码；主要是怎么传多个参数的问题，然后发现这样才行；（主要是\‘’ ‘\’ 这个写法，其他和单个是一样的）

{
                title: '操作',
                align: "center",
                formatter: function(value, row, index) {
                    var actions = [];
                    actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="checkSingle(\'' + row.waybillId + '\',\''+row.unloadCost+'\',\''+row.transportCost + '\')"><i class="fa fa-edit"></i>支付运费</a> ')；
                    return actions.join('');
                }

　　2-3:bt这个表格数据是后端传过来的，所以很多操作都是ajax请求，比如删除，编辑。框架也有二次封装；我遇到的问题就是前端来操作移除，因为这个界面不需要传表格数个数据给后端，而且还要统计表格的数据。解决办法其实也简单，就是要获取url请求回来的所有数据就可以操作了；看代码

//这个是框架封装了首次加载页面会体骄傲一个form表单，所以页面所需的数据是从上个页面传回来的ids数组参数请求回来的
        <form id="menu-form" >
            <input type="hidden" name="ids" id="ids" value=""/>
        </form>        

<script th:inline="javascript">
    var ids =[[${ids}]];
    $('#ids').val(ids);    //页面请求回来的ids数组，赋值给input的value值
</script>
//该选项是bt的自带选项，当表格数据加载完成时就会触发的
onLoadSuccess:function(data){    
               console.log(data);//这个就是表格全部的数据 
    
                //这里你可以写js逻辑了

            },
//然后就是操作的按钮事件了
  //移除按钮
    function remove(id){
        $.modal.confirm('确定删除该条信息吗？',function () {
            ids.splice($.inArray(id,ids),1);
            $('#ids').val(ids);
            $.btTable.bootstrapTable('refresh');//每次移除都会刷新表格，传新的ids重新请求数据
        })
    };

　　2-4:续上一个问题，上个问题是单个移除的，其实批量移除也是一样的，bt或者勾选的数据rows:

　　var rows = $.btTable.bootstrapTable('getSelections');

To be continue...

来源：oschina

链接：https://my.oschina.net/u/4414234/blog/3352120

标签

javascript

Bootstrap Table

layui-admin

thymeleaf