可编辑列表的数据格式可以指定,常用的有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;
});
}
});
}

bootstrap-edittable 使用笔记之 (select, data,text, number)的更多相关文章

  1. Haskell语言学习笔记(93)Data.Text

    Data.Text.Read Prelude> :set -XOverloadedStrings Prelude> :m +Data.Text.Read Prelude Data.Text ...

  2. Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页

    前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3. ...

  3. Bootstrap 完全教程笔记

    Bootstrap CSS Bootstrap 排版 引导主体副本 为了给段落添加强调文本,则可以添加 class=”lead”,这将得到更大更粗.行高更高的文本,如下面实例所示: <h2> ...

  4. select([[data],fn])

    select([[data],fn]) 概述 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件.大理石平台生产厂 这个函数会调用执行绑定到select事 ...

  5. select根据text选择项与select其它操作

    // 6.设置select中text="paraText"的第一个Item为选中 function jsSelectItemByValue(objSelect, objItemTe ...

  6. .bss,.data,.text,.rodata

    那天工作时候发现build的时候发现问题, 问题内容是:.text的空间太小了. 我一直以为写代码,就真是弄懂代码怎么写,式样书怎么写,或者弄懂代码的问题所在, 没有想到在build的时候出现问题.结 ...

  7. input上传文件获取文件后缀名+select通过text选中option

    1.input获取后缀名 var fileName = $("input[type='file']").val();//获取上传的文件(单个) var extName = file ...

  8. 《深入理解bootstrap》读书笔记:第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  9. bootstrap 新手学习笔记 代码整理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. pytorch使用总结

    loss的获取 在看别人代码的时候发现都是 loss=net.loss train_loss+=loss.data[0]#train_loss用于累加梯度 在想为什么不直接使用loss呢,因为pyto ...

  2. Docker生态会重蹈Hadoop的覆辙吗?

    Docker生态会重蹈Hadoop的覆辙吗? http://mp.weixin.qq.com/s?__biz=MzA5NDg3ODMxNw==&mid=2649535024&idx=1 ...

  3. python-json函数

    json函数使用 JSON 函数需要导入 json 库:import jsonjson函数包含:json.dumps,json.loads,json.load,json.dump #1.json.du ...

  4. jemter分布式部署及linux下分布式脚本执行

    jmeter进行接口性能测试,占用内存较大,在模拟千万计并发用户时,使用分布式部署进行分压测试. 操作步骤:选择一台机器作为调度机,其他机器作为执行机 一.jmeter分布式部署 前提条件:A.执行机 ...

  5. 学习mysql,记录下常用的命令行语句

    MySQL 是最流行的关系型数据库管理系统,在 WEB 应用方面 MySQL 是最好的 RDBMS(Relational Database Management System:关系数据库管理系统)应用 ...

  6. vue-cli中怎么样使用less

    1.安装安装less依赖,npm install less less-loader --save 2.修改配置文件, 在build/webpack.base.conf.js文件的module.expo ...

  7. Xshell配置使用linux的图形界面

    1.配置Xshell如下图 2.在命令行中执行"gnome-panel". 3.或者使用xstart,配置如下图:

  8. vmware install win8 and server2012 problem

    Environment: vmware workstation 9 and win7 64bit. Problem: when i want to install server2012r2 and w ...

  9. oracle分析性能问题实例

    摘录于SAP有关分析ORACLE数据性能事件的文档. 1.A check for the distribution of relevant Oracle server time revealed: 有 ...

  10. 关于sql的查询操作记录

    1.--读取库中的所有表名 select name from sysobjects where xtype='u'  --读取指定表的所有列名 select name from syscolumns  ...