需求:

在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. Web前端开发(高级)下册-目录

    多媒体与绘图 多媒体音频格式视频格式 HTML5多媒体支持 <audio>和<video> htmlaudioElement和htmlVideoElement <audi ...

  2. Evaluation of Sampling and Cross-Validation Tuning Strategies for Regional-Scale Machine Learning Classification

    比较了不同抽样方法(随机,分层等比随机,分层不等比随机,人为),不同交叉验证方法(k折,留一法,蒙特卡洛),不同样本范围大小的效果,最后都是用SVM分类 结果是k折验证最好,人为选择样本最差.小范围小 ...

  3. webpack系列之安装(Mac OS)

    1. webpack介绍,可参考Webpack中文文档 2. 安装webpack之前先需要安装npm,可参看NPM的使用介绍 3. 安装webpack,可参考Webpack入门教程 ========= ...

  4. Win10系统下安装ubuntu16.04双系统-常见问题解答

    Win10系统下安装ubuntu16.04双系统-常见问题解答 1. 安装ubuntu16.04.2系统 磁盘分区形式有两种:GPT和MBR,关系到设置引导项.在win10下压缩出500GB空间给ub ...

  5. go 指南学习笔记

    1   If  for 后面没有小括号.后面的花括号,要在当前行,并且中间有内容,右花括号要单独一行. 因为go会格式化代码,自动插入分号. 2 函数和方法的区别: 方法需要有一个接受者(select ...

  6. 关于证书如何完成身份验证(SSL证书)

    一.写在前面 SSL和IPsec是现在VPN技术中最为常见的,在云计算的应用环境中,SSL更受企业青睐,至于原因的话简单的说就是SSL更为简洁,不需要像IPsec那样需要额外安装客户端,这会带来软件维 ...

  7. [BUAA软工]Alpha阶段事后分析

    设想和目标 虽然我们是从零开始的一个自定义项目,但语音Coding助手从一开始的设计与目标就很明确:加入语音接口使其能在shell端实现命令语音实现以及编辑运行脚本,设计前端编辑器并将后端shell与 ...

  8. ActionFilter、IAuthorizationFilter 权限验证重定向跳转到其它页面

    方法一: public class IsAllowAttribute: ActionFilterAttribute { public override void OnActionExecuting(A ...

  9. 为什么使用css3和div布局?

    1,代码精简(没有本身自带的一些属性,容易设置样式)2,解决了table表格的嵌套问题3,速度问题(页面代码减少,增加了编写代码的速度)4 ,对排名的影响,基于xhtml标准的div+css布局会更快 ...

  10. ElementUi tree 指定节点是否显示复选框

    场景:树的内容是省份下面的城市有酒店 需求:只能多选酒店(为了删除它们),至于为啥不能选省份或者城市更加灵活的去删除相应酒店,这你得去问后台0.0,他只弄了根据酒店id去删除.嗯,连创建酒店的时候级联 ...