引导表在指定列中添加下拉框控件并获取所选值 - 行业资讯

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

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

　　<李>利用列选项中的格式化程序将数据转换成下拉列表的形式李　　<李>使用bootstrap-table拓展中的可编辑的插件　　　　

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

格式化程序,其配置项为函数,有三个参数:价值、行指数

　　　　　　格式化程序:setSelect 　　函数setSelect(价值、行、索引) 　　{ 　　var strHtml=" "; 　　如果(值=https://www.yisu.com/zixun/=第1项) 　　{ 　　strHtml=" & lt;选择类=暗澄谰弊４? lt;选项选择value=' https://www.yisu.com/zixun/Item 1 '='选择'祝辞项1 & lt;/option> & lt;选项值=' https://www.yisu.com/zixun/Item 2比;第二项& lt;/option> & lt;/select>”; 　　} 　　其他的　　{ 　　strHtml=" & lt;选择类=暗澄谰弊４? lt;选项值=' https://www.yisu.com/zixun/Item 1 '祝辞项1 & lt;/option> & lt;选项值=' https://www.yisu.com/zixun/Item 2选择='选择'在第二项& lt;/option> & lt;/select>”; 　　} 　　返回strHtml; 　　} 　　　　

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

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

updateCell,包含了三个参数(指数、字段值),在某一行的某一列更新价值。
　　

　　　　　　$(" #表”)。bootstrapTable (updateCell, { 　　指数:indexSelected, 　　:“名字”, 　　价值:valueSelected 　　}) 　　　　

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

我们可以在选择元素上绑定onchange事件,或者使用jquery的改变事件。

　　　　　　$ (“s”) .change(函数(){ 　　var indexSelected=$(这).parent () .parent () [0]。rowIndex - 1; 　　var valueSelected=$(这)定格(选项:选择).val (); 　　$(" #表”)。bootstrapTable (updateCell, { 　　指数:indexSelected, 　　:“名字”, 　　价值:valueSelected 　　}）　　}); 　　　　

但是经过测试,发现美元(“s”)。改变()只是在页面加载后第一次选择可以触发,后来在bootstrap-table的文档中发现了事件项,可以监听单元格事件,和格式化程序配合着用。

　　　　　　事件:{改变。s:函数(e,价值,行,指数){}};//值是当前单元格的值,行是当前行,指数是当前行的索引值　　　　

　　<李>改变传递的是jQuery事件　　<李>。党卫军是jQuery的类选择器李　　　　

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

有的时候,我们会遇到一个别人没有遇到过的问题,并没有在网上找到直接的解决方案。那么一定要去关注他的官方文档,甚至可以直接联系作者。

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

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