首先按照官網提供的github資源，目錄中的welcom.html是一個很完整的demo，可以根據demo寫出一個完整的表格資料視覺化以及刪除修改的操作。

我的程式碼如下：

前端html

<table id="userTable"> </table>

<pre name="code" class="html"> <!-- js placed at the end of the document so the pages load faster -->
    <script src="js/jquery"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/globalVariable.js"></script>

    <!--common script for all pages-->
    <script src="js/common-scripts.js"></script>

    <!--script for this page only-->
    <script src="js/bootstrap/bootstrap-table.js"></script>
  <script src="js/bootstrap/bootstrap-table-editable.js"></script>
 

//該js下載地址http://download.csdn.net/detail/u010543785/9630394

  <script src="js/user/user.js"></script>

$(document).ready(function(){
  /*  $("#userTable").attr("data-url",baseUrl+"user/queryAll");*/
    function priceSorter(a, b) {
        a = +a.substring(1); // remove $
        b = +b.substring(1);
        if (a > b) return 1;
        if (a < b) return -1;
        return 0;
    }
    $('#userTable').bootstrapTable({
        pagination:true,
        url: baseUrl+"user/queryAll",
        columns:[
            {   field: 'state',
                checkbox: true
            }, {
                title: '使用者名稱',
                field: 'username',
                align: 'left',
                sortable: true,
                editable: true
            }, {
                title: '真名',
                field: 'longname',
                align: 'left',
                sortable: true,
               formatter:nullFormatter,
                editable: {
                    type: 'text',
                    title: 'Item Price',
                    validate: function (value) {
                        value = $.trim(value);
                        if (!value) {
                            return 'This field is required';
                        }
                        if (!/^\$/.test(value)) {
                            return 'This field needs to start width $.'
                        }
                        var data = $table.bootstrapTable('getData'),
                            index = $(this).parents('tr').data('index');
                        console.log(data[index]);
                        return '';
                    }
                }
            }, {
                title: '角色',
                field: 'rolesName',
                align: 'left',
                sortable: true,
                editable: true
            }, {
                title: '所在部門',
                field: 'departName',
                align: 'left',
                sortable: true
            }, {
                title: '使用話機',
                field: 'enableSip',
                align: 'left',
                sortable: true,
                formatter:enableSipFormatter
            }, {
                title: 'SIP使用者名稱',
                field: 'sipUser',
                align: 'left',
            }, {
                title: 'SIP密碼',
                field: 'sipPwd',
                align: 'left',
            }, {
                title: '最後一次登入',
                field: 'logTime',
                align: 'left',
                sortable: true,
                formatter:timeFormatter
            }, {
                field: 'id',
                title: '操作',
                align: 'left',
                events: operateEvents,
                formatter: operateFormatter
            }
         ]
    });
    setTimeout(function () {
    }, 2000);
});

function nullFormatter(data) {

    if(data==""||data==null||data==" ") {
        return '未填';
    }
        return data;
}
function timeFormatter(data) {
    if(data !=null){
        data = transfromTime(data,true);
    }
    return data;
}
function enableSipFormatter(data){
    if(data==0){
        return "<span aria-valuetext='0' class='editable'>是</span>";
    }else{
        return "<span aria-valuetext='1' class='editable'>否</span>";
    }
}
 

利用

bootstrap-table-editable.js  

//該js下載地址http://download.csdn.net/detail/u010543785/9630394