dtree选择部门或者选择部门下人员复选框单选框插件带搜索

共19个文件

gif：15个

js：2个

css：1个

4星 · 超过85%的资源需积分: 50 155 浏览量 2017-06-30 14:53:10 上传评论 1 收藏 84KB RAR 举报

在IT领域，尤其是在前端开发中，"dtree"通常指的是一个用于展示树形结构数据的JavaScript组件。这个组件常用于构建具有层级关系的数据展示，比如组织结构、文件系统或者导航菜单等。在这个特定的场景中，"dtree选择部门或者选择部门下人员复选框单选框插件带搜索"是一个功能丰富的前端工具，它提供了以下关键知识点： 1. **树形结构数据**：树形结构是一种非线性的数据结构，由节点（部门或人员）和边（上下级关系）组成，每个节点可以有零个或多个子节点。在组织架构中，部门是节点，部门下的员工也是节点，它们通过层级关系相互连接。 2. **选择功能**：插件提供了选择部门和部门下人员的功能，这意味着用户可以通过交互来选择特定的部门或人员。这可能包括单选和多选两种模式，单选通常用于选择单一对象，而多选则允许用户同时选择多个对象。 3. **复选框和单选框**：在前端界面中，复选框和单选框是常见的交互元素，用于用户进行选择。复选框允许用户勾选多项，而单选框则限制用户只能选择一项。在这个插件中，部门和部门下人员的选取可能会用到这两种控件。 4. **搜索功能**：搜索功能是提高用户体验的重要一环。用户可以输入关键词，快速找到想要选择的部门或人员，这对于处理大量数据时非常有用。搜索功能可能基于部门名称或人员姓名进行模糊匹配。 5. **插件化开发**：这个插件的出现表明了前端开发中的模块化思想，它可以方便地集成到其他项目中，提供预定义好的部门和人员选择功能，减少开发者的工作量。 6. **前端框架集成**：尽管没有明确提及，但通常这样的插件会与流行的前端框架如React、Vue或Angular等兼容，方便开发者在这些框架中使用。 7. **API和事件**：为了实现这些功能，dtree插件很可能提供了丰富的API接口和事件系统，允许开发者定制交互行为，如监听选择变化、触发搜索操作等。 8. **响应式设计**：考虑到现代Web应用的跨平台需求，这个插件可能还具备响应式设计，确保在不同设备和屏幕尺寸上都能良好显示和使用。 9. **性能优化**：对于大型组织结构，加载所有节点可能导致性能问题。因此，插件可能采用了懒加载或虚拟滚动等技术，只在需要时加载数据，提高页面性能。 10. **数据源**：该插件需要与后端服务进行交互，获取部门和人员的列表。这通常涉及到Ajax请求，可能使用了RESTful API或者GraphQL等数据获取方式。总结起来，"dtree选择部门或者选择部门下人员复选框单选框插件带搜索"是一个集成了多种功能的前端组件，旨在帮助开发者高效地实现组织结构的展示和选择操作，并提供了搜索功能以提升用户体验。它体现了前端开发中的模块化、交互设计、性能优化等多个重要概念。

资源推荐

资源详情

资源评论

收起资源包目录

dtree.rar （19个子文件）

dtree

index.html 6KB

img

folderopen.gif 376B

nolines_minus.gif 861B

minus.gif 86B

nolines_plus.gif 870B

line.gif 66B

plusbottom.gif 88B

join.gif 69B

remove.gif 65B

empty.gif 62B

plus.gif 89B

minusbottom.gif 85B

joinbottom.gif 66B

page.gif 582B

folder.gif 372B

base.gif 1KB

jquery.js 261KB

dtree.js 23KB

dtree.css 2KB

<html> <head> <meta charset="utf-8"> <title>dtree</title> <link rel="StyleSheet" href="dtree.css" type="text/css" /> <script type="text/javascript" src="dtree.js"></script> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div class="dtree" id="dtree_div"> <p><a href="javascript: d.closeAll();">打开</a> | <a href="javascript: d.openAll();">关闭</a></p> <input id="dosearch_text" type="text" /> <input id="dosearch" type="button" value="查询" onclick="nodeSearching() " /> <script type="text/javascript"> d = new dTree('d', true); //参数一: 树名称。参数二：单选多选 true多选 false单选默认单选 d.add(0, -1, '权限管理'); d.add(1, 0, 'authority', '0001', '日常工作', true, false); d.add(2, 1, 'authority', '0002', '新建工作', true, false); d.add(3, 2, 'authority', '0003', '人事 ', true, false); d.add(4, 2, 'authority', '0004', '财务', false, false); d.add(5, 2, 'authority', '0005', '客服', false, false); d.add(15, 3, 'authority', '0006', '请假申请', false, false); d.add(16, 3, 'authority', '0007', '出差申请', false, false); d.add(17, 3, 'authority', '0008', '招聘申请', false, false); // dTree实例属性以此为：节点ID，父类ID，chechbox的名称，chechbox的值，chechbox的显示名称， //chechbox是否被选中--默认是不选，chechbox是否可用：默认是可用，节点链接：默认是虚链接 d.add(6, 0, 'authority', '0012', '一级菜单2 ', true, false); d.add(7, 6, 'authority', '0013', '二级菜单2 ', true, false); d.add(8, 7, 'authority', '0014', '用户管理 ', false, false); d.add(9, 7, 'authority', '0015', '用户组管理 ', false, false); d.add(11, 0, 'authority', '0016', '一级菜单3 ', true, false); d.add(12, 11, 'authority', '0017', '二级菜单3 ', true, false); d.add(13, 12, 'authority', '0018', '用户管理 ', false, false); d.add(14, 12, 'authority', '0019', '用户组管理 ', false, false); d.add(20, 0, 'authority', '0020', '测试', true, false); document.write(d); d.openAll(); </script> </div> <div class="selectorResult"> 选择结果： <ul id="ulSelected">  </ul> </div>  </body> </html> <script type="text/javascript"> function test() { var count = 0; var obj = document.all.authority; for (i = 0; i < obj.length; i++) { if (obj[i].checked) { alert(obj[i].value); count++; } } } //搜索节点并展开节点 function nodeSearching() { var dosearch = $.trim($("#dosearch_text").val());//获取要查询的文字 var dtree_div = $("#dtree_div").find(".dtree_node").show().filter(":contains('" + dosearch + "')");//获取所有包含文本的节点 $.each(dtree_div, function (index, element) { var s = $(element).attr("node_id"); d.openTo(s);//根据id打开节点 }); } </script> <script type="text/javascript"> //#region 页面执行入口 $(document).ready(function () { //#region 浏览器检测相关方法 window["MzBrowser"] = {}; (function () { if (MzBrowser.platform) return; var ua = window.navigator.userAgent; MzBrowser.platform = window.navigator.platform; MzBrowser.firefox = ua.indexOf("Firefox") > 0; MzBrowser.opera = typeof (window.opera) == "object"; MzBrowser.ie = !MzBrowser.opera && ua.indexOf("MSIE") > 0; MzBrowser.mozilla = window.navigator.product == "Gecko"; MzBrowser.netscape = window.navigator.vendor == "Netscape"; MzBrowser.safari = ua.indexOf("Safari") > -1; if (MzBrowser.firefox) var re = /Firefox(\s|\/)(\d+(\.\d+)?)/; else if (MzBrowser.ie) var re = /MSIE( )(\d+(\.\d+)?)/; else if (MzBrowser.opera) var re = /Opera(\s|\/)(\d+(\.\d+)?)/; else if (MzBrowser.netscape) var re = /Netscape(\s|\/)(\d+(\.\d+)?)/; else if (MzBrowser.safari) var re = /Version(\/)(\d+(\.\d+)?)/; else if (MzBrowser.mozilla) var re = /rv(\:)(\d+(\.\d+)?)/; if ("undefined" != typeof (re) && re.test(ua)) MzBrowser.version = parseFloat(RegExp.$2); })(); }); //显示删除 function showRemove(obj) { $(obj).addClass("remove"); } //隐藏删除 function hideRemove(obj) { $(obj).removeClass("remove"); } //鼠标移动到删除图标，显示手（pointer） function setRemove(obj, event) { var width = $(obj).width(); var left = $(obj).position().left; var e = event || window.event; var x = IsIE(GetVersion()) ? e.x : e.pageX; if (x > left + width - 9) { $(obj).css("cursor", "pointer") } else { $(obj).css("cursor", "default") } } function GetVersion() { return MzBrowser.version; } function GetName() { var name = "undefined"; if (MzBrowser.ie) { name = "ie"; } else if (MzBrowser.firefox) { name = "firefox"; } else if (MzBrowser.safari) { name = "safari"; } return name; } function IsIE(versionValue) { if (versionValue == 11) { return IsIE11(); } var name = GetName(); var version = GetVersion(); return name == 'ie' && parseInt(version) == versionValue; } </script>

评论收藏

内容反馈