需求:

在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 列表增加输入框并保存输入的值不清除的更多相关文章

  1. ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表

    这张开始bootstrap table,引入项目有两种方法,一种是直接去官网下载 地址:http://bootstrap-table.wenzhixin.net.cn/ 另一种是Nuget引入. 然后 ...

  2. ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--Bootstrap Table用户管理列表以及Module Zero之用户管理

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 用户实体 用户实体代表应用的一个用户,它派生自AbpUser类,如下所示: public class User : ...

  3. [转] BootStrap table增加一列显示序号

    原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...

  4. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  5. [转]JS组件系列——表格组件神器:bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  6. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. 使用bootstrap table小记(表格组件)

    前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...

  8. 表格组件神器:bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

  9. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十六节--SignalR与ABP框架Abp.Web.SignalR及扩展

    SignalR简介 SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...

随机推荐

  1. CSS3 之filter毛玻璃效果弹窗

    先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  2. 洛谷P1270 访问美术馆

    题目 树形DP,首先考虑递归建图,类似于线段树的中序遍历.然后取状态dp[i][j]表示i点花费j时间所偷到的最多的画,有方程: \(dp[now][nwt] = max(dp[now][nwt], ...

  3. vim配置无插件

    其实,vim插件会影响编辑器的启动速度,虽然有些插件影响不大,我依然觉得不够,其实通过简易的状态栏,可以显示必要的信息,能自定义颜色和背景甚至透明就足够了. 一.自定义状态栏其实以下内容可以写在一行上 ...

  4. ICEM-三棱锥的一种画法

    原视频下载地址:https://pan.baidu.com/s/1c4BAqy 密码: nqb4

  5. 2019 SDN第二次上机作业

    2019 SDN第二次上机作业 1. 利用mininet创建如下拓扑,要求拓扑支持OpenFlow 1.3协议,主机名.交换机名以及端口对应正确,请给出拓扑Mininet执行结果,展示端口连接情况 创 ...

  6. 对5月13号中BaseDao方法进行优化改造,更接近于框架的编写

    /* * 通用查询.更新升级版 * */ public class BaseDao2 { static { try { Class.forName(ConfigUtil.getValue(" ...

  7. pxe问题

    可能镜像路径问题 https://blog.csdn.net/geek_tank/article/details/69479196 一.vmlinuz vmlinuz是可引导的.压缩的内核.“vm”代 ...

  8. 作业——10 分布式文件系统HDFS 练习

    作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3292 利用Shell命令与HDFS进行交互 以”./bin/dfs ...

  9. Predictive Analysis in Network Function Virtualization

    摘要 网络功能虚拟化(NFV)体系结构的最新部署获得了极大的关注.虚拟化虽然带来了诸如降低成本和简化网络功能部署之类的好处,但它增加了附加层,从而降低了较低层故障的透明度.为了改善虚拟网络功能(VNF ...

  10. DELPHI7 ADO二层升三层新增LINUX服务器方案

    DELPHI7 ADO二层升三层新增LINUX服务器方案 引子:笔者曾经无数次在用户的LINUX服务器上创建一个WINDOWS虚拟机,用于运行自己DELPHI开发中间件. 现在再不需要如此麻烦了. 咏 ...