bootstrap table 的簡單Demo

 暫時夠用，不夠用再補充 T_T

 

script:

<link rel="stylesheet" href="lib/bootstrap.min.css">
<!-- table css-->
<link rel="stylesheet" href="lib/bootstrap-table.css">

<script src="lib/jquery-1.11.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<!--table js-->
<script src="lib/bootstrap-table.js"></script>
<script>
    $(function () {
        var data = [{
                uid: "7791",
                name: "keenleung1",
                age: "26",
                height: "165",
                description: "描述"
            },
            {
                uid: "7792",
                name: "keenleung2",
                age: "26",
                height: "165",
                description: "描述"
            },
            {
                uid: "7793",
                name: "keenleung3",
                age: "26",
                height: "165",
                description: "描述"
            },
            {
                uid: "7794",
                name: "keenleung4",
                age: "26",
                height: "165",
                description: "描述"
            },
            {
                uid: "7795",
                name: "keenleung5",
                age: "26",
                height: "165",
                description: "描述"
            },
        ];

        $('#table').bootstrapTable('load', data);

        var $result = $('#eventsResult');

        // 選擇一行
        $('#table').on('click-row.bs.table', function (e, row, $element) {
            alert(JSON.stringify(row.uid));
        });
    });

    function actionFormatter(value, row, index) {
        return [
            "<button class='btn btn-primary like'>選取</button>",
            "<button class='btn btn-default unlike'>取消</button>",
        ].join('');
    }

    window.actionEvents = {
        'click .like': function (e, value, row, index) {
            alert(JSON.stringify(row));
            return false;
        },
        'click .unlike': function (e, value, row, index) {
            alert("unlike click");
            return false;
        },
    };
</script>
<style type="text/css"></style>
<script type="text/javascript"></script>

html:

<div class="alert alert-success" id="eventsResult">
    Here is the result of event.
</div>
<table id="table" data-toggle="table">
    <thead>
        <tr>
            <th data-field="name">姓名</th>
            <th data-field="age">年齡</th>
            <th data-field="height">身高</th>
            <th data-field="description">描述</th>
            <th class="text-left" data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操做</th>
        </tr>
    </thead>
</table>

 

>>>source in GIT

官網案例：http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/