轻量级的原生js权限树插件(原创)

所属分类:导航-文件树

轻量级的原生js权限树插件(原创) ie兼容8

YnTree

YnTree是一款专门用于权限管理的权限树插件,它依靠数据来驱动,不依赖于任何别的插件并且支持ajax。

基本使用

<div id="tree" class=" fl tree"></div>
var options = {
    checkStrictly: true,
    data:[
        {
            name: "系统管理",
            inputName: "system",
            value: "系统管理",
            children: [
                {
                    name: "用户管理",
                    inputName: "user",
                    value: "用户管理",
                    className: "",
                    checked: false,
                    disabled: false,
                    datas: {},
                    children: [
                        {
                            name: "添加用户",
                            inputName: "user",
                            value: "添加用户",
                            checked: false,
                            disabled: true
                        },
                        {
                            name: "查看用户",
                            inputName: "user",
                            value: "查看用户"
                        },
                        {
                            name: "编辑用户",
                            inputName: "user",
                            value: "编辑用户",
                            disabled: true,
                            children: [
                                {
                                    name: "删除用户",
                                    inputName: "user",
                                    value: "删除用户"
                                },
                                {
                                    name: "修改用户",
                                    inputName: "user",
                                    value: "修改用户",
                                    checked: false
                                }
                            ]
                        }
                        
                    ]
                },
                {
                    name: "投诉管理",
                    inputName: "complaint",
                    value: "投诉管理",
                    checked: false,
                    children: [
                        {
                            name: "添加投诉",
                            inputName: "complaint",
                            value: "添加投诉"
                        },
                        {
                            name: "删除投诉",
                            inputName: "complaint",
                            value: "删除投诉"
                        },
                        {
                            name: "编辑投诉",
                            inputName: "complaint",
                            value: "编辑投诉"
                        },
                        {
                            name: "查看投诉",
                            inputName: "complaint",
                            value: "查看投诉"
                        }
                    ]
                }
            ]
        },
        {
            name: "我的公司",
            inputName: "company",
            value: "我的公司",
            children: [
                {
                    name: "公司管理",
                    inputName: "company manage",
                    value: "公司管理"
                },
                {
                    name: "部门管理",
                    inputName: "department manage",
                    value: "部门管理"
                }
            ]
        }
    ]
};
var yntree = new YnTree(document.getElementById("tree"), options);

options配置说明

options必须是一个对象,该对象包含着实例化YnTree所需的各种参数。

data属性(当数据为异步加载时,data属性可为空数组)

data必须是一个数组,这个数组中包含着整棵树的所有节点,在权限树中这个数据就是所有的权限。(当数据为异步加载时,data属性可为空数组,在数据获取后再调用reInit()方法即可)数组中的每一项必须是一个对象,该对象的结构如下:

{
    /*节点名称*/
    name: "用户管理",
    /*节点中的复选框的name属性值*/
    inputName: "user",
    /*复选框的value属性值*/
    value: "用户管理",
    /*需要添加到复选框中的class name*/
    className: "",
    /*复选框是否选中*/
    checked: false,
    /*复选框是否禁用*/
    disabled: false,
    datas: {},
    /*节点的子节点*/
    children: []
}

onchange回调

节点change事件,每当复选框选中或取消选中时都会触发此回调函数,触发时会传递两个参数过去,一个是input(当前触发的复选框),另一个是ynTree(当前树对象)。

checkStrictly属性

checkStrictly表示是否严格的遵循父子互相关联的做法,默认为true。如果为false,则点击子节点父节点不会选中,如果当前子节点还有子节点,则子节点也不会选中。

YnTree实例方法

select(condition, flag)

据id、复选框的值或复选框设置复选框选中或不选中。

  • condition {stirng、dom} id、复选框的值或复选框

  • flag {boolean} 选中或不选中

  • 返回值 {object} 返回当前树对象

disable(condition, flag)

据id、复选框的值或复选框设置复选框可用或不可用。

  • condition {stirng、dom} id、复选框的值或复选框

  • flag {boolean} 可用或不可用

  • 返回值 {object} 返回当前树对象

spread(condition, flag)

据id、复选框的值或复选框设置节点展开或收缩。

  • condition {stirng、dom} id、复选框的值或复选框

  • flag {boolean} 展开或收缩

  • 返回值 {object} 返回当前树对象

getCheckedInputs()

获取所有选中的复选框

  • 返回值 {array} 返回所有选中的复选框

getValues()

获取所有选中的复选框的值

  • 返回值 {array} 返回所有选中的复选框的值

reInit([data])

重新初始化权限树,当通过ajax获取数据时可以通过此方法重新初始化权限树

  • data {array} 权限树数据,这是一个可选参数

  • 返回值 {object} 返回当前树对象

destroy()

销毁当前树

  • 返回值 {undefined} undefined

节点实例方法

selectDown(flag)

树节点一直向下寻找子节点,并将子节点选中。当前节点不会选中

  • data {flag} 当前节点下的所有子节点是否全部选中

  • 返回值 {object} 返回当前节点对象

selectUp(flag)

树节点一直向上寻找父节点,并将父节点选中。当前节点不会选中

  • data {flag} 当前节点的所有父节点是否全部选中

  • 返回值 {object} 返回当前节点对象

select(flag)

设置当前节点选中或不选中。如果当前节点有子节点,则调用selectDown向下查找将当前子节点全部选中或不选中,然后再调用selectUp向上查找将当前节点的所有父节点都选中或不选中。

  • data {flag} 当前节点是否选中

  • 返回值 {object} 返回当前节点对象

disable(flag)

设置当前节点可用或不可用。

  • data {flag} 当前节点是否可用或不可用

  • 返回值 {object} 返回当前节点对象

spread([flag])

设置当前节点展开或收缩。

  • data {flag} 当前节点展开或收缩,可选参数,如果不传参数则会自动切换节点展开或收缩

  • 返回值 {object} 返回当前节点对象

getYnTree(id)

根据当前节点中的树id获取权限树

  • data {id} 树id

  • 返回值 {object} 返回当前节点所属的权限树

相关插件-文件树

jQuery表格树插件TreeGrid

网上找的源码经过自己修改亲测可以兼容ie5及以上版本应该可以兼容jquery1.3以上的所有版本.由于是开源的如果兼容性有问题可以直接修改里面的代码.
  文件树
 54697  89

基于bootstraptreeview无限分类树层级联动菜单

基于bootstraptreeview做的一个漂亮的无限分类树层级联动菜单
  文件树
 13303  42

树控件

非常简单的树控件,代码中注释说明很详细,方便大家修改。
  文件树
 24139  39

带有复选框可折叠的树形结构

该插件是我改良的layer的树形插件,在原始的layer插件中的树形结构是没有复选框的,经我修改后可用以拿来做权限系统的权限选择
  文件树
 44545  178

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    0
    2018/6/14 15:49:06
    有没有全选和半全选, 比如我选中北京市北京市地下所有的区域都被选中了, (全选)当我选中北京市底下的 一 个区时 这个北京市处半全选状态(半全选)
        xta fnhc tewq0
        2018/6/15 9:40:30
        暂时没有做这个功能
    回复
    巴维尔 0
    2018/6/11 15:47:29
    贵啊????
        xta fnhc tewq0
        2018/6/12 15:24:10
        兄弟觉得插件不好用或者有bug都可以提出来,我会尽快改善
    回复
取消回复