有没有Bootstrap3.3 动态添加和关闭 tab的方案

 /**

  * 增加标签页

  */

 function addTab(options) {

     //option:

     //tabMainName:tab标签页所在的容器

     //tabName:当前tab的名称

     //tabTitle:当前tab的标题

     //tabUrl:当前tab所指向的URL地址

     var exists = checkTabIsExists(options.tabMainName, options.tabName)

     if(exists){

         $("#tab_a_"+options.tabName).click()

     } else {

         $("#"+options.tabMainName).append('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this)">×</button>'+options.tabTitle+'</a></li>')

         

         //固定TAB中IFRAME高度

         mainHeight = $(document.body).height() - 5

         

         var content = ''

         if(options.content){

             content = option.content

         } else {

             content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'

         }

         $("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>')

         $("#tab_a_"+options.tabName).click()

     }

 }

 

 

 /**

  * 关闭标签页

  * @param button

  */

 function closeTab (button) {

     

     //通过该button找到对应li标签的id

     var li_id = $(button).parent().parent().attr('id')

     var id = li_id.replace("tab_li_","")

     

     //如果关闭的是当前激活的TAB，激活他的前一个TAB

     if ($("li.active").attr('id') == li_id) {

         $("li.active").prev().find("a").click()

     }

     

     //关闭TAB

     $("#" + li_id).remove()

     $("#tab_content_" + id).remove()

 }

 

 /**

  * 判断是否存在指定的标签页

  * @param tabMainName

  * @param tabName

  * @returns {Boolean}

  */

 function checkTabIsExists(tabMainName, tabName){

     var tab = $("#"+tabMainName+" > #tab_li_"+tabName)

     //console.log(tab.length)

     return tab.length > 0

 }

1、放置一个Table控件：<table id="table" ></table>。

2、调用javascript的代码：<script >$('#table').bootstrapTable({ url: 'tablejson.jsp'。

3、数据绑定，后台的数据从jsp代码：

search:true, uniqueId:"Id", pageSize:"5", pageNumber:"1", sidePagination:"client", pagination:true, height:'400', columns: [ { field: 'Id', title: '中文' }, { field: 'Name', title: 'Name' } , { field: 'Desc', title: 'Desc' } ], })。

4、下列的js代码增加一个特殊列：

{ field: '#', title: 'control',formatter:function(value,row,index){ var del='<a href="Delete!delete.action?Id='+row.Id+'">删除</a>'var updt='<a href="supdate.jsp?Id='+row.Id+'">修改</a>'var add='<a href="Include.jsp?Id='+row.Id+'">增加</a>' return del+" "+updt+"&nbsp"+add} }

5、s的代码修改为：<script >$('#table').bootstrapTable({ url: 'tablejson.jsp', //。

6、数据绑定，后台的数据从jsp代码：

search:true, uniqueId:"Id", pageSize:"5", pageNumber:"1", sidePagination:"client", pagination:true, height:'400', columns: [ { field: 'Id', title: '中文' }, { field: 'Name', title: 'Name' } , { field: 'Desc', title: 'Desc' } , { field: '#', title: 'control',formatter:function(value,row,index){ var del='<a href="Delete!delete.action?Id='+row.Id+'">删除</a>'var updt='<a href="supdate.jsp?Id='+row.Id+'">修改</a>'var add='<a href="Include.jsp?Id='+row.Id+'">增加</a>' return del+" "+updt+"&nbsp"+add} } ], })。

7、列的排序，排序主要是在列中增加了一个属性：

{ field: 'Name', title: 'Name',sortable:true }。

怎么学习Bootstrap中的表格：

1、通过表格的方式展示页面. 首先有必要样式.table. 和一些选用样式. 举例说明必要样式. 首先要搭建一个基础框架，在搭建的基础框架里面的body部分填写table信息. 然后在table的标签上加上基础样式.table的css样式。

2、除了必要的.table之外， 还有很多可选的class。不同的可选class. 是可以联合使用的。常用的就有边框的table。只需要使用.table-bordered 查看效果图。

3、斑马线， 也就是隔行相同颜色的一个样式。 使用.table-striped样式。

斑马线是对tbody中的行起作用。

斑马线的实现方式是通过：nth-child CSS选择器实现的。

4、鼠标悬停在行上，改变行的背景颜色。使用.table-hover样式。

5、bootstrap中有这样的几个样式，可以说是提醒样式。 每个样式都是一种提醒方式，这些方式也可以放到table中， 只需要使用class即可。

---