Boostrap-table.js的表格数据可视化 集成bootstrap-editable.js

版权声明：本文为博主原创文章，未经暴烈骑士允许或未声明者不得转载。 https://blog.csdn.net/u010543785/article/details/51555442

首先按照官网提供的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>

user.js

$(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

详细完整的增删改查案例详见我的另外一篇博文：http://blog.csdn.net/u010543785/article/details/52314865 点击打开链接