bootStrapTable之工具条插件

1 bootStrapTable插件使用时，最好配合工具条插件一起使用。使用的是toolbar工具条插件。


2 首先添加css和js
如：<link href="./js/test/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="./js/test/css/style.css" rel="stylesheet" type="text/css"/>


<script type="text/javascript" src="./js/test/js/jquery.toolbarlite.js"></script>  


3 在jsp页面添加工具条的使用标签。
如：<div class="table-toolbar" style="margin:10px">


</div>


4 通过js控制和显示工具条的（是body的onload方法）。
如：function onload(){


$(".table-toolbar").toolbarLite({
        items: [
            { link: true, display: "新建", css: "icon-plus", showIcon: true, url: "javascript:void(0)" ,
            click:function(){
alert("新建1");                
        }
            },
            { splitter: true }, 
            { link: true, display: "编辑", css: "icon-edit", showIcon: true, url: "javascript:void(0)",
            click:function(){
            var rows=$("#table").bootstrapTable("getSelections");//得到选中的列              
            if(rows.length>0){
if(rows.length>1){
alert("只能选择一列进行编辑");
}else{
alert(rows[0].project_id);
}
            }else{
alert("请选择要编辑的列");
                }    
            }
            },
            { splitter: true }, 
            { link: true, display: "删除", css: "icon-trash", showIcon: true, url: "javascript:void(0)", 
            click:function(){
        var rows=$("#table").bootstrapTable("getSelections");//得到选中的列              
        if(rows.length>0){
        var check_id="";
        for(var i=0;i<rows.length;i++){
if(i==0){
check_id=rows[i].project_id;
}else{
check_id=check_id+","+rows[i].project_id;
}
        }
alert(check_id);

        }else{
alert("请选择要删除的列");
            }    
        }
}
        ]
    });

}


说明：
使用方法：$(".table-toolbar").toolbarLite({。。。。});
多个按钮都放在items: [{}，{}]里。
每个按钮都有点击事件：click:function(){。。。}设置点击事件前，需要将url设置为"javascript:void(0)"


5 配合spring security3.1使用时，还需要将woff和ttf结尾的文件给设置为不拦截(因为不拦截这些，才能显示和控制按钮前的小图片。不然小图片会被拦截而显示不出来)。
如：springsecurity的配置文件中添加以下不拦截。
<http pattern="/**/*.woff" security="none" />
    <http pattern="/**/*.woff*" security="none" />
    <http pattern="/**/*.ttf" security="none" />
    <http pattern="/**/*.ttf*" security="none" />


web.xml中也一起添加：
<servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.woff</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.ttf</url-pattern>
    </servlet-mapping>


!!!至此，讲解了。配置bootStrapTable的工具条的引入css、js。然后在jsp页面中添加div标签。然后在js中添加和控制工具条。