bootstraptablejs

① Bootstrap有沒有好用的jQuery表格插件

bootstrap表格插件推薦datatables。
Datatables是一款jquery表格插件。它是一個高度靈活的內工具，可以將任何HTML表格添加高級的交互功容能。
分頁，即時搜索和排序
幾乎支持任何數據源：DOM， javascript， Ajax 和 伺服器處理
支持不同主題 DataTables, jQuery UI, Bootstrap, Foundation
各式各樣的擴展: Editor, TableTools, FixedColumns ……
豐富多樣的option和強大的API
支持國際化
超過2900+個單元測試
免費開源

② bootstrapTable插件：行內編輯，凍結列，導出，匯總行，列篩選

行內編輯插件通過x-editable實現，下載地址位於github.com/vitalets/x-e...。在表格中對需要編輯的列添加a標簽，並進行x-editable的初始化。編輯功能直觀展示如下。

凍結列插件同樣需要引用x-editable的相關文件。其效果呈現如下。

導出插件使用tableExport，下載地址為hhurz/tableExport.jquery.plugin。導出功能展示如下。

匯總行功能無需額外插件。在初始化表格時，顯示頁腳並使用footerFormatter自定義每列的頁腳格式。匯總行效果如下。

列篩選功能通過引入列篩選插件實現，下載相關文件後，在js初始化bootstrapTable時設置filterControl: true。對於需要篩選的列，添加filterControl: "select"。列篩選效果展示如下。

③ bootstrap-table如何動態綁定欄位

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 table中formatter作用是什麼

formatter這個屬性屬於列參數，意思就是對當前列的數據進行格式化操作，它是一個函數，有三個參數，value，row，index,

value:代表當前單元格中的值，

row：代表當前行,

index:代表當前行的下標,

可以使用return 返回你想要的數據顯示在單元格中;

例子1:使用js參數方式配置

{field:"operate",title:"操作",align:"center",valign:"middle",formatter:function(value,row,index){
return"<ahref='javascript:;'onclick='editRow(event)'>編輯</a>&nbsp;&nbsp;<ahref='javascript:;'onclick='deleteRow(event)'>刪除</a>";
}}

效果: