根据大牛的博客,使用editable插件实现bootstrapTable单元格现场修改数据的功能,然后报了个很奇怪的错误。先步骤回顾,解决方法在最后:
一、引入的关键文件:
- jquery.js
- bootstrap.css
- bootstrap.js
- bootstrap-table.css(绘制表格使用)
- bootstrap-table.js(绘制表格使用)
- bootstrap-editable.css(单元格编辑使用)
- bootstrap-editable.js(单元格编辑使用)
- 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。
四、解决
- 按版本兼容的导入就可以了。我用的是bootstrap3.3.6版本,说好的兼容2和3却运行失败,必须是3.0.0版才行。
- 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.js
或jquery.treegrid.min.js
有东西冲突了,把bootstrap3.0.0的js和css放在其他插件之后、编辑框插件之前才不报错(bootstrap-editable.css、bootstrap-editable.js、bootstrap-table-editable.js)