Bootstrap Table 在指定列中添加下拉框控件并获取所选值

网友投稿 590 2023-04-24


Bootstrap Table 在指定列中添加下拉框控件并获取所选值

背景

最近在使用Bootstrap table ,有一个在某一列添加一个下拉列表,并且通过 “getAllSelections”方法获取所选行的需求,在实现这个功能的时,走了一些弯路,遇到了一些坑。所以今天总结出来,既是自己的学习,也分享给大家,希望能够有些帮助。

如何解决

添加这个下拉列表有以下两种方法:

利用Column options 中的 formatter 将数据转换成下拉列表的形式

使用bootstrap-table拓展中的editable插件

这次主要介绍第一种,基本的思路为:首先通过 bootstrap-table 的Column 配置项中的formatter,将获取到的数据转换为包含数据的 select 控件。然后根据用户选择项更新对应单元格数据,最后通过getallselection方法获取所选行数据。

formatter,其配置项为function,有三个参数:(value,row,index)

formatter: setSelect

function setSelect(value, row, index)

{

var strHtml = "";

if (value == "Item 1")

{

strHtml = "";

}

else

{

strHtml = "";

}

return strHtml;

}

到这里,下拉列表已经可以显示出来了,但是如果直接使用 getallselection 方法获取所选内容会有问题:获取到的数据是默认表格初始化加载的内容,并不是重新选择的内容。

bootstrap-table是一个jquery插件,直接在html上面修改是获取不到的,要修改需要通过它自己的方法。bootstrap-table 在Methods 中提供了一个updateCell的方法。

updateCell ,包含了三个参数(index,field,value),在某一行的某一列更新value。

$('#table').bootstrapTable('updateCell', {

index: indexSelected,

field: 'name',

value: valueSelected

})

events

完成了下拉列表的显示,有了更新单元格值的方法,还需要做的是为下拉列表的选择绑定事件,实现下拉列表选择->改变单元格值。

我们可以在select元素上绑定onchange事件,或者使用jquery的change 事件。

$(".ss").change(function() {

var indexSelected = $(this).parent().parent()[0].rowIndex - 1;

var valueSelected = $(this).children('option:selected').val();

$('#tgmxQTvwgHHable').bootstrapTable('updateCell', {

index: indexSelected,

field: 'name',

value: valueSelected

})

});

但是经过测试,发现$(“.ss”).change()只是在页面加载后第一次选择可以触发,后来在bootstrap-table的文档中发现了events项,可以监听单元格事件,和formatter 配合着用。

events: {'change .ss': function (e, value, row, index) {}};

//value是当前单元格的值,row是当前行,index是当前行的索引值

change 传递的是jQuery事件

.ss 是jQuery的类选择器

上面是在jsFiddle做的一个小Demo,有源码和显示效果,可以参考一下。

小结

还有以bootstrap-table来说,它本身是一个jQuery插件,如果理解了一个jQuery插件具体是如何工作的,对于解决问题会是非常有帮助的。

以上所述是给大家介绍的Bootstrap Table 在指定列中添加下拉框控件并获取所选值,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:浅谈对Angular中的生命周期钩子的理解
下一篇:webpack实现热加载自动刷新的方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~