【JavaScript】bootstrap-table-treegrid 异步加载实现

插件修改自 jquery.treegrid.extension.js，新增按需加载子节点的功能（即 lazyload: true 模式），需配合 TreeGrid plugin for jQuery 使用

改造思路如下：
1 > 首次只加载根节点
2 > 在节点上绑定点击事件，查询后台数据，动态加载子节点（插入到点击行的后面紧邻的位置，同样也绑定点击事件）
3 > 重新渲染节点图标，并缓存展开节点至cookie（treegrid save state 功能，依赖 jquery.cookie.js）

; (function($) {
   
    "use strict";

    $.fn.bootstrapTreeTable = function(options, param) {
   
        // 如果是调用方法
        if (typeof options == 'string') {
   
            return $.fn.bootstrapTreeTable.methods[options](this, param);
        }

        // 如果是初始化组件
        options = $.extend({
   }, $.fn.bootstrapTreeTable.defaults, options || {
   });
        // 是否有radio或checkbox
        var hasSelectItem = false;
        var target = $(this);

        // 在外层包装一下div，样式用的bootstrap-table的
        var _main_div = target.parent('.fixed-table-container');
        if (_main_div.length == 0) {
   
            _main_div = $("<div class='fixed-table-container'></div>");
            target.before(_main_div);
            _main_div.append(target);
        }
        target.addClass("table table-hover treegrid-table");
        if (options.bordered) {
   
            target.addClass('table-bordered');
        }
        if (options.striped) {
   
            target.addClass('table-striped');
        }
        // 工具条在外层包装一下div，样式用的bootstrap-table的
        if (options.toolbar) {
   
            var _tool_div = $("<div class='fixed-table-toolbar'></div>");
            var _tool_left_div = $("<div class='bs-bars pull-left'></div>");
            var _tool_bar = $(options.toolbar);
            if (_tool_bar.length == 0) {
   
                _tool_div.css('display', 'none');
            } else {
   
                _tool_left_div.append(_tool_bar);
            }
            _tool_div.append(_tool_left_div);
            _main_div.before(_tool_div);
        }

        // 得到根节点
        target.getRootNodes = function(data) {
   
            // 指定Root节点值
            var _root = options.rootCodeValue ? options.rootCodeValue: null;
            var result = [];
            $.each(data, function(index, item) {
   
                // 这里兼容几种常见Root节点写法
                // 默认的几种判断
                var _defaultRootFlag = item[options.parentCode] == '0' 
                                    || item[options.parentCode] == 0 
                                    || item[options.parentCode] == null 
                                    || item[options.parentCode] == '';
                if (!item[options.parentCode] || (_root ? (item[options.parentCode] == options.rootCodeValue) : _defaultRootFlag)) {
   
                    result.push(item);
                }
                // 添加一个默认属性，用来判断当前节点有没有被显示
                item.isShow = false;
            });
            return result;
        };

        var j = 0;
        // 获取子节点, 并且设置子节点
        target.getChildNodes = function(data, parentNode, parentIndex, tbody, isRecursive) {
   
            $.each(data, function(i, item) {
   
                if (item[options.parentCode] == parentNode[options.code]) {
   
                    var tr = $('<tr></tr>');
                    // var nowParentIndex = (parentIndex + (j++) + 1);
                    var nowParentIndex = item[options.code];
                    tr.addClass('treegrid-' + nowParentIndex);
                    tr.addClass('treegrid-parent-' + parentIndex);
                    target.renderRow(tr, item, nowParentIndex);
                    item.isShow = true;
                    tbody.append(tr);
                    if (typeof isRecursive == 'boolean' && isRecursive) {
   
                        target.getChildNodes(data, item, nowParentIndex, tbody, isRecursive);
                    }
                }
            });
        };

        // 绘制行
        target.renderRow = function(tr, item, parentIndex) {
   
            if (options.lazyload) {
   
                tr.attr('data-id', parentIndex);
            }
            $.each(options.columns, function(index, column) {
   
                // 判断有没有选择列
                if (index == 0 && column.field == 'selectItem') {
   
                    hasSelectItem = true;
                    var td = $('<td style="text-align:center;width:36px"></td>');
                    if (column.radio) {
   
                        var _ipt = $('<input name="select_item" type="radio" value="' + item[options.id] + '"></input>')