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 功能是指 ...
 
随机推荐
- android打包so文件到apk
			
在apk里打包进.so文件的方法 有两种方法, 1 是在Android.mk文件里增加 LOCAL_JNI_SHARED_LIBRARIES := libxxx 这样在编译的时候,NDK自动会把这个l ...
 - 2019暑假Java学习笔记(三)
			
目录 面向对象 对象 构造方法 引用与对象实例 static final 封装 this 继承 super 方法重载与重写 多态 抽象类 接口 内部类 成员内部类 静态内部类 局部内部类 匿名内部类 ...
 - html苹方字体
			
苹方提供了六个字重,font-family 定义如下: 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 极细体 font-fami ...
 - maven工程中MENIFEST.MF中属性作用
			
Manifest-Version: 版本号 Bundle-ManifestVersion: bundle的版本号 Bundle-Name: bundle的名称,主要是对bundle的作用的说明 Bun ...
 - python list 和 tuple详解
			
list------------------------------------------------------------------------ Python内置的一种数据类型是列表:list ...
 - hive中function函数查询
			
1. desc function [函数名] desc function xpath; 查询用法: 2. desc function extended [函数名] desc function exte ...
 - SQL中左连接on and条件和where条件执行先后顺序
			
left join :左连接,返回左表中所有的记录以及右表中连接字段相等的记录. right join :右连接,返回右表中所有的记录以及左表中连接字段相等的记录. inner join: 内连接,又 ...
 - ffmpeg接收udp输入的h264文件流,推流到rtmp服务器
			
ffmpeg -re -f h264 -i udp://192.168.5.49:10002 -vcodec libx264 -f flv rtmp://192.168.5.155/live/1
 - PP篇11 增、改生产订单组件BAPI
			
增.改生产订单组件BAPI BAPI_ALM_ORDER_MAINTAIN USE BAPI_ALM_ORDER_MAINTAIN TO CREATE OR CHANGE PM WORK ORDER ...
 - preg_match  第三个参数,
			
//请修改变量p的正则表达式,使他能够匹配str中的姓名 $p = '/name:([\w\s]+)/'; $str = "name:steven jobs"; preg_matc ...