bootstrap-editable表格编辑弹框无效

13 篇文章 0 订阅
本文讲述了如何修复在使用bootstrapTable和bootstrap-editable时遇到的版本不兼容错误,涉及版本升级、依赖调整及解决过程,重点在于确保Bootstrap 3.0.0的正确配合。
摘要由CSDN通过智能技术生成

根据大牛的博客,使用editable插件实现bootstrapTable单元格现场修改数据的功能,然后报了个很奇怪的错误。先步骤回顾,解决方法在最后:

一、引入的关键文件:

  1. jquery.js
  2. bootstrap.css
  3. bootstrap.js
  4. bootstrap-table.css(绘制表格使用)
  5. bootstrap-table.js(绘制表格使用)
  6. bootstrap-editable.css(单元格编辑使用)
  7. bootstrap-editable.js(单元格编辑使用)
  8. bootstrap-table-editable.js(单元格编辑使用)

二、关键代码:
1、html

<table id="studentTable"></table>

2、js

//模拟真实接口数据
let studentData = [{"id":1,"name":"小明","class":"一班"},
					{"id":2,"name":"小华","class":"二班"}]
//绘制表格开始
$("#studentTable").bootstrapTable({
	data:studentData,
	columns:[
		{field:'id',title:'序号',align:'center'},
		{field:'name',title:'姓名',align:'center',sortable:true},
		{field:'class',title:'班级',align:'center',sortable:true}
	]
})

三、报错信息:
Uncaught Error: null not found. Have you included corresponding js file?
在这里插入图片描述
查询了很久都没找到解决方法,看源代码没解决思路,需要的文件都引入顺序也检查了好几遍,后来根据一篇博客联想到版本问题导致的奇奇怪怪的bug。
四、解决

  1. 按版本兼容的导入就可以了。我用的是bootstrap3.3.6版本,说好的兼容2和3却运行失败,必须是3.0.0版才行。
  2. git上的案例:x-editable(有需要可以直接从里面拿资源)。

后记:

① 对于bootstrapTable,bootstrap版本没有强制要求,但如果使用bootstrap-editable编辑,你的bootstrap只能是固定版本(我这里使用的3.0.0可行)
②但是,我使用的这套框架其他页面用3.3.6编写,唯独一个页面用到表格编辑弹框,也就是3.0.0版本,加上把3.3.6的css源码改了一大堆,好吧,我直接在后面导入3.0.0版本覆盖,有不一样的再加条件呗,结果又出现了这个bug
③在实际项目中,表格还加入树形展开功能,我在所有插件之前导入bootstrapv3.0.0的js和css之后,报一模一样的错,可能是bootstrap-table-treegrid.jsjquery.treegrid.min.js有东西冲突了,把bootstrap3.0.0的js和css放在其他插件之后、编辑框插件之前才不报错(bootstrap-editable.css、bootstrap-editable.js、bootstrap-table-editable.js)
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值