Fastadmin里面类别多选效果实现

selectcategory: function(form){
                if ($(".selects3", form).size() > 0) {
                  $(".selects3").bind('click',function(){
                    var s1 = '';var p = '';
                    $.ajax({
                        url: '/admin/ajax/readcategory?catid='+$(this).attr("data-pid"),
                        type: 'post',
                        dataType: 'json',
                        async: false,
                        success: function (ret) {
                            $.each(ret.pss,function(k,v){

                            });
                            $.each(ret.ps,function(k,v){

                            });
                            $.each(ret.cs,function(k,v){
                                s1 = s1 + '<li><button class="btn btn-primary currents" id="'+v.id+'"	type="button">'+v.name+'</button>';
                                if(v.child>0){
                                    s1 = s1 + '&nbsp;<button class="btn btn-primary childs" id="'+v.id+'" type="button">&gt;</button></li>';
                                }
                            });
                        }
                    });
                      var s = '<div class="container">';
                      s = s + '<div class="row">';
                          s = s + '<div class="col-xs-12">';
                              s = s + '<ul id="breadcrumb" class="breadcrumb">';
                                  s = s + '<li><a href="javascript:;" title="' + $(this).attr("data-pid") + '">回到顶级</a> <span class="divider">></span></li>';
                              s = s + '</ul>';
                          s = s + '</div>';
                      s = s + '</div>';
                      s = s + '<div class="row">';
                          s = s + '<ul id="dcategory" class="dcategory">';
                          s = s + s1;
                          s = s + '</ul>';
                      s = s + '</div>';
                      s = s + '</div>';
                      $(document).delegate(".breadcrumb a","click",function(){
                          var s = '';var p = '';
                          $.ajax({
                              url: '/admin/ajax/readcategory?catid='+$(this).prop("title"),
                              type: 'post',
                              dataType: 'json',
                              success: function (ret) {
                                  $.each(ret.pss,function(k,v){
                                      p = p + '<li><a href="javascript:;" title="' + v.id + '">';
                                      p = p + v.name + '</a>';
                                      p = p + '<span class="divider">></span></li>';
                                  });
                                  $.each(ret.ps,function(k,v){
                                      p = p + '<li><a href="javascript:;" title="' + v.id + '">';
                                      p = p + v.name + '</a>';
                                      p = p + '<span class="divider">></span></li>';
                                  });
                                  $.each(ret.cs,function(k,v){
                                      s = s + '<li><button class="btn btn-primary currents" id="'+v.id+'"	type="button">'+v.name+'</button>';
                                      if(v.child>0){
                                          s = s + '&nbsp;<button class="btn btn-primary childs" id="'+v.id+'" type="button">&gt;</button></li>';
                                      }
                                  });
                                  $("#breadcrumb").html('<li><a href="javascript:;" title="0">回到顶级</a> <span class="divider">></span></li>'+p);
                                  $("#dcategory").html(s);
                              }
                          });
                      });
                      $(document).delegate("button.childs","click",function(){
                          var s = '';var p = '';
                          $.ajax({
                              url: '/admin/ajax/readcategory?catid='+$(this).prop("id"),
                              type: 'post',
                              dataType: 'json',
                              success: function (ret) {
                                  $.each(ret.pss,function(k,v){
                                      p = p + '<li><a href="javascript:;" title="' + v.id + '">';
                                      p = p + v.name + '</a>';
                                      p = p + '<span class="divider">></span></li>';
                                  });
                                  $.each(ret.ps,function(k,v){
                                      p = p + '<li><a href="javascript:;" title="' + v.id + '">';
                                      p = p + v.name + '</a>';
                                      p = p + '<span class="divider">></span></li>';
                                  });
                                  $.each(ret.cs,function(k,v){
                                      s = s + '<li><button class="btn btn-primary currents" id="'+v.id+'"	type="button">'+v.name+'</button>';
                                      if(v.child>0){
                                          s = s + '&nbsp;<button class="btn btn-primary childs" id="'+v.id+'" type="button">&gt;</button></li>';
                                      }
                                  });
                                  $("#breadcrumb").html('<li><a href="javascript:;" title="0">回到顶级</a> <span class="divider">></span></li>'+p);
                                  $("#dcategory").html(s);
                              }
                          });
                      });
                      //选择当前类别
                      $(document).delegate("button.currents","click",function(){
                            var sbb = '<button class="btn btn-primary" id="'+$(this).prop("id")+'" type="button">'
                            sbb = sbb + $(this).html()+'&nbsp;&nbsp;<span class="fa fa-remove rmove"></span></button>';
                            console.log($(".selected3").html().indexOf(sbb)); 
                            if($(".selected3").html().indexOf(sbb)==-1){
                                $(".selected3").html($(".selected3").html()+'&nbsp;'+sbb);
                                //$(".selected3").html($(this).html());
                                var sc = $("#catid").val();
                                if(sc!=''){
                                    $("#catid").val(sc+','+$(this).prop("id"));    
                                }else{
                                    $("#catid").val($(this).prop("id"));
                                }
                            }
                            layer.closeAll();
                      });
					  //删除当前选择的类别
                      $(document).delegate("span.rmove","click",function(){
                            $(this).parent().remove();
                            var bid = $(this).parent().attr("id");
                            var sary = $("#catid").val().split(',');
                            var sary2 = new Array();
                            for(var i=0; i<sary.length;i++){
                                if(sary[i]!=bid){
                                    sary2.push(sary[i]);
                                }
                            }
                            $("#catid").val(sary2.join(','));
                            layer.closeAll();
                      });
                      var ll = layer.open({
                        type: 1
                        ,title: '选择类别'
                        ,content: s
                        ,anim: 'down'
                        ,closeBtn: true
                        ,area:['90%','90%']
                        ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'

                      });
                      //return ll;
                  });
                }
            }

备注:代码放到js目录下的require-form.js里面。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值