【记录】BootstrapTable创建树形列表构建失败

遭遇了一个 BootstrapTable 创建树形列表失败的问题

解决方案很简单，将 bootstraptable 的 js文件放在 bootstraptable.treegrid 的js文件前面：

<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script type="text/javascript" src="${ctx }/js/bootstrap/bootstrap-table-treegrid.js"></script>

就如同需要将 jQuery 的 js 文件放到所有 js 文件最前面。

上一篇文章记录了在测试中成功创建的过程，但应用到项目中出现无法创建树形列表问题，后来把项目中代码拷贝到测试项目中，测试项目成功，找了很久，记录一下寻找历程。。

失败顺序

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>

<!--<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>-->
<script src="bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

成功顺序

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>

<!--<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>-->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="bootstrap-table-treegrid.js"></script>

大致过程（根据上篇文章的代码逻辑来看）：

            onResetView: function() {
                //console.log('load');
                debugger1
                $table.treegrid({
                    initialState: 'collapsed',// 所有节点都折叠
                    // initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 0,
                    // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                    // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function() {
                        debugger2
                        $table.bootstrapTable('resetWidth');
                    }
                });
                //只展开树形的第一级节点
                debugger3
                $table.treegrid('getRootNodes').treegrid('expand');

            },

逻辑的顺序是 1->3->2

debugger1 暂时没有看出问题，往下到了debugger3

Chrome调试发现 

$table.treegrid('getRootNodes').treegrid('expand');

获取到的Root节点竟然是空的！然后去 jquery.treegrid.min.js 扒方法

		getRootNodes : function() {
			return $(this).treegrid("getSetting", "getRootNodes").apply(this,
					[ $(this).treegrid("getTreeContainer") ])
		},

感觉还是 $(this) 即 $table 的问题

仔细查看 $table.treegrid() 内容，找到 rows 

在对比下发现，是 js 没有将每行转换成 treegrid 类型

那么猜测方法没有问题，js 出了问题，无非是以下几种：

1. js 中方法冲突

2. js 引用顺序错误，就像 jQuery 要在大部分类之前一样

调试成功

Happy Weekend！