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> ...
随机推荐
- git 的详解
https://blog.csdn.net/youzhouliu/article/details/78952453
- C#数组--(一维数组,二维数组的声明,使用及遍历)
数组:是具有相同数据类型的一组数据的集合.数组的每一个的变量称为数组的元素,数组能够容纳元素的数称为数组的长度. 一维数组:以线性方式存储固定数目的数组元素,它只需要1个索引值即可标识任意1个数组元素 ...
- mac下idea搭建maven项目的一些问题总结
1.关于版本 目标原版与原发行版本不一致 <build> <finalName>comment</finalName> <plugins> <pl ...
- AJAX如何实现和后端的交互(网页如何与 web 服务器进行通信)
在这里我们将会用一个姓名提示框案例来简单说明: 当用户在输入框中键入字符时,网页与 web 服务器进行通信,服务器返回提示信息,传给网页: 先看一下界面: 在html页面中: 思路:就是当用户在上面的 ...
- css的position属性
position: relative:保持未定位前的位置不变,若给了left,top的值,那么就会相对于原来的位置进行移动 absolute:元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存 ...
- Dubbo死磕之扩展点加载ExetnsionLoader
dubbo的SPI机制与JDK的SPI机制对比 dubbo一款阿里一款开源的RPC框架,他本身是一款非常复杂的系统,我们主要针对里边的一些核心点来展开分析,其中duboo里的一种核心机制 ...
- [BZOJ1596]电话网络
Problem 给你一棵树,可以在每个点上选择造塔或不造,每座塔可以覆盖这个节点和相邻节点,问覆盖整棵树的最小塔数. Solution 看到这道题的第一眼,我就觉得是一题贪心题,但看见出题的时候分类在 ...
- D3算法编写决策树
前言 所谓构建决策树, 就是递归的对数据集参数进行“最优特征”的选择.然后按最优特征分类成各个子数据集,继续递归. 最优特征的选择:依次计算按照各个特征进行分类以后数据集的熵,各个子数据集的熵比较后, ...
- fineui排序问题
后台: private void BindGrid() { // 1.获取当前分页数据 DataSet dataSet = GetPagedDataTable(); ...
- pgmpy安装
1.anaconda安装,可能在cmd中输入conda会报错,是因为在安装的时候没有配置好环境变量,在安装的时候有一个框框没选(当时是not recommand), 解决办法:需要在系统环境变量中添加 ...