bootsrap table动态添加数据的实现
时间:2019-11-19
本文章向大家介绍bootsrap table动态添加数据的实现,主要包括bootsrap table动态添加数据的实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<div style="width:75%;margin-left:16.5%"> <div class="columns pull-left"> <button id="add" type="button" class="btn btn-primary"> <i class="fa fa-plus" aria-hidden="true"></i>添加 </button> <button id="del" type="button" class="btn btn-danger"> <i class="fa fa-trash" aria-hidden="true"></i>删除 </button> <button id="save" type="button" class="btn btn-primary"> <i class="fa fa-save" aria-hidden="true"></i>保存 </button> </div> <table id="table"></table> </div>
ji代码
var instrumentId = '[[${instrumentInfoDO.instrumentId}]]'; var instrumentName = '[[${instrumentInfoDO.instrumentName}]]'; function saveStTime(index, obj){ var value = $(obj).val(); $("#table").bootstrapTable('updateCell',{ index: index, field: 'stTime', value: value }); } function saveEndTime(index, obj){ var value = $(obj).val(); $("#table").bootstrapTable('updateCell',{ index: index, field: 'edTime', value: value }); } $("#save").click(function() { var info = $("#table").bootstrapTable('getData'); var data = { instrumentId: instrumentId,timeSetList: []}; for (var i = 0; i < info.length; i++) { var timeSet = new Object(); timeSet.stTime = info[i].stTime; timeSet.edTime = info[i].edTime; data.timeSetList.push(timeSet); } var jsonString = JSON.stringify(data); $("#timeSetList").val(jsonString); save(); }) $(function() { var $table = $('#table'); var $add = $('#add'); var $remove = $('#del'); $table.bootstrapTable({ url: 'data2.json', toolbar: '#toolbar', clickEdit: true, showToggle: false, pagination: false, //显示分页条 showColumns: false, showPaginationSwitch: false, //显示切换分页按钮 showRefresh: false, //显示刷新按钮 uniqueId: "ID", strictSearch: false, //clickToSelect: true, //点击row选中radio或CheckBox columns: [{ checkbox: true, width: '2%' }, { field: 'instrumentId', title: '仪器id', formatter: function (value, row, index) { return instrumentId }, width: '10%', visible: false },{ field: 'instrumentName', title: '仪器', formatter: function (value, row, index) { return instrumentName }, width: '10%' },{ field: 'stTime', title: '开始时间', formatter: function (value, row, index) { return "<input type='time' class='input-sm form-control' id='stTime"+index+"' value='"+value+"' autocomplete='off' onblur='saveStTime("+ index +", this)' placeholder='请输入开始时间'/>"; }, width: '10%' }, { field: 'edTime', title: '结束时间', width: '5%', formatter: function (value, row, index) { return "<input type='time' class='input-sm form-control' id='edTime"+index+"' value='"+value+"' autocomplete='off' onblur='saveEndTime("+ index +", this)' placeholder='请输入结束时间'/>"; }, }], onClickCell: function(field, value, row, $element) { $element.attr('contenteditable', true); $element.blur(function() { var index = $element.parent().data('index'); var tdValue = $element.html(); saveData(index, field, tdValue); }) } }); function saveData(index, field, value) { $table.bootstrapTable('updateCell', { index: index, //行索引 field: field, //列名 value: value //cell值 }) } $remove.click(function () { var ids = $.map($table.bootstrapTable('getSelections'), function (row) { return row.id; }); $table.bootstrapTable('remove', { field: 'id', values: ids }); }); $add.click(function () { var index = $table.bootstrapTable('getData').length; $table.bootstrapTable('insertRow', { index: index, row: { id:index, instrumentId: instrumentId, instrumentName: instrumentName, stTime: '', edTime: '' } }); }); });
原文地址:https://www.cnblogs.com/person008/p/11890763.html
- 大数据面试题整理
- 02-移动端开发教程-CSS3新特性(中)
- 强悍!Java 9 中的9个新特性
- 神经网络反向传播梯度计算数学原理
- Spring Boot 1.5.10 发布:修复重要安全漏洞!!!
- 从零开始写项目第三篇【在线聊天和个人收藏夹】
- TiDB 源码阅读系列文章(六)Select 语句概览
- 从零开始写项目第四篇【搭建Linux环境】
- salesforce零基础学习(八十六)Ajax Toolkit (VF页面中使用及javascript action使用)
- salesforce零基础学习(八十五)streaming api 简单使用(接近实时获取你需要跟踪的数据的更新消息状态)
- 深入nDPI
- 44个Java代码性能优化总结
- 干货:Java正确获取客户端真实IP方法整理
- sublime学习笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ZooKeeper能解决什么问题?不能解决什么问题?
- 画解算法 77-组合
- Spring 源码系列之容器概览~
- Spring Security 中如何让上级拥有下级的所有权限?
- Spring Security 权限管理的投票器与表决机制
- 通过cycler实现属性的自动映射
- 为你的图片添加图例
- matplotlib中的黑魔法:constrained和tight layout
- 用不同的坐标系统对图形元素进行定位
- 对《丢鸡蛋问题》的一点补充
- HA(高可用)就像套娃,像胖子,剥掉一层还有一层
- 《丢鸡蛋问题》重制版来袭~
- 如何搭建一个完美的组件库?
- 架构师的初级技能,选组件!(2020更新版,非广告)
- 半天掌握TypeScript,感觉就像写Java