【插件篇】前段bootstrap-table-treegrid试手，解决无法显示树形列表或者图标不显示问题。

 

说明：具体代码操作我就不贴了。官方有正规的例子！bootstrap-table-examples传送

使用注意事项：

1. 传入的id和pid可以是string类型的（我后台返回的是Long类型转换成string来显示的），开始看到有的地方说必须使用number类型，走了不少弯路。去研究js中String转Long精度丢失的问题了。。。。。
2. 顶级节点的parentId值得问题。官方默认的判断方式为如果parentId为空（null或者“”）时，此行就是顶级节点。但是结合我自己的情况。我在设计时顶级节点的parentId都置为0。所以不得不改了下bootstarap-table-treegrid.js的判断方式了。下面是改动的地方：
3. 图标是否显示，查看是否开启样式的渲染了，下面代码有说明。
4. 还有一种情况时，默认是使用两张图片。可以f12调试。控制台会提示查不到对应的图片。

        onLoadSuccess:function (data) {
            $table.treegrid({
                // 初始化状态是全部折叠
                // initialState: 'collapsed',
                treeColumn: 1,
                // 下面两个是控制树形列表前面加号加号的样式渲染是否开启的
                // expanderExpandedClass: 'glyphicon glyphicon-minus',
                // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                // onChange: function() {
                //     $("#dataGrid").bootstrapTable('resetWidth');
                // }
            });
        }

　　下面是bootstrap-table-treegrid.js中的一个方法

        onCheckRoot: function (row, data) {
            var that = this;
            // 此处原本是判断当前行row中的parentIdField的值是否为空值来判断
            // 是否是顶级节点。不满足我的设计要求。
            // 因为我在设计时，顶级节点(即目录)菜单的父节点值为0。
            // 所以改为判断是否为0值即可。
            //return !row[that.options.parentIdField];
            if(row[that.options.parentIdField] == "0"){
                return true;
            }
            return false;
        }

 

结尾：目前就这么多的问题，希望能帮到诸位。有其他问题可以留言探讨。