jQuery仿钉钉组织架构的选择部门功能，移动端完美树形图

在网上找了好久，实在没见到有类似的只能自己写一个

一、功能如图所示，点击选择无限下级功能

二、css

 <style>body{margin:0;padding:0;background:#ffffff}.spaceBetween {display: flex;justify-content: space-between;align-items: center;}.subordinate {border-left: #efecec solid 1px;padding: 0 4px;display: flex;align-items: center;}.subordinate p{font-size:10px;color:#0094ff}.DepartmentTree li {list-style: none;padding: 7px;border-bottom: #efecec solid 1px}.DepartmentTree li:hover {background: #f4f4f4}.DepartmentTree ul {background: #ffffff;padding: 0;margin: 0;}</style>

三、html

<div class="DepartmentTree"><ul id="ulText"><li id="DepartmentLine"><div class="spaceBetween"><p style="display:none">0</p><p>深圳市****公司</p><div class="subordinate"><svg t="1638176598933" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="2068" width="12" height="12"><path d="M384 725.333333c0 21.333333 17.066667 38.4 38.4 42.666667H640v-42.666667c0-21.333333 17.066667-38.4 38.4-42.666666H853.333333c25.6 0 42.666667 17.066667 42.666667 42.666666v170.666667c0 25.6-17.066667 42.666667-42.666667 42.666667h-170.666666c-25.6 0-42.666667-17.066667-42.666667-42.666667v-42.666667h-213.333333c-68.266667 0-123.733333-51.2-128-119.466666V341.333333H170.666667c-21.333333 0-38.4-17.066667-42.666667-38.4V128c0-25.6 17.066667-42.666667 42.666667-42.666667h341.333333c25.6 0 42.666667 17.066667 42.666667 42.666667v170.666667c0 25.6-17.066667 42.666667-42.666667 42.666666H384v128h256v-42.666666c0-21.333333 17.066667-38.4 38.4-42.666667H853.333333c25.6 0 42.666667 17.066667 42.666667 42.666667v170.666666c0 25.6-17.066667 42.666667-42.666667 42.666667h-170.666666c-25.6 0-42.666667-17.066667-42.666667-42.666667v-42.666666H384v170.666666z m426.666667 42.666667h-85.333334v85.333333h85.333334v-85.333333z m0-298.666667h-85.333334v85.333334h85.333334v-85.333334z m-341.333334-298.666666H213.333333v85.333333h256V170.666667z" p-id="2069" fill="#1296db"></path></svg><p>下级</p></div></div></li></ul></div>

四、js

<script src="jquery.min.js"></script><script>let orginization =[{"id": "0","parentid": "null","name": "深圳市****公司"}, {"id": "1","parentid": "0","name": "研发部"}, {"id": "2","parentid": "0","name": "人力行政部"}, {"id": "3","parentid": "1","name": "研发一部"}, {"id": "4","parentid": "1","name": "研发二部"}, {"id": "5","parentid": "2","name": "人力资源中心"}, {"id": "6","parentid": "2","name": "行政中心"}, {"id": "7","parentid": "3","name": "研发一部一小组"}];//部门行点击有下级$(document).on("click", '#DepartmentLine', function () {//获取点击li的idvar uId = $(this).find("p:nth-child(1)").text();getchild(uId);});//部门点击无下级$(document).on("click", '#Department', function () {//获取点击li的idvar uId = $(this).find("p:nth-child(1)").text();console.log(uId)});function getchild(id) {$("#ulText li").remove();//删除标签for (var i = 0; i < orginization.length; i++) {if (orginization[i].parentid == id) {//判断是否存在下级if (WhetherLower(orginization[i].id)) {$("#ulText").append("<li id='DepartmentLine'><div class= 'spaceBetween'><p style='display: none'>" + orginization[i].id + "</p><p>" + orginization[i].name + "</p><div class='subordinate'><svg t='1638176598933' class='icon' viewBox='0 0 1024 1024' version='1.1' p-id='2068' width='12' height='12'><path d='M384 725.333333c0 21.333333 17.066667 38.4 38.4 42.666667H640v-42.666667c0-21.333333 17.066667-38.4 38.4-42.666666H853.333333c25.6 0 42.666667 17.066667 42.666667 42.666666v170.666667c0 25.6-17.066667 42.666667-42.666667 42.666667h-170.666666c-25.6 0-42.666667-17.066667-42.666667-42.666667v-42.666667h-213.333333c-68.266667 0-123.733333-51.2-128-119.466666V341.333333H170.666667c-21.333333 0-38.4-17.066667-42.666667-38.4V128c0-25.6 17.066667-42.666667 42.666667-42.666667h341.333333c25.6 0 42.666667 17.066667 42.666667 42.666667v170.666667c0 25.6-17.066667 42.666667-42.666667 42.666666H384v128h256v-42.666666c0-21.333333 17.066667-38.4 38.4-42.666667H853.333333c25.6 0 42.666667 17.066667 42.666667 42.666667v170.666666c0 25.6-17.066667 42.666667-42.666667 42.666667h-170.666666c-25.6 0-42.666667-17.066667-42.666667-42.666667v-42.666666H384v170.666666z m426.666667 42.666667h-85.333334v85.333333h85.333334v-85.333333z m0-298.666667h-85.333334v85.333334h85.333334v-85.333334z m-341.333334-298.666666H213.333333v85.333333h256V170.666667z' p-id='2069' fill='#1296db'></path></svg><p>下级</p></div></div ></li >");} else {$("#ulText").append("<li id='Department'><div class= 'spaceBetween'><p>" + orginization[i].name + "</p><div class='subordinate'></div></div ></li >");}} else {continue;}}}//是否存在下级function WhetherLower(id) {var sds = true;for (var i = 0; i < orginization.length; i++) {if (orginization[i].parentid == id) {//newArray.push(orginization[i]);return true;} else {continue;}}return false;}</script>

注意：</ svg >是下级前面的图标，是在阿里图标上生成的，如果不要可以换成其他的

jQuery仿钉钉组织架构的选择部门功能，移动端完美树形图相关推荐

飞书组织架构同步（部门和用户） Java-API 的使用
飞书组织架构同步(部门和用户) Java-API使用概述 1.飞书JavaSDK 飞书开放接口JavaSDK是飞书官方开发的一套封装了飞书开放平台请求的Java借口,便于企业应用整合到飞书平台. 具 ...
jQuery仿excel表格实现单元格拆分合并功能
用html的table来布局,定制html模板,调用pd4ml生成要打印的pdf,为了方便添加了一个合并拆分单元格的方法,合并单元格来源于网络,但是有问题自己进行了修改. 网上合并单元格源码如下: & ...
Vue实现仿淘宝商品详情属性选择的功能
先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrAndValuees: [{'attrId': ...
同步钉钉组织架构和人员信息到本地Ldap
最近新系统需要打通人员的组织结构和账号信息,A系统自建的用户体系而B系统是使用的Ldap账号体系,目前要整合账号体系把钉钉的人员组织架构同步到Ldap中,相关的内部系统都是基于OpenLdap进行身份 ...
基于钉钉通讯录，同步构建本地LDAP服务
上一篇<利用飞书通讯录同步搭建本地LDAP>方案发出后,引起不少企业 IT 人员共鸣.本次,宁盾针对使用了钉钉社交应用的企业推出基于钉钉通讯录(组织架构和用户信息)同步搭建本地 LDAP的 ...
浙政钉（专有钉钉）门户免登（超详细）
钉钉家族介绍浙政钉门户免登之前,首先搞清楚几个软件的关系,软件分别是:钉钉,专有钉钉,浙政钉钉钉是阿里巴巴集团专为中小企业打造的沟通和协同的多端平台. 专有钉钉原名政务钉钉,有更开放的设计能 ...
钉钉python实现审批（通过软件和钉钉审批流的结合）
为了实现工单系统,又不想自己去结合钉钉的组织架构实现一套审批流,所以采用钉钉的审批结合自己的系统去实现工单. 由钉钉实现审批流,软件实现查询,记录工单等. 一.具体流程二.具体的实现方式获取tok ...
【钉钉-场景化能力包】如何设计一款OKR酷应用
企业OKR管理的痛点目前OKR主要用于企业的目标管理,自上而下的目标分解.对齐,横向的拉通,对于企业是不小的挑战.OKR业务流程在一些相关的节点,都需要大量的协同与沟通,还需要召开多次会议,推行OK ...
钉钉、钉应用（微应用和E应用）开发介绍
钉钉,数字化新工作方式,让工作更简单目前在钉钉的官网可以看到,超过700万家企业组织正在使用钉钉.笔者也相信,这一数字每天都在增加.获得群众的认可,也是理所当然的,体验过钉钉,就能感觉到,钉钉的考勤 ...

jQuery仿钉钉组织架构的选择部门功能，移动端完美树形图

jQuery仿钉钉组织架构的选择部门功能，移动端完美树形图相关推荐

最新文章

热门文章