highchecktree是一款使用指定源数据生成带复选框的树形结构的jQuery插件。该树形结构插件对于在大数据的处理上性能十分出色。它使用懒加载的形式来提供性能,子节点会在点击时才去加载数据。
该树形结构插件每个节点都带有一个复选框,复选框允许三种选择状态。
使用方法
在页面中引入jQuery和highchecktree.js以及highchecktree.css文件。
<script src="jquery.min.js"></script> <script src="js/highchecktree.js"></script> <link rel="stylesheet" href="css/highCheckTree.css">
初始化插件
首先要准备好你需要的树形结构数据。
var mockData = []; mockData.push({ item:{ id: 'id1', label: 'label1', checked: false }, children: [{ item:{ id: 'id11', label: 'label11', checked: false } },{ item:{ id: 'id12', label: 'label12', checked: false } },{ item:{ id: 'id13', label: 'label13', checked: false } }] }); mockData.push({ item:{ id: 'id2', label: 'label2', checked: false }, children: [{ item:{ id: 'id21', label: 'label21', checked: false } },{ item:{ id: 'id22', label: 'label22', checked: true } },{ item:{ id: 'id23', label: 'label23', checked: false } }] }); mockData.push({ item:{ id: 'id3', label: 'label3', checked: false }, children: [{ item:{ id: 'id31', label: 'label31', checked: true } },{ item:{ id: 'id32', label: 'label32', checked: false }, children: [{ item:{ id: 'id321', label: 'label321', checked: false } },{ item:{ id: 'id322', label: 'label322', checked: false } }] }] });
然后使用下面的方法来在指定的容器中调用该树形结构插件。
$('#tree-container').highCheckTree({ data: mockData });
回调函数
// 当树节点被展开时触发 onExpand: null, // 当树节点被收缩时触发 onCollapse: null, // 在树节点处于checked状态之前触发 onPreCheck: null, // 在树节点处于checked状态时触发 onCheck: null, // 在树节点处于unchecked状态时触发 onUnCheck: null, // 在鼠标滑过节点标签时触发 onLabelHoverOver: null, // 在鼠标滑出节点标签时触发 onLabelHoverOut: null
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!