可编辑列表的数据格式可以指定,常用的有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. vuex 改变状态值得命名问题

    今天在做vuex的状态的时候 发现了个奇葩的问题,后面解决了,在改变状态的值得时候 传值的名称 不要和定义的状态的名称值相同,要不然会报错,如图所示 也就是password的名称不能相同,要不监测不到 ...

  2. python实现单线程多任务非阻塞TCP服务端

    代码 # coding:utf- from socket import * # .创建服务器socket sock = socket(AF_INET, SOCK_STREAM) # .绑定主机和端口 ...

  3. Mac OS X 操作系统下IntelliJ IDEA激活码(Activation code)破解

    Mac OS X 操作系统(版本:10.13.6)下载并安装IntelliJ IDEA: Version: 2018.2.4 Download IntelliJ IDEA 下一步对IntelliJ I ...

  4. SQL server 2012安装中出现的INSTALLSHAREDDIR 和 INSTALLSHAREDWOWDIR 参数具有相同的值问题

    出现的问题如下: INSTALLSHAREDDIR 和 INSTALLSHAREDWOWDIR 参数具有相同的值“D:\soft\sql”.但是,这些参数必须具有不同的值.请为其中一个参数指定不同的值 ...

  5. Python3将xml文件解析为Python对象

    一.说明 从最开始写javascript开始,我就很烦感使用getElementById()等函数来获取节点的方法,获取了一个节点要访问其子孙节点要么child半天要么就再来一个getElementB ...

  6. mongodb数据库操作方法

    // Schema.Model.Entity或者Documents的关系请牢记,Schema生成Model,Model创造Entity,Model和Entity都可对数据库操作造成影响,但Model比 ...

  7. Abp.vNext 权限备注

    Abp 内部是基于 asp.net core 基于 策略的  授权方式,每个权限为一个策略 权限分为: 1.定义权限(先定义权限组,后添加权限),每个模块都应该创建一个PermissionDefini ...

  8. 使用HUI-admin过程中,返回上级页面并刷新

    非常简单的js self.location=document.referrer;

  9. JS a标签默认鼠标事件,导致无法修改input选中状态

    今天踩了一个坑

  10. 破解某PDF转换器产品

    本文章纯属出于作者自己对技术的探索,绝不用于商业用途(虽然网上已经能够下载到注册机了) 软件功能就不多说了,PDF转换成WORD格式,对于学生党来说也算是神器了吧,那么我们今天就用自己的办法来获得这款 ...