# combotree

**Repository Path**: tkgl/combotree

## Basic Information

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

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2023-07-12
- **Last Updated**: 2023-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# combotree

#### 介绍
基于layui及zTree的树下拉框组件,把zTree也封装成了layui的模块,无需另外引用,下来面板改为追加到body,防止某种情况下被遮挡

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

#### 例子截图
![输入图片说明](1.png)


#### 安装教程
下载layztree目录和combotree.js文件放在web工程的js相关文件static目录即可。

#### 使用说明

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

layui.use(['layztree','combotree'],function() {
  var layztree = layui.layztree;
  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，多个的时候以逗号分隔
    ,callback: {
      layonClick: function (event, treeId, treeNode) {
        //点击后打算做什么
      },
      layonCheck: function (event, treeId, treeNode) {
        //选中后打算做什么
      },
    }
  });  

})
```


#### 参与贡献

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