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;
});
}
});
}
bootstrap-edittable 使用笔记之 (select, data,text, number)的更多相关文章
- Haskell语言学习笔记(93)Data.Text
Data.Text.Read Prelude> :set -XOverloadedStrings Prelude> :m +Data.Text.Read Prelude Data.Text ...
- Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页
前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3. ...
- Bootstrap 完全教程笔记
Bootstrap CSS Bootstrap 排版 引导主体副本 为了给段落添加强调文本,则可以添加 class=”lead”,这将得到更大更粗.行高更高的文本,如下面实例所示: <h2> ...
- select([[data],fn])
select([[data],fn]) 概述 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件.大理石平台生产厂 这个函数会调用执行绑定到select事 ...
- select根据text选择项与select其它操作
// 6.设置select中text="paraText"的第一个Item为选中 function jsSelectItemByValue(objSelect, objItemTe ...
- .bss,.data,.text,.rodata
那天工作时候发现build的时候发现问题, 问题内容是:.text的空间太小了. 我一直以为写代码,就真是弄懂代码怎么写,式样书怎么写,或者弄懂代码的问题所在, 没有想到在build的时候出现问题.结 ...
- input上传文件获取文件后缀名+select通过text选中option
1.input获取后缀名 var fileName = $("input[type='file']").val();//获取上传的文件(单个) var extName = file ...
- 《深入理解bootstrap》读书笔记:第三章 CSS布局
一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...
- bootstrap 新手学习笔记 代码整理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- vuex 改变状态值得命名问题
今天在做vuex的状态的时候 发现了个奇葩的问题,后面解决了,在改变状态的值得时候 传值的名称 不要和定义的状态的名称值相同,要不然会报错,如图所示 也就是password的名称不能相同,要不监测不到 ...
- python实现单线程多任务非阻塞TCP服务端
代码 # coding:utf- from socket import * # .创建服务器socket sock = socket(AF_INET, SOCK_STREAM) # .绑定主机和端口 ...
- Mac OS X 操作系统下IntelliJ IDEA激活码(Activation code)破解
Mac OS X 操作系统(版本:10.13.6)下载并安装IntelliJ IDEA: Version: 2018.2.4 Download IntelliJ IDEA 下一步对IntelliJ I ...
- SQL server 2012安装中出现的INSTALLSHAREDDIR 和 INSTALLSHAREDWOWDIR 参数具有相同的值问题
出现的问题如下: INSTALLSHAREDDIR 和 INSTALLSHAREDWOWDIR 参数具有相同的值“D:\soft\sql”.但是,这些参数必须具有不同的值.请为其中一个参数指定不同的值 ...
- Python3将xml文件解析为Python对象
一.说明 从最开始写javascript开始,我就很烦感使用getElementById()等函数来获取节点的方法,获取了一个节点要访问其子孙节点要么child半天要么就再来一个getElementB ...
- mongodb数据库操作方法
// Schema.Model.Entity或者Documents的关系请牢记,Schema生成Model,Model创造Entity,Model和Entity都可对数据库操作造成影响,但Model比 ...
- Abp.vNext 权限备注
Abp 内部是基于 asp.net core 基于 策略的 授权方式,每个权限为一个策略 权限分为: 1.定义权限(先定义权限组,后添加权限),每个模块都应该创建一个PermissionDefini ...
- 使用HUI-admin过程中,返回上级页面并刷新
非常简单的js self.location=document.referrer;
- JS a标签默认鼠标事件,导致无法修改input选中状态
今天踩了一个坑
- 破解某PDF转换器产品
本文章纯属出于作者自己对技术的探索,绝不用于商业用途(虽然网上已经能够下载到注册机了) 软件功能就不多说了,PDF转换成WORD格式,对于学生党来说也算是神器了吧,那么我们今天就用自己的办法来获得这款 ...