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

原创 2016年06月01日 13:58:08


首先按照官网提供的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点击打开链接



                    
版权声明:本文为博主原创文章,未经暴烈骑士允许或未声明者不得转载。

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

阅读目录 一、x-editable组件介绍二、bootstrapTable行内编辑初始方案三、bootstrapTable行内编辑最终方案 1、文本框2、时间选择框3、下拉框4、复选框5、...
  • doc_wei
  • doc_wei
  • 2016年12月21日 12:59
  • 2338

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

bootstrap-table-editable 小结

先贴一个json类 using System; using System.Collections.Generic; using System.Web; using System.Web.Script....

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式

bootstrap table的表格的单元格编辑功能,实现点击单元格修改内容,其中包括文本(text)方式修改,下拉选择(select)方式修改,日期(date)格式修改等。本文着重解决x-edita...

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

阅读目录 一、x-editable组件介绍二、bootstrapTable行内编辑初始方案三、bootstrapTable行内编辑最终方案 1、文本框2、时间选择框3、下拉框4、复选框5、...

bootstrap的editTable实现方法

首先下载基于bootstrap的源码到本地。引用相关文件。 link href="/Content/bootstrap/css/bootstrap.min.css" rel="styleshee...

bootstrap-table 中columns中editable type为select默认使用本列数据

当时用bootstrap-table中的columns中editable中的type为select编辑模式下,我们需要必须制定source,然而source方法又没有一应该列数据的function,通...
  • huanbia
  • huanbia
  • 2017年06月16日 14:56
  • 3027

Bootstrap-table异常汇总

开发中遇到的问题,废了九牛二虎之一通百度知道+stackflow,终于在灵光一闪尝试一改之后调好了。。。 1、实现行内编辑功能时,点击链接没有效果,F12发现问题出在bootstrap-ed...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Boostrap-table.js的表格数据可视化 集成bootstrap-editable.js
举报原因:
原因补充:

(最多只允许输入30个字)