# treeSelect

**Repository Path**: ChenL0ng/treeSelect

## Basic Information

- **Project Name**: treeSelect
- **Description**: jquery+ztree实现下拉树基本组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# treeSelect

#### 介绍
jquery+ztree实现下拉树基本组件

#### 使用说明
目前仅支持单选，未来会升级成支持多选(已增加多选功能)
插件依赖jQuery库及ztree开源插件
（切记要引入jQuery.js、ztree.js及ztree的样式文件）

html
```
<div id="treeSelect" style="width: 240px;display:inline-block"></div>
```

js
```
var data = [ {
		    "CHR_NAME" : "全国",
		    "CHR_CODE" : "00",
		    "DISPLAY_NAME" : "00 全国",
		    "CHR_ID" : "B5BBAB08B0694532B6DE3E296DCD5791",
		    "PARENT_ID" : null
		  }, {
		    "CHR_NAME" : "北京市",
		    "CHR_CODE" : "11",
		    "DISPLAY_NAME" : "11 北京市",
		    "CHR_ID" : "49EE8B9DD42E4628A5B24EBE86EC2A26",
		    "PARENT_ID" : "B5BBAB08B0694532B6DE3E296DCD579D"
		  }, {
		    "CHR_NAME" : "北京市本级",
		    "CHR_CODE" : "1100",
		    "DISPLAY_NAME" : "1100 北京市本级",
		    "CHR_ID" : "321C8FF6CC6046D79CD8877526054BCF",
		    "PARENT_ID" : "49EE8B9DD42E4628A5B24EBE86EC2A26"
		  }, {
		    "CHR_NAME" : "市辖区",
		    "CHR_CODE" : "1101",
		    "DISPLAY_NAME" : "1101 市辖区",
		    "CHR_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA",
		    "PARENT_ID" : "49EE8B9DD42E4628A5B24EBE86EC2A26"
		  }, {
		    "CHR_NAME" : "东城区",
		    "CHR_CODE" : "110101",
		    "DISPLAY_NAME" : "110101 东城区",
		    "CHR_ID" : "B08F7DB39F124ACFB2171508D8C5C0FD",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "西城区",
		    "CHR_CODE" : "110102",
		    "DISPLAY_NAME" : "110102 西城区",
		    "CHR_ID" : "2AF3A9766AAD433A95D4EADE5FB97839",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "朝阳区",
		    "CHR_CODE" : "110105",
		    "DISPLAY_NAME" : "110105 朝阳区",
		    "CHR_ID" : "A2058EAE12674B3D9BA3710C87DDB111",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "丰台区",
		    "CHR_CODE" : "110106",
		    "DISPLAY_NAME" : "110106 丰台区",
		    "CHR_ID" : "C6BC2FE9FE86493291EE59171133ABB5",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "石景山区",
		    "CHR_CODE" : "110107",
		    "DISPLAY_NAME" : "110107 石景山区",
		    "CHR_ID" : "06E478CB634F4FC19EC0381D55751218",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "海淀区",
		    "CHR_CODE" : "110108",
		    "DISPLAY_NAME" : "110108 海淀区",
		    "CHR_ID" : "DD0B1A29473D4053989938700B73AE26",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "门头沟区",
		    "CHR_CODE" : "110109",
		    "DISPLAY_NAME" : "110109 门头沟区",
		    "CHR_ID" : "5D3FF6E7729E43F9B813EAAB80796E41",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "房山区",
		    "CHR_CODE" : "110111",
		    "DISPLAY_NAME" : "110111 房山区",
		    "CHR_ID" : "349609893FAC47BC97509B8FC411059A",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "通州区",
		    "CHR_CODE" : "110112",
		    "DISPLAY_NAME" : "110112 通州区",
		    "CHR_ID" : "1E5B2DC4A1E84C959BB78D6E1B49A1DF",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "顺义区",
		    "CHR_CODE" : "110113",
		    "DISPLAY_NAME" : "110113 顺义区",
		    "CHR_ID" : "2C9DC40AEFF8454ABF8A2EE6AD0A2DB5",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "昌平区",
		    "CHR_CODE" : "110114",
		    "DISPLAY_NAME" : "110114 昌平区",
		    "CHR_ID" : "5C0342E4E41841AD837E365DB79E81B7",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "大兴区",
		    "CHR_CODE" : "110115",
		    "DISPLAY_NAME" : "110115 大兴区",
		    "CHR_ID" : "DF25016580634FD39307FC0E18E7CF4F",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "怀柔区",
		    "CHR_CODE" : "110116",
		    "DISPLAY_NAME" : "110116 怀柔区",
		    "CHR_ID" : "8DC99ABF109D40ED899552A08FE07C63",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "平谷区",
		    "CHR_CODE" : "110117",
		    "DISPLAY_NAME" : "110117 平谷区",
		    "CHR_ID" : "9D2DA21BD26C40CC90B8BB26E1B437AC",
		    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
		  }, {
		    "CHR_NAME" : "县",
		    "CHR_CODE" : "1102",
		    "DISPLAY_NAME" : "1102 县",
		    "CHR_ID" : "E8ADAB8AFDB24F77B3FA89ED7E9A9F15",
		    "PARENT_ID" : "49EE8B9DD42E4628A5B24EBE86EC2A26"
		  }, {
		    "CHR_NAME" : "密云县",
		    "CHR_CODE" : "110228",
		    "DISPLAY_NAME" : "110228 密云县",
		    "CHR_ID" : "AD5172DDD7D547F5A06F022D64EB4DF5",
		    "PARENT_ID" : "E8ADAB8AFDB24F77B3FA89ED7E9A9F15"
		  }, {
		    "CHR_NAME" : "延庆县",
		    "CHR_CODE" : "110229",
		    "DISPLAY_NAME" : "110229 延庆县",
		    "CHR_ID" : "78B4DA4936A44314AD801B15988707D4",
		    "PARENT_ID" : "E8ADAB8AFDB24F77B3FA89ED7E9A9F15"
		  }]
		        
var select = $("#treeSelect").treeSelect({
                    idKey: 'CHR_ID',         //节点id
	            pIdKey: 'PARENT_ID',     //父节点id
	            name: 'DISPLAY_NAME',    //节点显示的名称
                    multiSelect: false,      //是否多选标志  
	            data: data,              //节点数据
                    callback: function(obj){    //节点选中回调（返回参数为节点对象）
            
                    }
            })

//获取选中的节点数据
select.getCheckedNodes(); //返回一个数组对象

//手动选中节点
//nodes为数组，非多选时只会取第一个节点数据选择
var nodes = [{
	    "CHR_NAME" : "大兴区",
	    "CHR_CODE" : "110115",
	    "DISPLAY_NAME" : "110115 大兴区",
	    "CHR_ID" : "DF25016580634FD39307FC0E18E7CF4F",
	    "PARENT_ID" : "157EAB9EA1A34D0F824E97C2C7D9F0CA"
	  }]
select.setCheckedNodes(nodes);
```