- 前端放一个div用来做为tree的容器。
- 引用jstree.min.js与style.min.css
- 页面下进行初始化
<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>
- 后台提供数据的方法
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);
}
