光年模板说明文档
主题
字号
18px

lyear-dropdowntree下拉树状

下拉树状菜单插件实在太少，唯一找到的插件DropDownTree，也并不符合需求。所以这里自己弄了个下拉树状菜单的插件，支持单选和多选。可能会有一些bug存在。

.lyear-dropdown-tree {
    position: relative;
}
.lyear-dropdown-tree .checkbox-box,
.lyear-dropdown-tree .radio-box {
    font-size: 15px;
    cursor: pointer;
}
.lyear-dropdown-tree .arrow {
    margin-left: -15px;
}
.lyear-dropdown-tree .checkbox-box:before {
    content: "\F131";
}
.lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-checked:before {
    content: "\F135";
}
.lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-half-checked:before {
    content: "\F6F1";
}
.lyear-dropdown-tree .radio-box:before {
    content: "\F130";
}
.lyear-dropdown-tree .radio-box.lyear-dropdown-tree-checked:before {
    content: "\F134";
}
.lyear-dropdown-tree .radio-box.lyear-dropdown-tree-half-checked:before {
    content: "\F377";
}
.lyear-dropdown-tree .dropdown-menu {
    min-width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    padding-bottom: 13px;
}
.lyear-dropdown-tree .dropdown-menu > li {
    margin-left:  15px;
}
.lyear-dropdown-tree .dropdown-menu li ul {
    list-style: none;
    padding-left: 25px;
}
.lyear-dropdown-tree .dropdown-menu li ul a {
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    padding: 3px 20px;
}
.lyear-dropdown-tree .dropdown-menu li a {
    display: inline-block;
    padding-left: 15px!important;
}
.lyear-dropdown-tree .dropdown-menu li a.lyear-dropdown-tree-a-checked {
    color: #33cabb;
}
.lyear-dropdown-tree .dropdown-menu a:hover,
.lyear-dropdown-tree .dropdown-menu a:active,
.lyear-dropdown-tree .dropdown-menu a:focus {
    background-color: transparent;
}
.lyear-dropdown-tree .form-control {
    padding-right: 30px;
    cursor: pointer;
}
.lyear-dropdown-tree i.lyear-cert {
    font-size: 20px;
    position: absolute;
    top: 3px;
    right: 5px;
}
<div class="form-group">
  <label>选择栏目</label>
  <div class="lyear-dropdown-tree">
    <input type="text" class="form-control" value="" placeholder="请选择你要发布的栏目" data-toggle="dropdown">
  </div>
</div>

示例中的数据，直接设定为数据变量，你也可以根据自己情况从后端获取。

var data = [
    {
      id: 1,
      title:"北京市",
      children: [
          {id: 101, title:"东城区"},
          {id: 102, title:"西城区"},
          {id: 103, title:"朝阳区"}
      ]
    },
    {
      id: 2,
      title:"天津市",
      children: [
          {id: 201, title:"和平区"},
          {id: 202, title:"河东区"},
          {id: 203, title:"河西区"}
      ]
    },
    {
      id: 3,
      title:"河北省",
      children: [
        {
            id: 301,
            title:"石家庄",
            children: [
                {id:3011, title: '长安区'},
                {id:3012, title: '桥西区'},
                {id:3013, title: '新华区'},
                {id:3014, title: '井陉矿区'},
                {id:3015, title: '裕华区'},
                {id:3016, title: '藁城区'},
                {id:3017, title: '鹿泉区'},
                {id:3018, title: '栾城区'},
            ]
        },
        {id: 302, title:"邯郸"},
        {id: 303, title:"保定"}
      ]
    }
];

var test = $('.lyear-dropdown-tree').lyearDropdownTree({
    data : data,
    multiSelect : false,
    jsonStr : ',',
    selectedData : [3017,3018],
    relationParent : true,
    relationChildren : true,

    checkHandler: function(el) {
        //console.log("checked ", el);
    },
});

以下是对参数的一些注释：

var test = $('.lyear-dropdown-tree').lyearDropdownTree({
    data : data,                    // 树状结构数据
    multiSelect : true,             // 是否多选，默认true
    jsonStr : ',',                  // 数据分割符，默认','，例如获取选中数据会返回：1,2,3
    selectedData : [3017,3018],     // 当前已选中的数据，默认[]
    relationParent : true,          // 是否关联父类(主要用于多选)，默认true，设置为false，则选中父类，子类不会选中
    relationChildren : true,        // 是否关联子类(主要用于多选)，默认true，设置为false，则子类全部选中，父类不会选中

    checkHandler: function(el) {    // 回调
        console.log(el);
    },
});

方法

方法名 说明
setSelectedItem 设置选中项，如果是单选，则只设置最后一个为选中（可以在初始化时候指定选中项，也可以单独调用方法设定）
getSelectedText 获取选中项文字
getSelectedID 获取选中项ID

插件项目中页面名字：test_dropdowntree.html test_dropdowntree_v4.html

点击查看 下拉树状菜单 在线演示

涉及的文件：