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点击打开链接




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

相关文章推荐

Bootstrap可编辑表格

1.说明 继续送福利了,居于Bootstrap可编辑表格,编辑框支持下拉和日期,先上图看下效果,如图1: 这是居于bootstrap-table进行扩展的功能,bootstrap-table的使用...

【EasyUi DataGrid】动态加载列

动态加载列可以说是一个从无到有的过程,如果只是网页上的DataGrid实现那就太无味了,有趣的在这里,这个页面上连带着一大堆的数据库表的查询修改,尤其是做着做着发现数据表设计有缺陷,需要的数据竟然只有...

bootstrap的editTable实现方法

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

Dokuwiki如何添加edittable插件

最近在搭建Dokuwiki系统作为公司的知识管理库。搭建完成后,发现它的编辑器是很简单的。没有excel表格插入。于是搜索edittable插件,wiki官网刚好有这么一个插件。只能摸着石头过河了。 ...

TableEdit&nbsp;UI_10

1、tableView的编辑的步骤:  1.让tableView处于编辑状态,(默认所有的cell都处于编辑状态,默认下的编辑样式是删除)  2.设置哪些cell可以编辑  3.设置编辑的样式(删除...

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

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

Bootstrap table的一些简单使用总结

最近接触一个NB插件,Bootstrap table 没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真是牛X。 构造方式 1...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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