bootstrap-edittable 使用笔记之 （select, data,text, number）

可编辑列表的数据格式可以指定，常用的有select, data, text, number。代码如下。

前端代码：

<table id="tb_product" class="table table-bordered"  width="100%" cellspacing="0"></table>

<!--这里有个遗留问题，当table元素在如下div嵌套中时，table的编辑框显示不全，看起来是被上面的层遮挡了，尚未研究，暂时就记录下

<div class="table-responsive">

　　<table id="tb_product" class="table table-bordered"  width="100%" cellspacing="0"></table>

</div>

-->

JS代码：

//todo 需要该成ajax获取数据
//todo 需要添加代码说明，和传递的数据格式说明
// todo 数据更新部分完善

// data 数据格式：[{seqId:1,model:'',productDate:'2019-04-11',portId:1,price:30,extendDesc:'描述'}]

// portList数据格式：[{value:1, text:'portName1'},{value:1, text:'portName2'}]

function initEditTable(data, portList){
            var columns = [

                    {checkbox: false, visible: false},
                    {field: 'seqId', title: 'ID/序号'},
                    {field: 'model', title: 'CM/型号'},
                    {field: 'productDate', title: 'PD/生产交期',editable: {
                            type: 'date',
                            title: 'PD/生产交期'
                        }},
                    {field: 'portId', title: 'Port/港口',editable: {
                            type: 'select',
                            title: 'Port/港口',
                            source: portList
                        }},
                    {field: 'price', title: 'Price/售价',editable: {
                            type: 'number',
                            title: 'Price/售价'
                        }},
                    {field: 'extendDesc', title: 'Desc/描述',editable: {
                            type: 'text',
                            title: 'Desc/描述'
                        }},
                    {field: 'option', title: 'OP/操作'}
                ];

$('#tb_product').bootstrapTable({
    toolbar: '#toolbar',                //工具按钮用哪个容器
    striped: true,                      //是否显示行间隔色
    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,                   //是否显示分页（*）
    sortable: false,                     //是否启用排序
    sortOrder: "asc",                   //排序方式
    // queryParams: oTableInit.queryParams,//传递参数（*）
    sidePagination: "client",           //分页方式：client 客户端分页，server服务端分页（*）
    pageNumber: 1,                       //初始化加载第一页，默认第一页
    pageSize: 10,                       //每页的记录行数（*）
    data:data,
    columns: columns,
    // search:true,
    onEditableSave: function (field, row, oldValue, $el) {
        updateItemInfo(row, (err)=>{
            if(err){

                initEditTable(itemList, allowEdit, portList);
                return false;
            }

            $('#tb_product').bootstrapTable('refresh');
            return false;
        });
    }
});

}