码迷,mamicode.com
首页 > 微信 > 详细

小程序三级联动(动态获取数据)

时间:2019-03-13 15:14:24      阅读:625      评论:0      收藏:0      [点我收藏+]

标签:col   验证码   ide   取数   lin   tle   orm   cto   ado   

做了两个小时才发现。。。不适合文字太多的联动,没办法。只能改成三个选择框的那种。在这里记录一下是如何做的,然后以后有用时再用。

js

const app = getApp();
Page({
  data: {
    index: null,
    picker: [喵喵喵, 汪汪汪, 哼唧哼唧],
    multiNameArray: [
      [请选择,无脊柱动物, 脊柱动物],
      [请选择,一年级,二年级],
      [请选择,1班,2班, 3班]
    ],
    muliArray:[[],[],[]],
    multiIndex: [0, 0, 0]
  },
  onLoad(){
    let that=this;
    var data = { 
      multiNameArray: that.data.multiNameArray,
      muliArray: that.data.muliArray
      }
    wx.request({
      url: app.globalData.root + service/WeChatParent.asmx/GetOnLoadSchoolList,
      method: post,
      success: function (datas) {
        console.log(datas);
        var resu = JSON.parse(datas.data.d);
        data.multiNameArray[0] = resu.nameList;
        data.muliArray[0]=resu.list;
        data.muliArray[1] = resu.gradelist;
        data.multiNameArray[1] = resu.gradenamelist;
        data.muliArray[2] = resu.classlist;
        data.multiNameArray[2] = resu.classname;
        that.setData(data)
      }
    })
  },
  PickerChange(e) {
    console.log(e);
  


    this.setData({
      index: e.detail.value
    })
  },
  MultiChange (e) {
    this.setData({
      multiIndex: e.detail.value
    })
  },
  MultiColumnChange(e) {
    let that=this;

    let multiIndex = that.data.multiIndex;
    let data = {
      multiNameArray: that.data.multiNameArray,
      muliArray: that.data.muliArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    console.log(e.detail);
   
   
    var sid = that.data.muliArray[0][multiIndex[0]].Id;
    var gid = that.data.muliArray[1][multiIndex[1]].Id;
    console.log(sid+"|"+gid);

    wx.request({
      url: app.globalData.root + service/WeChatParent.asmx/GetSchoolInfoList,
        method: post,
      data: {
        colId: e.detail.column,
        schoolId: sid,
        greadeId: gid
        },
        success: function (datas) {
          console.log(datas);
          var resu = JSON.parse(datas.data.d);
          switch (e.detail.column) {
            case 0:
              that.setData({ multiIndex[1]: 0 })
              that.setData({
                multiNameArray[1]: resu.namelist,
                muliArray[1]: resu.list
               })
              break;
            case 1:
              that.setData({
                multiNameArray[2]: resu.namelist,
                muliArray[2]: resu.list
              })
              break;
            // case 2:
            //   that.setData({
            //     ‘multiNameArray[2]‘: resu.namelist,
            //     ‘muliArray[2]‘: resu.list
            //   })
            //   break;
          }
        }
      })
  
    // switch (e.detail.column) {
    //   case 0:
    //     that.setData({ ‘multiIndex[0]‘: e.detail.value })
    //     break;
    //   case 1:
    //     that.setData({ ‘multiIndex[1]‘: e.detail.value })
    //     break;
    //   case 2:
    //     that.setData({ ‘multiIndex[2]‘: e.detail.value })
    //     break;
    // }
    // this.setData(data);
  },
  TimeChange(e) {
    this.setData({
      time: e.detail.value
    })
  },
  DateChange (e) {
    this.setData({
      date: e.detail.value
    })
  },
  RegionChange: function (e) {
    this.setData({
      region: e.detail.value
    })
  },
})

wxml

<form>

  <view class="cu-form-group ">
    <view class=title>邮件</view>
    <input placeholder="两字短标题" class=radius name=input></input>
  </view>
  <view class="cu-form-group">
    <view class=title>输入框</view>
    <input placeholder="三字标题" class=radius name=input></input>
  </view>
  <view class="cu-form-group">
    <view class=title>收货地址</view>
    <input placeholder="统一标题的宽度" class=radius name=input></input>
  </view>
  <view class="cu-form-group">
    <view class=title>收货地址</view>
    <input placeholder="输入框带个图标" class=radius name=input></input>
    <text class=icon-locationfill text-orange></text>
  </view>
  <view class="cu-form-group">
    <view class=title>验证码</view>
    <input placeholder="输入框带个按钮" class=radius name=input></input>
    <button class=cu-btn bg-green shadow>验证码</button>
  </view>
  <view class="cu-form-group">
    <view class=title>手机号码</view>
    <input placeholder="输入框带标签" class=radius name=input></input>
    <view class="cu-capsule radius">
      <view class=cu-tag bg-blue >
        +86
      </view>
      <view class="cu-tag line-blue">
        河北沧州
      </view>
    </view>
  </view>


  <view class="cu-form-group margin-top">
    <view class=title>普通选择</view>
    <picker bindchange="PickerChange" value="{{index}}" range="{{picker}}">
      <view class="picker">
        {{index?picker[index]:禁止换行,超出容器部分会以 ... 方式截断}}
      </view>
    </picker>
  </view>
  <view class="cu-form-group">
    <view class=title>多列选择</view>
    <picker mode="multiSelector" bindchange="MultiChange" bindcolumnchange="MultiColumnChange" value="{{multiIndex}}" range="{{multiNameArray}}">
      <view class="picker">
        {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
      </view>
    </picker>
  </view>
<view class="padding flex flex-direction">
  <button class=cu-btn bg-green margin-tb-sm lg>提交</button>
</view>

<!-- 
  <view class="cu-form-group margin-top">
    <view class=title>多级联动</view>
    <picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
      <view class="picker">
        {{region[0]}},{{region[1]}},{{region[2]}}
      </view>
    </picker>
  </view> -->
</form>
技术图片
    [WebMethod(Description = "获取学校列表")]
        public string GetOnLoadSchoolList()
        {
            var list = new List<SchoolModel>();
            var gradeList= new List<SchoolModel>();
            var classList= new List<SchoolModel>();

            var schooLlist = ta_School.GetModelList("IsDelete", false);
            var nameList=new List<string>();
            var gradeNameList = new List<string>();
            var classNameList = new List<string>();
            foreach (var item in schooLlist)
            {
                list.Add(new SchoolModel{Id=item.ID,Name=item.Name});
                nameList.Add(item.Name);
            }

            var schoolId = schooLlist.First().ID;
            var gradeLists = PublicQuery.GetGradeListBySchoolId(schoolId);
            foreach (var item in gradeLists)
            {
                gradeList.Add(new SchoolModel { Id = item.ID, Name = item.Name });
                gradeNameList.Add(item.Name);
            }

            var gradeId = gradeLists.First().ID;
            var classs = PublicQuery.GetClassByGreadeId(schoolId,gradeId);
            foreach (var item in classs)
            {
                classList.Add(new SchoolModel { Id = item.ID, Name = item.Name });
                classNameList.Add(item.Name);
            }

            return new { list = list, nameList = nameList,gradelist=gradeList,gradenamelist=gradeNameList,classlist=classs,classname=classNameList }.ToJson();
        }

        [WebMethod(Description = "获取学校列表")]
        public string GetSchoolInfoList(int colId,int schoolId,int greadeId)
        {
            var list = new List<SchoolModel>();
            var nameList = new List<string>();
            switch (colId)
            {
                case 0:
                    var gradelist=PublicQuery.GetGradeListBySchoolId(schoolId);
                    list.Add(new SchoolModel{Id=0,Name="请选择"});
                    nameList.Add("请选择");
                    foreach (var item in gradelist)
                    {
                    list.Add(new SchoolModel{Id= item.ID, Name= item .Name});
                    nameList.Add(item.Name);
                    }
                    break;
                case 1:
                    var classs = PublicQuery.GetClassByGreadeId(schoolId, greadeId);
                    list.Add(new SchoolModel { Id = 0, Name = "请选择" });
                    nameList.Add("请选择");
                    foreach (var item in classs)
                    {
                        list.Add(new SchoolModel { Id = item.ID, Name = item.Name });
                        nameList.Add(item.Name);
                    }
                    break;
                case 2:

                    break;
            }

            return new { list = list, namelist = nameList }.ToJson();
        }

        public class SchoolModel
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }
C#

 

小程序三级联动(动态获取数据)

标签:col   验证码   ide   取数   lin   tle   orm   cto   ado   

原文地址:https://www.cnblogs.com/axu92312/p/10523046.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!