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-develop\dist\bootstrap-table.css' %}">
    <script src="{% static  'bootstrap-table-develop\dist\bootstrap-table.js' %}"></script>
    <script src="{% static 'bootstrap-table-develop\dist\locale\bootstrap-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-develop\dist\extensions\editable\bootstrap-table-editable.js' %}"></script>
    <link href ="{% static 'bootstrap-editable\css\bootstrap-editable.css' %}" rel="stylesheet" />
    <script src="{% static 'bootstrap-editable\js\bootstrap-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和后台交互就可以。