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

首先按照官网提供的github资源，目录中的welcom.html是一个很完整的demo，可以根据demo写出一个完整的表格数据可视化以及删除修改的操作。

我的代码如下：

前端html

 
    
    
    

    
    

    
    
  
//该js下载地址http://download.csdn.net/detail/u010543785/9630394

  





 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 "是";
    }else{
        return "否";
    }
}



利用
bootstrap-table-editable.js  
//该js下载地址http://download.csdn.net/detail/u010543785/9630394
 详细完整的增删改查案例详见我的另外一篇博文：http://blog.csdn.net/u010543785/article/details/52314865 点击打开链接