Light-Year-Example
/
test_dropdowntree.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>下拉树状菜单 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<style>
.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;
}
</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>下拉树状菜单 bootstrap-lyear-dropdowntree</h4></div>
        <div class="card-body">

          <p>下拉树状菜单插件实在太少，唯一找到的插件DropDownTree，也并不符合需求。所以这里自己弄了个下拉树状菜单的插件，支持单选和多选。</p>
          <h5 class="m-b-10">示例一：</h5>
          <div class="form-group">
            <label>选择栏目</label>
            <div class="lyear-dropdown-tree">
              <input type="text" class="form-control" value="" placeholder="请选择你要发布的栏目" data-toggle="dropdown">
            </div>
          </div>
          <div class="form-group">
            <button class="btn btn-default example-1">获取选中值的ID</button>
            <button class="btn btn-default example-2">获取选中值的文字</button>
          </div>
          <div class="form-group">
            <pre id="consolebox"></pre>
          </div>
          <div class="form-group">
            <p>初始化代码</p>
            <pre>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);
	},
});</pre>
          </div>
          <table class="table table-bordered">
            <tr>
              <th width="10%">方法名</th>
              <th>说明</th>
            </tr>
            <tr>
              <td>setSelectedItem</td>
              <td>设置选中项，如果是单选，则只设置最后一个为选中（可以在初始化时候指定选中项，也可以单独调用方法设定）</td>
            </tr>
            <tr>
              <td>getSelectedText</td>
              <td>获取选中项文字</td>
            </tr>
            <tr>
              <td>getSelectedID</td>
              <td>获取选中项ID</td>
            </tr>
          </table>

        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.lyear.dropdowntree.min.js"></script>
<script type="text/javascript">
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);
	},
});

$('.example-1').click(function() {
    if (test.getSelectedID().length == 0) {
        consolebox.append("你没有做出选择\n");
    } else {
       consolebox.append(test.getSelectedID()+"\n");
    }
})

$('.example-2').click(function() {
    if (test.getSelectedText().length == 0) {
        consolebox.append("你没有做出选择\n");
    } else {
       consolebox.append(test.getSelectedText()+"\n");
    }
})
</script>
</body>
</html>