使用jstree自定义下拉菜单树组件

开发背景:

        每次都很啰嗦,要先陈述一下开发背景。不过,这样做的目的一来是让自己能够快速回忆起自己的实战背景,二来是类似引子,能够阐述这样处理的实际用途,不仅仅是用于理论学习。

        今天记录下的是前几天开发的一个下拉框组件,该组件内容是一棵菜单树。本来系统开发的时候使用的是BUI,BUI本身也有下拉树组件。只是因为我们使用的BUI版本比较早,今年的版本和去年的在某些方面不兼容,如果一次性替换,会引起很多js报错。又因为近期使用过就是jstree,测试过几万条节点数据的加载性能,相比BUI,渲染速度有优秀很多(BUI并不能胜任这个数量级)。所以,干脆自己封装一个组件。具体要求,我总结了一下:

 

自定义下拉框,该下拉框内容为菜单树。下拉框操作规则同其他BUI下拉框组件,但是封装方式并非使用BUI封装方式,而是自定义封装。所以需要测试如下功能 
①菜单树节点被选中,会将值显示在输入框,满足多选功能,用逗号分隔 
②菜单树初始化会将存储的节点名称显示在输入框,并且菜单树相应节点会被触发选中 
③提供清空功能,点击清空按钮,下拉框所有选中节点都会清空,并且输入框值也清空;清空按钮在菜单树被选中的情况下显示,在没有选中的情况下隐藏 
④下拉框在单击输入框和下拉标签的情况下会显示出来,在单击下拉框区域外的所有位置都会自动收缩 
⑤查询界面的下拉框的清空功能和“重置”按钮联动 

 

 

 

实战结果:

        这里,有使用到很多封装细节,因为时间问题,初稿不做太多细节表述,重点在代码中有做注释。直接上代码:

 

首先前端html:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%-- 显示输入框 --%>
<div class="rmp-span">
		<label class="rmp-control-label">部门归属</label>
			<div class="rmp-control-text">
				<div id="department" class="bui-cncselectfilter bui-suggest bui-combox bui-select" aria-disabled="false" tabindex="0" hidefocus="true" aria-pressed="false">
					<input type="text" class="bui-select-input" /><span class="icon-delelte-input"><i class="icon-remove-sign-select"></i></span><span class="x-icon x-
  • 7
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
好的,以下是一个使用 JavaScript 实现的 tree 树形单选组件的示例代码: HTML: ```html <div id="tree"></div> ``` JS: ```javascript // 树形数据 const treeData = [ { id: '1', label: '节点1', children: [ { id: '1-1', label: '节点1-1', children: [ { id: '1-1-1', label: '节点1-1-1' }, { id: '1-1-2', label: '节点1-1-2' } ] }, { id: '1-2', label: '节点1-2' } ] }, { id: '2', label: '节点2' } ] // 递归生成树形节点 function createTreeNode(data) { const ul = document.createElement('ul') for (let i = 0; i < data.length; i++) { const li = document.createElement('li') const label = document.createElement('label') const checkbox = document.createElement('input') checkbox.type = 'checkbox' checkbox.name = 'tree-node' checkbox.value = data[i].id label.appendChild(checkbox) label.appendChild(document.createTextNode(data[i].label)) li.appendChild(label) if (data[i].children && data[i].children.length) { li.appendChild(createTreeNode(data[i].children)) } ul.appendChild(li) } return ul } // 获取选中的节点 function getSelectedNode() { const nodeList = document.getElementsByName('tree-node') for (let i = 0; i < nodeList.length; i++) { if (nodeList[i].checked) { return nodeList[i].value } } return null } // 渲染树形组件 function renderTree() { const tree = document.getElementById('tree') tree.appendChild(createTreeNode(treeData)) tree.addEventListener('click', function (event) { const target = event.target if (target.nodeName === 'INPUT' && target.type === 'checkbox') { const nodeList = document.getElementsByName('tree-node') for (let i = 0; i < nodeList.length; i++) { if (nodeList[i] !== target) { nodeList[i].checked = false } } } }) } renderTree() ``` 这段代码会渲染一个树形节点,并且支持单选功能。每个节点都有一个复选框,选中一个节点时,会取消其他节点的选中状态。你可以根据自己的需求修改代码,实现更加复杂的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值