# combotree

**Repository Path**: chaoyinsu2010/combotree

## Basic Information

- **Project Name**: combotree
- **Description**: 基于layui及zTree的树下拉框组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-04-25
- **Last Updated**: 2024-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# combotree

#### 介绍
基于layui及zTree的树下拉框组件

#### 软件架构
在基于Layui开发后台管理系统时，想要一个下拉树控件控件，在网上找了一些开源的实现，都不是太满意，于是自己动手基于Layui 2.8.x及zTree 3.5.x制作了一个下拉树控件。实现了一个能用的版本，并不十分完善，有问题请自行修改或提出修改方案。

#### 例子截图
![单选](1.png)![多选](%E5%A4%9A%E9%80%89.png)


#### 安装教程
下载combotree.js及layztree目录放在web工程的js相关静态资源文件保存目录即可。

#### 使用说明

```
// 配置
layui.config({
  base: getCtxPath() + '/lib/extends/' // 假设这是存放拓展模块的根目录
}).extend({
  combotree: 'combotree'
});

layui.use(['combotree'],function() {
  var combotree = layui.combotree;
  // 渲染
  combotree.render({
    elem: '#elementId'
    ,placeholder: '请选择'
    ,isMultiple: false    // 是否多选，默认是单选
    ,yChkboxType: 'ps'    // 参考zTree该参数
    ,nChkboxType: 'ps'    // 参考zTree该参数
    ,expandLevel: '2'     // 默认展开的层级
    ,ajaxUrl: '/xxxxx'    // 取得树数据的url
    ,readonly: false      // 是否只读模式
    ,layVerify: 'required' // 是否是必选项目
    ,initValue: '100'      // 初期选中值，该值为树节点数据的ID，多个的时候以逗号分隔
  });  

})
```


#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request