Bootstrap Table的例子(转载)

转载自：http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table

使用的API：

data1.json
data2.json
data3.json
data4.json
/examples/bootstrap_table/data?offset=0&limit=10&search=test

AJAX:

Use url, method, cache, contentType, dataType, queryParams, queryParamsType, responseHandler options to set the AJAX request and response params.

基本表格

使用弹出框

不通过JavaScript的方式启动Bootstrap Table（使用data-toggle="table"）。

Item ID	Item Name	Item Price
0	Item 0	$0
1	Item 1	$1
2	Item 2	$2
3	Item 3	$3
4	Item 4	$4
5	Item 5	$5
6	Item 6	$6
7	Item 7	$7
8	Item 8	$8
9	Item 9	$9
10	Item 10	$10
11	Item 11	$11
12	Item 12	$12
13	Item 13	$13
14	Item 14	$14
15	Item 15	$15
16	Item 16	$16
17	Item 17	$17
18	Item 18	$18
19	Item 19	$19
20	Item 20	$20


    
        
            Item ID
            Item Name
            Item Price

表格转换

从已经存在、未被格式化的表格中转换为Bootstrap Table。

转换摧毁

Item ID	Item Name	Item Price
1	Item 1	$1
2	Item 2	$2
3	Item 3	$3
4	Item 4	$4
5	Item 5	$5

表格样式

开始使用例子

用height, classes, striped, rowStyle 属性和class, width, cellStyle 列属性设置 bootstrap table 的样式。

hover striped condensed


     hover
     striped
     condensed


    
    
        Item ID
        
            
            Item Name
        
        
            
            Item Price

列对齐

开始使用例子

使用 align, halign 和 valign 来设置列和表头的对齐方式。


    
    
        Item ID
        Item Name
        Item Price

表格排序

基本排序

开始使用例子

使用 sortName, sortOrder, sortable 属性和 sortable, order 列属性去设置表格的基本排序。


    
        
            Item ID
            Item Name
            Item Price

自定义排序

开始使用例子

使用 sorter列属性来定义表格的自定义排序。


    
    
        Item ID
        Item Name
        Item Price

格式化表格

开始使用例子

使用 formatter列属性来格式化表格列显示。


    
    
        Item ID
        Item Name
        Item Price

隐藏表头

开始使用例子

使用 showHeader: false 去隐藏表头。


    
    
        Item Name
        Item Price

显示列选项

基本显示

开始使用例子

使用 showColumns, minimumCountColumns 属性和 visible, switchable 列属性去显示列菜单用于切换。


    
    
        
        Name
        Price
        Columns1
        Columns2
        Columns3
        Columns4

超多列显示

开始使用例子

Bootstrap table 支持超多列，会自动显示水平滚动条。

名片（card）表格

开始使用例子

使用cardView: true属性去显示名片（card）表格。


    
    
        Name
        License
        Description
        Url

表格选择器

单选框

开始使用例子

使用 clickToSelect, selectItemName 属性和 radio 列属性来显示单选框表格。


    
        
            
            Item ID
            Item Name
            Item Price

复选框

开始使用例子

使用 clickToSelect 属性和 radio 列属性来显示复选框表格。


    
        
            
            Item ID
            Item Name
            Item Price

禁用的复选框

开始使用例子

使用 checkboxHeader, checkboxEnable 属性和 radio 列属性来禁用表格选择器。


    
    
        
        Item ID
        Item Name
        Item Price

只能单选的复选框

开始使用例子

使用 singleSelect 属性来允许表格只能选择一列。


    
    
        
        Item ID
        Item Name
        Item Price

开始使用例子

使用 search, showColumns, showRefresh, showToggle 属性来显示基本的工具栏。


    
    
        Item ID
        Item ID
        Item Name
        Item Price

开始使用例子

使用 toolbar 属性来自定义工具子。


    
        
            
                @
                
            
        
        
            Password
            
        
        
            
                 Remember me
            
        
        
    


    
    
        Item ID
        Item Name
        Item Price

分页

Use pagination, sidePagination, pageNumber, pageSize, pageList options to set the pagination options.

客户的分页

开始使用例子

I18n: da-DK el-GR en-US es-AR fr-BE it-IT nl-NL pt-BR ru-RU tr-TR vi-VN zh-CN zh-TW Translate your language?


    
        
            
            Item ID
            Item Name
            Item Price

服务器端分页

开始使用例子

使用 sidePagination: 'server' 属性来定义分页是在服务器端。


    
    
        
        Item ID
        Item Name
        Item Price

表格事件

基本事件

开始使用例子

Here is the result of event.


    Here is the result of event.


    
    
        
        Item ID
        Item Name
        Item Price

列事件

开始使用例子

使用 formatter, events 列属性来自定义列事件。


    
    
        
        Item ID
        Item Name
        Item Price
        Item Operate

表格方法

开始使用例子

方法的使用语法为: $('#table').bootstrapTable('method', parameter);。

Get Selections Get Data Load Data Append Data Remove Data Update Row Merge Cells Check All Uncheck All Show Loading Hide Loading Refresh Show Column Hide Column

通过JavaScript启用

开始使用例子

Bootstrap Table的例子(转载)

Bootstrap Table的例子(转载)

使用的API：

AJAX:

基本表格

表格转换

表格样式

列对齐

表格排序

基本排序

自定义排序

格式化表格

隐藏表头

显示列选项

基本显示

超多列显示

名片（card）表格

表格选择器

单选框

复选框

禁用的复选框

只能单选的复选框

表格工具栏

基本工具栏

自定义工具栏

分页

客户的分页

服务器端分页

表格事件

基本事件

列事件

表格方法

通过JavaScript启用

你可能感兴趣的:(bootstrap)