bootstrap table 列表增加输入框并保存输入的值不清除
需求:

在bootstrap table上增加输入框,需要选择的时候把输入的值保存到 row 里面,传递给其他模块使用。
实现:
columns: [{
....,
{
field: 'myField', //自定义字段名称
title: '输入值', //自定义
width: '5%',
formatter: function (value, row , index) {
return '<input type="text" name="myField" value="" onblur="changeData('+ index +', this);" />';
}
}]
在columns 里面增加自定义一个节点,然后使用 formatter 转换成输入框,并绑定 onblur 事件。
function changeData(index, obj) {
var value = $(obj).val();
var name = $(obj).attr('name');
//通过 index 获取指定的行
var row = $("#table").bootstrapTable('getOptions').data[index];
//将 input 的值存进 row 中
row[name] = value;
//更新指定的行,调用 'updateRow' 则会将 row 数据更新到 data 中,然后再重新加载
$("#table").bootstrapTable('updateRow',{index: index, row: row});
}
然后就可以从 row 中取得输入的值了。
function getSelections() {
return $.map($("#table").bootstrapTable('getSelections'), function (row) {
return row
});
}
演示:
输入:

输出:

bootstrap table 列表增加输入框并保存输入的值不清除的更多相关文章
- ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表
这张开始bootstrap table,引入项目有两种方法,一种是直接去官网下载 地址:http://bootstrap-table.wenzhixin.net.cn/ 另一种是Nuget引入. 然后 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--Bootstrap Table用户管理列表以及Module Zero之用户管理
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 用户实体 用户实体代表应用的一个用户,它派生自AbpUser类,如下所示: public class User : ...
- [转] BootStrap table增加一列显示序号
原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- [转]JS组件系列——表格组件神器:bootstrap table
原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...
- JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- 使用bootstrap table小记(表格组件)
前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...
- 表格组件神器:bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十六节--SignalR与ABP框架Abp.Web.SignalR及扩展
SignalR简介 SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...
随机推荐
- 解决Shell脚本$'\r': command not found问题
造成这个问题的原因是Windows下的空行,我们只需要把文件转成unix就好 Centos下,执行yum install dos2unix,然后dos2unix [file],再执行shell命令就好 ...
- 算法练习题---罗马数字转int
连接:https://leetcode-cn.com/problems/roman-to-integer/submissions/ 题目: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 ...
- 范仁义html+css课程---7、表单
范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...
- linux学习(5):linux 性能瓶颈排查
作为开发人员,肯定遇到过以下场景,应用突然卡住了,或者异常退出,cpu占用过高等各种异常情况,一般遇到这些异常情况,该如何去查找具体原因呢? linux和jdk提供了一些命令和工具来查看内存.cpu. ...
- javascript submit() is not a function
<script> window.onload = function(){ document.getElementById('form').submit(); } </script&g ...
- GIS地理工具案例教程——批量合并影像-批量镶嵌栅格
GIS地理工具案例教程--批量合并影像-批量镶嵌栅格 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 关键词:批量.迭代.循环.自动.智能.地理 ...
- ajax发送json数据时为什么需要设置contentType: "application/json”
1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别?contentType: "application/js ...
- Java JDBC利用反射技术将查询结果封装为对象
1.JDBC将返回结果集封装成对象demo class JdbcDemo { /** * 获取数据库列名 * @param rs * @return */ private static String[ ...
- (转)tomcat 安全配置文档
原文:https://www.cnblogs.com/heaven-xi/p/9961354.html 1.配置文档中使用$CATALINA_HOME变量声明为tomcat的安装目录并明确写出了tom ...
- 关于H5项目开发中TS(或JS)文件按照顺序编译成一个文件的记录
由于js的执行特性,多个js文件合成一个文件或者进行多个js文件加载时,时需要按照指定的顺序进行的,否则会出现报错的情况. 我们看一下目前几个主流H5引擎的做法. 白鹭的做法 当前版本的做法 在tsc ...