草庐IT

微信小程序做类似vue的级联选择功能,使用picker-view-column+checkbox-group完成

徐小姐的先生7 2023-09-22 原文

直接上图

主要代码

#wxml

 <picker-view class="bj" indicator-style="height: 50px;"  value="{{value}}" bindchange="bindChange">

      <picker-view-column>

        <view wx:for="{{typeshool}}" bindtap="onclack" mark:id="{{item.classifyId}}"  wx:key="index" style="line-height: 50px; text-align: center;"> <checkbox-group class="agreement" mark:id="{{item.classifyId}}"  bindchange="xieyi">

       <checkbox class="cb" checked="{{selected}}"></checkbox>

       {{item.classifyName}}

     </checkbox-group> </view>

      </picker-view-column>

      <picker-view-column>

        <view wx:for="{{typeshool_l}}" bindtap="onclack_k" mark:id="{{item.classifyId}}" wx:key="index" style="line-height: 50px; text-align: center;"> <checkbox-group class="agreement" mark:id="{{item.classifyId}}"  bindchange="xieyi">

       <checkbox class="cb" checked="{{item.selected}}"></checkbox>

       {{item.classifyName}}

     </checkbox-group></view>

      </picker-view-column>

      <picker-view-column>

        <view wx:for="{{typeshool_k}}" wx:key="index" style="line-height: 50px; text-align: center;"><checkbox-group class="agreement" mark:id="{{item.classifyId}}"  bindchange="xieyi">

       <checkbox class="cb" checked="{{item.selected}}"></checkbox>

       {{item.classifyName}}

     </checkbox-group></view>

      </picker-view-column>

            </picker-view>

 

#js

//   初始渲染

 getypeinfo(){

     api.getshooltype({

         success:res=>{

             console.log(res);

             this.setData({

                typeshool:res

             })

             if(res[0].classifyId){

              api.getshooltype_l({

                data:{classifyId:res[0].classifyId},

                success:val=>{

                    res.forEach(v=>{

                        v.selected=false

                    })

                    this.setData({

                      typeshool_l:val

                    })

                    if(val.length>0){

                      api.getshooltype_l({

                        data:{classifyId:val[0].classifyId},

                        success:value=>{

                          value.forEach(v=>{

                                v.selected=false

                            })

                            this.setData({

                              typeshool_k:value

                            })

                        }

                    })

                    }

                  

                }

            })

             }

            

         }

     })

    

 },

//  一级分类点击

 onclack(e){

     const that =this

     api.getshooltype_l({

         data:{classifyId:e.mark.id},

         success:res=>{

             res.forEach(v=>{

                if(that.data.getlist.indexOf(v.classifyId)==-1){

                    v.selected=false

                }else{

                    v.selected=true

                }

                 

             })

             that.setData({

               typeshool_l:res

             })

             if(res.length>0){

              console.log(that.data.getlist);

              api.getshooltype_l({

                data:{classifyId:res[0].classifyId},

                success:val=>{

                  val.forEach(l=>{

                    console.log(val);

                    if(that.data.getlist.indexOf(l.classifyId)==-1){

                      l.selected=false

                  }else{

                    console.log(123456);

                      l.selected=true

                  }

                    })

                    that.setData({

                      typeshool_k:val

                    })

                }

            })

            }else{

              console.log(123);

              that.setData({

                typeshool_k:[]

              })

            }

         }

     })

 },

 //  二级分类点击

 onclack_k(e){

  const that =this

  api.getshooltype_l({

      data:{classifyId:e.mark.id},

      success:res=>{

          res.forEach(v=>{

             if(that.data.getlist.indexOf(v.classifyId)==-1){

              v.selected=false

             }else{

              v.selected=true   

             }

           

          })

          that.setData({

            typeshool_k:res

          })

          }

        })

      },

样式就不写了,第一次写写的不好,大佬勿喷,

有关微信小程序做类似vue的级联选择功能,使用picker-view-column+checkbox-group完成的更多相关文章

  1. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  4. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  5. ruby-on-rails - 如何在 Rails View 上显示错误消息? - 2

    我是rails的新手,想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围,如果不在范围内则返回错误信息。我可以检查上面代码的范围,但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单,一种显示ActiveRecord模型实例属性的表单。c

  6. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序,其中需要一个可供用户选择颜色的字段,该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”,并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中,因此使用基

  7. ruby-on-rails - 复数 for fields_for has_many 关联未显示在 View 中 - 2

    目前,Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段,但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联,它们似乎是正确的,这可能与嵌套在公司下的项目有关,还是我遗漏了其他东西?提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关,但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi

  8. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  9. ruby - 导轨 4 : column reference "updated_at" is ambiguous with Postgres - 2

    我正在尝试使用“updated_at”字段的日期时间范围查询数据库。前端在JSON数组中发送查询:["2015-09-0100:00:00","2015-10-0223:00:00"]在RailsController中,我使用以下方法将两个字符串解析为DateTime:start_date=DateTime.parse(params[:date_range_arr][0])end_date=DateTime.parse(params[:date_range_arr][1])#...@events=@events.where('updated_atBETWEEN?AND?,start_d

  10. ruby-on-rails - 在 haml View 中重构条件 - 2

    除了可访问性标准不鼓励使用这一事实指向当前页面的链接,我应该怎么做重构以下View代码?#navigation%ul.tabbed-ifcurrent_page?(new_profile_path)%li{:class=>"current_page_item"}=link_tot("new_profile"),new_profile_path-else%li=link_tot("new_profile"),new_profile_path-ifcurrent_page?(profiles_path)%li{:class=>"current_page_item"}=link_tot("p

随机推荐