bootstrap table 和 x-editable 使用方法

　　最近需要做一些数据表格，有同事推荐EasyUI，但经过比较选择了Bootstrap table，一款极为强大的表格组件，基于Bootstrap 的 jQuery 。本文还将介绍Bootstrap-editable（行内编辑功能）使用方法。

Bootstrap下载地址：http://v3.bootcss.com/getting-started/#download

Bootstrap table下载地址：https://github.com/wenzhixin/bootstrap-table

Bootstrap-editable下载地址：https://github.com/vitalets/x-editable

 

一、Bootstrap table

1.引入js和css文件

    <script src="{% static 'jquery/jquery.min.js' %}"></script>
     <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
     <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
     <link rel="stylesheet" type="text/css" src="{% static 'bootstrap/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'bootstrap-table-developdistootstrap-table.css' %}">
    <script src="{% static  'bootstrap-table-developdistootstrap-table.js' %}"></script>
    <script src="{% static 'bootstrap-table-developdistlocaleootstrap-table-zh-CN.js' %}"></script>

<script>
    $(function () {
        $.post('/search/',{url:url}, function (data) {
            $("#table").bootstrapTable('destroy'); // 销毁数据表格
            $('#table').bootstrapTable({

                method: 'get',
                cache: false,
                height: 500,
                striped: true,
                pagination: true,
                pageSize: 20,
                pageNumber:1,
                pageList: [10, 20, 50, 100, 200, 500],
                search: true,
                showColumns: true,
                showRefresh: true,
                showExport: true,
                exportTypes: ['csv','txt','xml'],
                search: false,
                clickToSelect: true,
                data: data,
                columns: [{
                    field: "productname",
                    title: "商品",
                }, {
                    field: "scanweight",
                    title: "重量",


                },{
                    field: "standard",
                    title: "标品",

                },{
                    field: "status",
                    title: "状态",
                }],
            });
        });
    });
    
</script>

data：返回数据必须是json格式。

$("#table").bootstrapTable('destroy')销毁数据表格。没有这段代码的话，每次返回新的数据都不会显示，原因是有缓存。

二、bootstrap-editable

 如果我们需要对表格行内进行编辑要怎么办呢，bootstrap-editable插件可以帮我们实现。

1.导入bootstrap-editable里面的js和css文件

    <script src="{% static 'bootstrap-table-developdistextensionseditableootstrap-table-editable.js' %}"></script>
    <link href ="{% static 'bootstrap-editablecssootstrap-editable.css' %}" rel="stylesheet" />
    <script src="{% static 'bootstrap-editablejsootstrap-editable.js' %}"></script>

2.代码

<script>
    
    $(function () {
        $.post('/search/',{url:url}, function (data) {
            $("#table").bootstrapTable('destroy'); // 销毁数据表格
            $('#table').bootstrapTable({

                method: 'get',
                cache: false,
                height: 500,
                striped: true,
                pagination: true,
                pageSize: 20,
                pageNumber:1,
                pageList: [10, 20, 50, 100, 200, 500],
                search: true,
                showColumns: true,
                showRefresh: true,
                showExport: true,
                exportTypes: ['csv','txt','xml'],
                search: false,
                clickToSelect: true,
                data: data,
                columns: [{
                    field: "productname",
                    title: "商品",

                }, {
                    field: "scanweight",
                    title: "重量",
                    editable:{
                        type: 'text',
                        title: 'ScanWeight',
                        validate:  function (v) {
                        if (isNaN(v)) return '必须是数字';
                        var status = parseInt(v);
                        if (status < 0) return '必须是正整数';
                    }
                    }

                },{
                    field: "standard",
                    title: "标品",

                },{
                    field: "status",
                    title: "状态",
                    editable:{
                        type: 'text',
                        title: '1:正常,2:缺货',
                        validate: function (v) {
                        if (isNaN(v)) return '必须是数字';
                        var status = parseInt(v);
                        if (status <= 0 || status>2) return '必须1或者2';
                    }
                    }

                }],
                onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/Edit/",
                    data: row,
                    dataType: 'JSON',
                    success: function (data) {
                        console.log(data)
                    },
                    error: function (err) {
                        console.log(err)
                    },
                    complete: function () {
                    }

    });
}

            });
        });
    });

</script>

后端处理代码就不贴出来了，用ajax和后台交互就可以。