Bootstrap Table 學習筆記之列引數（一）

weixin_34320159發表於2017-09-20
boot筆記

title

列頭。

field

表格列資料的欄位。

radio

單選框
  • 使用方法：設定radio:true啟用。

checkbox

核取方塊
  • 使用方法：設定checkbox:true啟用。

titleTooltip

定義把滑鼠放在列頭上時提示的文字。

class

定義列所用的樣式類名。
  • 使用方法：先定義一個類選擇器如.red{color: #ff0000}，再在列引數中啟用class:'red'
  • 效果：
4853241-68c10ebccfe20e40.png
image.png

align

控制列資料是居中、左對齊還是右對齊。

halign

控制列頭文字是居中、左對齊還是右對齊。

falign

控制列腳文字是居中、左對齊還是右對齊。

valign

控制列資料是居於底部還是居於頂部還是居中。

width

此列單元格寬度。

sortable

列排序。
  • 使用方式：設定sortable:true啟用。

cardVisible

預設值是true，當設定為false時，當切換為card檢視時隱藏該列資料。

sortName

指定根據哪一個欄位來排序。

formatter

自定義方法。
  • 使用方法：可以通過此引數返回HTML和配置表格操作欄按鈕。
  • 程式碼示例
    實現判斷當年齡大於等於18歲時，表格資料顯示“已成年”，否則顯示“未成年”：
<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'statebox',
            checkbox: true
        },{
            field: 'name',
            title: '姓名',
            class:'red'

        }, {
            field: 'age',
            title: '年齡',
            sortable:true,
            formatter:function(value,row,index){
                return getValue(value);
            }
        }, {
            field: 'id',
            title: '證件號'
        }],
        striped:true,
        showColumns:true,
        showToggle:true
    });
    function getValue(value,row,index){
        if(value >= 18){
            return "<span>已成年</span>";
        }else{
            return "<span>未成年</span>"
        }
    }
</script>
  • 效果：
4853241-b36556bdebdb9d56.png
image.png

event

使用formatter時的一個事件監聽器，可結合二者配置表格操作欄。
  • 程式碼示例：
<body>
    <table id="table"></table>
</body>
<script>
    //表格操作欄配置
    var operatorObj = {
        operateFormatter:function(value, row, index) {//初始操作欄的按鈕
            return ['<a class="write" href="javascript:void(0)" title="檢視詳情" style="margin:0">',
                '<i class="glyphicon glyphicon-eye-open"></i>檢視詳情',
                '</a>'
            ].join('');//配置表格操作欄的內容
        },operateEvents:{//點選時觸發的事件
            'click .write': function (e, value, row, index) {
                alert(row.name);
            }
        }
    }
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'statebox',
            checkbox: true
        },{
            field: 'name',
            title: '姓名',
            class:'red'

        }, {
            field: 'age',
            title: '年齡',
            sortable:true,
            formatter:function(value,row,index){
                return getValue(value);
            }
        }, {
            field: 'id',
            title: '證件號'
        }, {
            width: "150px",
            field: 'operate',
            title: '相關操作',
            align: 'center',
            events: operatorObj.operateEvents,
            formatter: operatorObj.operateFormatter
        }],
        striped:true,
        showColumns:true,
        showToggle:true
    });
    function getValue(value,row,index){
        if(value >= 18){
            return "<span>已成年</span>";
        }else{
            return "<span>未成年</span>"
        }
    }

</script>
  • 效果：
4853241-1195875612991c28.png
image.png
4853241-4ae0036d9ca14a64.png
image.png

相關文章