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;
});
}
});
}
上一篇:C#实现Web文件上传的两种方法


下一篇:ansible学习(二)