1. 前端放一个div用来做为tree的容器。
2. 引用jstree.min.js与style.min.css
3. 页面下进行初始化

<script>
    $(function () {
        var $checkbox_tree = $("#checkbox_tree");
        $checkbox_tree.jstree({
            core: {
                animation: false,
                'data': {
                    'url': function (node) {
                        // 透过url传递node_id
                        return base_url + folder + controller + '/tree/' + node.id;
                    },
                    'data': function (node) {
                        return {
                            // 指定其它参数
                            'readonly': true,
                            "tree_id": $("#id").val()
                        };
                    }
                }
            },
            // 这两个必须要
            checkbox: {
                tie_selection: false,
                whole_node: false
            },
            plugins: ["checkbox", "wholerow"]
        });

        // 载入后，全部展开
        $checkbox_tree.bind("loaded.jstree", function (e, data) {
            $checkbox_tree.jstree('open_all');
        });
    });
</script>

4. 后台提供数据的方法

public function tree($node_id = null)
{
    $tree_id= $this->input->get('tree_id');
    $tree= $this->tree_model->get($tree_id, $node_id);

    foreach ($tree as $node) {
        $n['type'] = $node->type;
        if ($node->has_child)
            $n['children'] = true;
        if ($node->checked) {
            $n['state'] = array("checked" => true);
        }
        if ($this->input->get('readonly')) {
            $n['state']['checkbox_disabled'] = true;
        }
        $result[] = $n;
    }
    $this->json($result);
}