jquery封装树形下拉选择组件

最新推荐文章于 2024-05-30 09:54:20 发布
最新推荐文章于 2024-05-30 09:54:20 发布
阅读量1.4k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35504206/article/details/80608833
版权

style样式：

.treeBox{width: 400px;
            border: 1px solid black; margin: 0px auto;
            text-align: center;
            padding: 15px;
        }
        .tree{width: 200px; margin: 0px auto;
            text-align: left;margin-bottom: 20px; }
        .tree .item i{ font-style: normal; cursor: pointer;  line-height: 30px; font-size: 20px;}
        .tree input[type='checkbox']{ margin-right: 5px;}
        .tree .glyphicon{ margin-right: 5px;}
        .hiden{display: none;}
        span.check {position: relative;margin-right: 5px;}
        span.check .input_check {position: absolute;visibility: hidden;}
        span.check .input_check+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #ddd;background-color: white;}
        span.check .input_check:checked+label{
            background-color: #5fb878;
        }
        span.check .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;
            height: 4px; border: 2px solid white;
            border-top-color: transparent;border-right-color: transparent; -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg); transform: rotate(-45deg);}

js的实现：

(function($){
     $.fn.extend({
         tree:function(options) {
             var data = [{"id": 111,"parentId": 0,"number": "2017051012","name": "测试 机构2",
                 "sysList": [{"id": 114,"parentId": 111,"number": "2017051202","name": "测试 服务站4","sysList": []},
                     {"id": 141, "parentId": 111,"number": "112335235","name": "测试 服务站6","sysList": [] },
                     { "id": 143,"parentId": 111,"number": "0123416","name": "qingya","sysList": []},
                     {"id": 148, "parentId": 111,"number": "131654","name": "测试--004","sysList": [
                         {"id": 149,"parentId": 148,"number": "934048","name": "测试--7","sysList": []}]
                     }]
             },
                 {"id": 112,"parentId": 0,"number": "2017051016","name": "测试 服务站13",
                     "sysList": [{"id": 113,"parentId": 112,"number": "2017051208","name": "测试 服务站3","sysList": []}]
                 },
                 {"id": 108,"parentId": 0,"number": "2017051000","name": "测试 机构1",
                     "sysList": [{"id": 109,"parentId": 108,"number": "2017051200","name": "测试 服务站1","sysList": []},
                         { "id": 110,"parentId": 108,"number": "2017051206","name": "测试 服务站2","sysList": [] },
                         { "id": 115,"parentId": 108,"number": "2017051204","name": "测试 服务站5","sysList": []},
                         {"id": 117, "parentId": 108,"number": "12335235","name": "演示站点","sysList": []},
                         { "id": 118,"parentId": 108,"number": "11111100","name": "通州服务站","sysList": [] },
                         {"id": 138, "parentId": 108,"number": "0123","name": "青阳","sysList": []},
                         { "id": 140,"parentId": 108,"number": "3256","name": "青阳","sysList": []},
                         {"id": 146,"parentId": 108,"number": "123464", "name": "青阳", "sysList": []}]
                 }];
             var treeText = "" ;
             var defaluts = {
                 data: data,
                 callback:function(option){

                 }
             };
             var opts = $.extend(defaluts, options); //使用jQuery.extend 覆盖插件默认参数
             var $thisTree = $(this).selector;
             showTree($thisTree,opts.data);

             function showTree(object,arguments){
                 var obj = arguments;
                 for(var i=0;i<obj.length;i++){
                     list(obj[i],0,obj[i].id);
                     $(object).html(treeText);
                 }
             }

             function  list(obj,index) {          //一层一层的循环
                 var length = obj.sysList.length;
                 addItem(obj,index,length);
                 if(length == 0) return;
                 for(var i = 0; i<length; i++) {
                     list(obj.sysList[i],index + 1);
                 }
             }
             function addItem(obj,index,length){    //动态展示这些数据
                 var strObj = JSON.stringify(obj);
                 var leftDid = 30*index+"px";
                 if(index>0){
                     if(length>0){
                         treeText += "<div class='item hiden ' style='padding-left: "+leftDid+"' data-obj='"+strObj+"' data-id = '"+obj.id+"'  data-parentId = '"+obj.parentId+"' data-idLen = '"+index+"'>"+
                                 "<span class='check'><input type='checkbox' value="+obj.id+" class='input_check checkBox' id='"+$thisTree+obj.id+"'><label for='"+$thisTree+obj.id+"'></label></span>"+
                                 "<span class='glyphicon glyphicon-plus ui_block'></span>"+
                                 "<i οnclick='showItem(this,"+length+");'>"+obj.name+"</i>"+
                                 "</div>";
                     }else{
                         treeText += " <div class='item hiden ' style='padding-left: "+leftDid+"' data-obj='"+strObj+"' data-id = '"+obj.id+"' data-parentId = '"+obj.parentId+"' data-idLen = '"+index+"'>"+
                                 "<span class='check'><input type='checkbox' value="+obj.id+" class='input_check checkBox' id='"+$thisTree+obj.id+"'><label for='"+$thisTree+obj.id+"'></label></span>"+
                                 "<i>"+obj.name+"</i>"+
                                 "</div>";
                     }
                 }else{
                     treeText += " <div class='item ' style='padding-left: "+leftDid+"' data-obj='"+strObj+"' data-id = '"+obj.id+"' data-parentId = '"+obj.parentId+"' data-idLen = '"+index+"'>"+
                             "<span class='check'><input type='checkbox' value="+obj.id+" class='input_check checkBox' id='"+$thisTree+obj.id+"'><label for='"+$thisTree+obj.id+"'></label></span>"+
                             "<span class='glyphicon glyphicon-plus ui_block'></span>"+
                             "<i οnclick='showItem(this,"+length+");'>"+obj.name+"</i>"+
                             "</div>";
                 }
             }
             showItem = function(object,len){   //点击父菜单单时，子菜单显示或影藏
                 if(len>0){
                     var togClass = $(object).siblings(".glyphicon").hasClass("glyphicon-plus");
                     if(togClass){
                         $(object).siblings(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
                     }else{
                         $(object).siblings(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
                     }
                 }
                 var parentIndex = $(object).parent("div").attr('data-idLen');
                 var parentTr = $(object).parent("div");
                 while(parentTr.html()&&(parentTr = parentTr.next())) {
                     (+parentTr.attr('data-idLen')==(+parentIndex)+1)&&$(object).siblings(".glyphicon").hasClass("glyphicon-minus")&&parentTr.slideDown("fast");
                     +parentTr.attr('data-idLen')>(+parentIndex)&&$(object).siblings(".glyphicon").hasClass("glyphicon-plus")&&parentTr.slideUp("fast")&&parentTr.find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
                     if(+parentTr.attr('data-idLen')<=(+parentIndex)) {
                         return;
                     }
                 }
             };
             $($thisTree).find(".checkBox").map(function(obj,item){
                 console.log(obj+"------------"+item.tagName);
                   $(item).change(function(){
                       console.log("2----------");
                   })
             })
             $($thisTree).find(".checkBox").change(function(){
                 console.log("check------------");
                 var parentIndex = $(this).parents(".item").attr('data-parentId');
                 var $item = $($thisTree).children(".item");
                 var obj = $(this);
                 $item.map(function(){
                     var $this = $(this);
                     var $currId = $this.attr("data-id");
                     var $parentId = $this.attr("data-parentId");

                     if (!obj.is(":checked")){
                         if($($thisTree).children("[data-parentId="+parentIndex+"]").find("input").is(":checked")){
                             $($thisTree).children("[data-id="+parentIndex+"]").find("input").prop("checked", true);
                         }else{
                             $($thisTree).children("[data-id="+parentIndex+"]").find("input").prop("checked", false);
                         }
                     }

                     if(obj.parents(".item").attr("data-parentId")==$this.attr("data-id")){
                         if (obj.is(":checked")){
                             $this.find("input").prop("checked", true);
                         }
                     }
                     if(obj.parents(".item").attr("data-id")==$this.attr("data-parentId")){
                         if (obj.is(":checked")){
                             $this.find("input").prop("checked", true);
                         }else{
                             $this.find("input").prop("checked", false);
                         }
                     }

                     if($this.find("input").is(":checked")){
                         if($($thisTree).children("[data-id=" + $parentId + "]").find("input").is(":checked")){
                             $($thisTree).children("[data-id=" + $parentId + "]").find("input").prop("checked", true);
                             $($thisTree).children("[data-parentId=" + $currId + "]").find("input").prop("checked", true);
                         }
                         if($($thisTree).children("[data-parentId=" + $currId + "]").find("input").is(":checked")){
                             $($thisTree).children("[data-id=" + $parentId + "]").find("input").prop("checked", true);
                         }
                     }else{
                         if(!$($thisTree).children("[data-id=" + $parentId + "]").find("input").is(":checked")) {
                             if(!$($thisTree).children("[data-parentId=" + $parentId + "]").find("input").is(":checked")){
                                 $($thisTree).children("[data-id=" + $parentId + "]").find("input").prop("checked", false);
                                 $($thisTree).children("[data-parentId=" + $currId + "]").find("input").prop("checked", false);
                             }
                         }
                         if(!$($thisTree).children("[data-parentId=" + $currId + "]").find("input").is(":checked")){
                             if(!$($thisTree).children("[data-parentId=" + $parentId + "]").find("input").is(":checked")){
                                 $($thisTree).children("[data-id=" + $parentId + "]").find("input").prop("checked", false);
                             }
                         }
                     }
                 });
                 opts.callback(getSelect());
             });


             //回调函数
             var getSelect = function(){
                 var checkedValue = [] ;
                 var $item = $($thisTree).children(".item");
                 var selectId = $($thisTree).children(".item").find("input");
                 for(var i=0;i<selectId.length;i++){
                     if(selectId[i].checked){
                         var currObj = $item[i].getAttribute("data-obj");
                         currObj = JSON.parse(currObj);
                         currObj.sysList = undefined;
                         checkedValue.push(currObj)
                     }
                 }
                 return checkedValue;
             }
         }
     })
 }(jQuery));

调用方式：

$("#treeBox").tree({
     callback:function(option){
         console.log("获取选择的数据-----"+JSON.stringify(option));
     }
 });

koga007
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery树形插件下拉列表选择框
06-24
jQuery树形插件下拉列表选择框，数据封装在demoData.js里面，可以自由添加修改。
jQuery树形下拉列表选择框代码
06-10
《jQuery树形下拉列表选择框的实现与应用》 在网页开发中，为了提高用户体验，我们经常需要设计一些交互性更强的元素，比如树形下拉列表选择框。这种控件可以让用户在多级分类中进行选择，既节省空间，又能清晰地...
jQuery EasyUI 表单 - 创建树形下拉框
unber的博客
05-15 368
从上面的代码可以看到，我们为一个名为 'city' 的树形下拉框（ComboTree）字段设置了一个 url 属性，这个字段可以从远程服务器检索树形结构（Tree）数据。在本教程中，我们将要创建一个注册表单，带有 name、address、city 字段。city 字段是一个树形下拉框（ComboTree）字段，在里面用户可以下拉树面板（tree panel），并选择一个特定的城市。树形下拉框（ComboTree）是一个带有下列树形结构（Tree）的下拉框（ComboBox）。创建表单（Form）
jQuery Tree Multiselect - 美观易用的多选树形控件
最新发布
gitblog_00100的博客
05-30 842
jQuery Tree Multiselect - 美观易用的多选树形控件 tree-multiselect.jsjQuery multiple select with nested options项目地址:https://gitcode.com/gh_mirrors/tr/tree-multiselect.js 项目简介 jQuery Tree Multiselect 是一个轻量级的JavaS...
自己写的Jquery DropTree下拉选择树插件
weixin_34187862的博客
05-25 165
原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://dba10g.blog.51cto.com/764602/1188190 闲话少聊,今天本人重点看了看jquery插件开发这一块。想通过代码,实际练下兵。当然,也是为了解决项目的实际需要。平时,我们经常遭遇"选择框"这个控件。 平时，...
jq封装树形下拉选择框组件
GongWei_的博客
08-08 4982
jq封装树形下拉选择框组件
jQuery树形下拉菜单插件ztree，输入框选择树形菜单内容案例
低调哥的博客
01-25 7612
1.引入css rel="stylesheet" href="../../resources/js/plugins/ztree3.5/css/metroStyle/metroStyle.css"> 2.引入js src="../../resources/js/min/jquery-1.9.1.min.js"> src="../../resources/js/plugins/ztr
ajax jquery 树型下拉框
kong_aspx的专栏
12-18 2087
$.ajax({                 url: '../../../../Function/Instance/Common/PartyBiz.asmx/GetOrgList',                 type: 'POST',                 data: { OrgType:1 },                 dataType: 'html',
jQuery树形插件下拉列表选择框.zip
07-04
3. **jQuery EasyUI**: 提供了一系列的前端UI组件，其中包括树形控件和下拉列表，可以方便地组合出所需的树形下拉选择框。 在`说明.htm`文件中，通常会包含关于如何配置和使用这个插件的详细说明，包括HTML结构、...
下拉树jquery
11-23
下拉树jQuery是一种在网页交互设计中常用的组件，它结合了下拉菜单和树形结构的特点，能够以更直观、节省空间的方式展示层次化的数据。在网页开发中，特别是需要处理多级分类或者层级关系时，下拉树jQuery组件特别...
layui扩展组件之树形下拉多选组件
12-19
总结，layui treeselect组件是layui框架中一个强大的工具，通过将zTree的功能集成到layui中，使得开发者能够更加便捷地在前端实现树形结构的下拉多选功能，提高了用户体验和开发效率。正确理解和使用这个组件，能够...
layui组件之树形下拉框
04-22
layui组件之树形下拉框例子，看完你就会写下拉树了。不过同时还需要下载ztree的相关js和style 不过压缩包里都有呢！希望对大家有所帮助
jQuery封装的组件
05-26
NULL 博文链接：https://gaojiewyh.iteye.com/blog/518989
树形下拉组件
10-16
非常棒的树形下拉组件，一个下拉框可以弹出树形结构。支持可编辑，支持ajax加载数据。适合组织机构的选择。更多组件下载请访问：http://www.quickui.net/
树形下拉框控件源码 TreeView In Combox
07-30
下拉框 下拉列表中显示 树 作为选择对象，方便选择一些树形结构的数据
jquery_ztree树形下拉框.rar
06-17
jquery_ztree树形下拉框.rar
如何用jQuery封装插件
aizhanqian5077的博客
12-08 194
引子 现在网上关于js和jquery封装的插件很多，我刚刚接触前端的时候，就很敬佩那些自己写插件的大牛们！因为是他们给网站开发更多的便利，很多网页效果，网上很多现成的插件！那么这些插件是如何写的呢？首先是有扎实的js和jquery技术基础，其次还有一些写插件的方法和技巧。关于js和jquery的技术基础，那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧，本文...
JS组件系列——封装自己的JS组件，你也可以
weixin_33905756的博客
01-17 1070
前言：之前分享了那么多bootstrap组件的使用经验，这篇博主打算研究下JS组件的扩展和封装，我们来感受下JQuery为我们提供$.Extend的神奇，看看我们怎么自定义自己的组件，比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件，我们该如何去做呢，别急，我们慢慢来看看过程。 一、扩展已经存在的组件 1、需求背景 很多时候，我们使用jquery.ajax的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值