Bootstrap table editable插件的一些需要注意的点

最新推荐文章于 2024-05-25 15:25:44 发布
最新推荐文章于 2024-05-25 15:25:44 发布
阅读量5.2k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39536750/article/details/80190670
版权

1、onEditableSave方法会在操作表内编辑时运行，若该列含有formatter，即先运行onEditableSave里的方法，再运行formatter里的方法。

2、formatter里的方法在表格添加一行或者删除一行时都会重新运行一次，可能会导致新增修改时页面变慢

3、当editable的type为select时，并且当前表格会进行添加行或者删除行时，最好先查出下拉框的全部数据，不使用其方法中的ajax，否则每次添加删除都会重新往后台拿一次数据，在数据量多时影响添加删除效率

4、insertRow方法比prepend，append方法要慢

5、select2最好添加onblur:'ignore'，防止显示出现问题



weixin_39536750
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Bootstrap Table--onEditableSave
Alfred的博客
07-30 8282
当某列编辑完成后，需要对当前列所在的行进行修改操作：  $("#grid").bootstrapTable({      url:'',      ……      …… //其他属性     columns:[{         field:'rowId',         title:'序号',         width:30,         align: 'center'
ElementUI 中 table 的template 和 formatter 函数不能一起使用
heyNewbie的博客
07-13 3329
项目中的表格要使用到table的template插槽做数据自定义处理，但是为了自己写的组件能够复用，还需要用到formatter函数来进行数据的操作，这种情况下，template和formatter是不能一起使用的， 咱们可以使用针对插槽内的结构进行针对处理 ...
BootStrap Table行内编辑
最新发布
2401_85112384的博客
05-25 590
///元素失去焦点事件//单元格修改后的的值})添加上面代码后，就可以看到单元格的可编辑效果了。如下图。修改后的数据，单元格失去焦点后控制台输出的数据。可以看出表格内容是修改了，但DOM中的当前行row内容却没有和表格中数据同步，需要通过表格的updateCell方法来更新一下单元格的数据。修改后代码如下。//元素失去焦点事件//单元格修改后的的值//updateCell更新某单元格数据index: index, //行索引。
bootstrap-table-editable 小结
郁闷之春的专栏
10-01 2万+
先贴一个json类 using System; using System.Collections.Generic; using System.Web; using System.Web.Script.Serialization; using System.Data; namespace PH.Common { /// /// JSON帮助类 /// pu
bootstrap table onEditableSave 里调用$table1.bootstrapTable(‘refreshOptions‘,{pageNumber:pnum})；页面跳转出现问
qq_45818800的博客
04-10 385
这是出现错误的状况，感觉是个bug,解决方法也简单且怪就是用this来调用this.bootstrapTable(‘refreshOptions’,{pageNumber:pnum});而不是（table1是自己定义的变量）table1是自己定义的变量）table1是自己定义的变量）table1.bootstrapTable(‘refreshOptions’,{pageNumber:pnum});然后就解决了 ...
ruoyi table元素笔记
fgfg55666的博客
12-24 1417
.edtend() 合并方法，首选传进来的 参数执行 行内编辑函数 function onEditableSave (field, row, rowIndex, oldValue, $el) { $.ajax({ type: "post", url: prefix + "/edit", data: row, dataType: 'JSON',
bootstrap table editable js
06-01
Bootstrap Editable插件使得在Bootstrap环境中可以方便地实现元素的即时编辑功能，例如点击一个文本或者图标后，元素变为输入框，用户可以直接修改内容，然后提交更改。该插件支持多种类型的编辑器，包括文本、文本...
bootstrap table的x-editable实现单元格编辑及解决数据为Empty和支持多样式
02-12
var row = $('#table').bootstrapTable('getData')[index]; row[field] = params.newValue; }); ``` 通过以上步骤，你可以在Bootstrap Table中实现单元格的编辑功能，处理空数据，以及自定义样式。同时，还可以...
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
08-29
$('#db_dependences').bootstrapTable({ method:'POST', dataType:'json', contentType: "application/x-www-form-urlencoded", cache: false, striped: true, //是否显示行间隔色 sidePagination: "client", ...
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
总的来说，`bootstrap-table`结合`bootstrap-editable`插件，提供了一种高效的方法来创建交互式、功能丰富的表格，特别是当需要在表格中实现下拉框编辑时。这种技术在数据管理、报表展示和用户输入场景中非常有用，...
bootstrap-table-editable.js
03-29
bootstrap-table-editable.js是为了bootstrap-table行内编辑所开发的，相对于X-editable的插件而言，bootstrap-table-editable可以作用与多列，并直接提交数据到后台
bootstrap-table-editable.js/css
07-11
压缩包里面有： 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
X-editable 文档 中文版
热门推荐
尽力而为
08-26 3万+
因为要用到 Bootstrap-table ，不可避免的会用到表格编辑功能，而 X-editable 可在页面上创建可编辑元素。 它可以与前端框架（Bootstrap，jQuery UI，jQuery ）配合使用，编辑模式包括弹出和行内模式。只是兜兜转转找了下只有英文文档，还是不方便查阅，所以进行了部分翻译。
bootstrap表格 行编辑状态_bootstrap table 以及行内编辑x-editable组件的使用
weixin_42298225的博客
01-26 674
dfldx.gif引入文件页面元素js代码$("#tb_user").bootstrapTable({columns: [{checkbox: true,}, {field: 'username',title: '用户名',width: '10%',align: 'center',editable: {type: 'text',title: '用户名',placement: 'right',emp...
bootstrap editable 行内编辑
我的博客
04-23 9966
除了那些bootstrap/bootstrap table的js , css之外，要额外添加editable的文件：<link href="../assets/css/bootstrap-editable/bootstrap-editable.css" rel="stylesheet"> <script src="../assets/js/bootstrap-editable/b...
bootstrap editable有默认值
yang18736086351的博客
06-19 3673
function listEditor(data,productCode) { $('#tab1').bootstrapTable('load', data); $('#tab1').bootstrapTable({ method:'POST', dataType:'json', contentType: "application/x...
bootstrap- X-editable回调之坑
lh87270202的博客
05-29 6631
前言 1、bootstrap- editable介绍： 是bootstrap一个可支持行内在线编辑的一个插件，用这个插件可实现直接点页面行就进行编辑的效果。 2、运用场景： 在线编辑后，获取输入的值 自动将全部大写字母转成小写字母更新到数据库，并更新回页面。 1、开始及用法 可直接参考官网，官网的例子很详细，这里不再介绍，下面看具体场景下如如实现。 2、遇到问题 在获取编辑...
完美解决bootstrap4 table 支持x-edittable 解决方案，分享一下思路（拦截formatter，进一步深加工）
success could be revenge的博客
12-19 4932
--------------------------2019/1/11日跟新--------- 修复bootstrap-select，更改值后不生效问题  ，如果之前有下载的，麻烦告诉我邮箱，我私发更新的js  -------------------------2018-/12/20日更新----------------------- 喜欢的话请多多支持。可以交流，花1天时间弄 ，弄得不好。...
bootstraptable获取下拉框选中的值
05-24
假设你的下拉框是通过 `select` 元素创建的，可以使用以下方法获取选中的值： ```javascript // 获取选中的值 var selectedValue = $('#selectId').val(); // 获取选中的文本 var selectedText = $('#selectId option:selected').text(); ``` 如果你的下拉框是通过 Bootstrap Table 的 `editable` 插件创建的，可以在 `onEditableSave` 事件中获取选中的值： ```javascript $('#tableId').bootstrapTable({ // ... editable: { onEditableSave: function(field, row, oldValue, $el) { if (field === 'columnName') { var selectedValue = $el.val(); var selectedText = $el.find('option:selected').text(); // ... } } } }); ``` 在 `onEditableSave` 事件中，`$el` 参数表示当前编辑的元素，可以使用 `$el.val()` 获取选中的值，使用 `$el.find('option:selected').text()` 获取选中的文本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值