マイクロ信ウィジェットマルチレベル連動実現

このセクションでは、ウィジェットpickerコントロールの使用について説明します.前編では単段ドロップダウンリスト、今回はマルチレベルドロップダウンリストについて説明します.
小プログラムは連動ドロップダウンリストを実現し、連動潤滑の効果を実現するために、連動で使用したすべてのデータを要求し、その後、これらのデータを論理的に処理し、前のレベルを選択し、次のレベルの結果が遅いカートン現象を避ける必要がある.
最初のステップは、ウィジェット側がバックエンドphpに使用するすべての区画データを要求することです.

onload:function(){
        var url = app.globalData.domain + 'survey_server/api.php?action=getGroup&system_id=' + this.data.storageData.system_id;
        var that=this;
        wx.request({
          url: url,
          data: {
            group_id: this.data.storageData.system_id,  
          },
          header: {
            'content-type': 'application/json' //    
          },
          success: function (res) {
           
            that.setData({ groupInfo: res.data.groupInfo});
          }

        })}

バックエンドphpはウィジェットにデータを提供する

public function getGroup($group_id,$name,$idno,$isExist){
        $db=$this->db;
        $prefix=$this->prefix;
        $len=strlen($group_id);

        $sql="select group_id,group_name from ". $prefix."_group where group_fatherid='$group_id' and group_operate!='d' ";
        $groupInfo=$db->getAll($sql);// { }
        
        foreach ($groupInfo as $key => &$value) {
            $childGroupId=$value['group_id'];
           if(strlen($childGroupId==12)){
                continue;
           }
           $childGroupInfo=$this->getGroupInfo($childGroupId);// {  }
           $value['child']= $childGroupInfo;
           if($len==4){
            foreach ($value['child'] as $key1 => &$value1) {
                $childGroupId2=$value1['group_id'];
                $childGroupInfo2=$this->getGroupInfo($childGroupId2);//  {}
                $value1['child']= $childGroupInfo2;
            }
           }
        }

        $arr['groupInfo']=$groupInfo;
        $arr=$this->ConvertToUtf8($arr);
        return $arr;
    }
    
private function getGroupInfo($group_id){
        $db=$this->db;
        $prefix=$this->prefix;
        if(strlen($group_id==12)){
            return false;
        }
        $sql="select group_id,group_name from ". $prefix."_group where group_fatherid='$group_id' and group_operate!='d' ";
        $groupInfo=$db->getAll($sql);
        return $groupInfo;
    }

ステップ2、ウィジェット側htmlページ

    

      {{mutiGroupArray[0][mutiIndexArray[0]]}}{{mutiGroupArray[1][mutiIndexArray[1]]}}{{mutiGroupArray[2][mutiIndexArray[2]]}}
    

3つ目はjs側の論理処理です
【1】初期データ生成

  data: {
     
      mutiGroupArray:[],
      mutiIndexArray:[],
      firstIndex:0,
  },
onload:function(){
  //     picker     
            var mutiGroupArray=[];
            var firstArr=[]; //        
            var secondArr = []; //        
            var thirdArr = []; //        
            var mutiIndexArray = that.data.storageData.mutiIndexArray;
            console.log(mutiIndexArray);
            for (var i = 0; i < res.data.groupInfo.length;i++){  //          ，     
              firstArr.push(res.data.groupInfo[i].group_name);
              if (res.data.groupInfo[mutiIndexArray[0]].child && i == mutiIndexArray[0]){  //          ，   ，                ，     
                var child1 = res.data.groupInfo[mutiIndexArray[0]].child;
                for (var m = 0; m < child1.length;m++){
                  secondArr.push(child1[m].group_name);
                  if (child1[mutiIndexArray[1]].child && m == mutiIndexArray[1]){  //           ，   ，   ，             ，       
                    var child2 = child1[mutiIndexArray[1]].child;
                    for(var n=0;n

【2】picker値変更付与

 bindMultiPickerChange: function (e) {
    console.log('picker      ，    ', e.detail.value);

   //           
    var valArr = e.detail.value;
 
    var groupIdArr=[];
    var groupInfo=this.data.groupInfo;
   
    if (groupInfo[valArr[0]].child[valArr[1]].child){
      var selectedgroupid = groupInfo[valArr[0]].child[valArr[1]].child[valArr[2]].group_id;
    }else{
      var selectedgroupid = groupInfo[valArr[0]].child[valArr[1]].group_id;
    }
    
    this.setData({
      mutiIndexArray: e.detail.value,
      selectedgroupid: selectedgroupid,
     
    })
    
  },

【3】picker列の変更、下位データのロード

 bindMultiPickerColumnChange: function (e) {
   // console.log('     ', e.detail.column, '，  ', e.detail.value);
    var mutiGroupArray = this.data.mutiGroupArray;
    var mutiIndexArray = this.data.mutiIndexArray;
    var mutiSize = mutiIndexArray.length;
    var column = e.detail.column;
    var groupInfo = this.data.groupInfo;
    var firstIndex=0;  //           ，   0，      

    switch (column){
        case 0:  //         ，       ，         （  ）    （ ）
        firstIndex = e.detail.value;
        this.data.storageData['firstIndex'] = firstIndex
        this.setData({ firstIndex: firstIndex, storageData: this.data.storageData});
        var mutiGroup1=[];//   
        //groupInfo[e.detail.value]              ，                 ，       groupInfo[e.detail.value].child（     ），                         groupInfo[e.detail.value].child[0].child(            )
        for (var key1 in groupInfo[e.detail.value].child){
          mutiGroup1.push(groupInfo[e.detail.value].child[key1].group_name);
          if (key1 == 0 && groupInfo[e.detail.value].child[0].child){
            var child1 = groupInfo[e.detail.value].child[0].child;
            var mutiGroup2=[];//   
            for (var key2 in child1){
              mutiGroup2.push(child1[key2].group_name);
            }
            mutiGroupArray[2] = mutiGroup2;
          }
        }
        mutiGroupArray[1] = mutiGroup1 ;
      
        break;
        case 1:  //      （ ）  ，         （ ）      
        //groupInfo[firstIndex].child[e.detail.value].child              （   ）
        var mutiGroup2=[];
        var child = groupInfo[this.data.firstIndex].child[e.detail.value].child;
        if (child){
          for (var key in child) {
            mutiGroup2.push(child[key].group_name);
          }
          mutiGroupArray[2] = mutiGroup2;
        }
       
        break;
    }
    this.setData({ mutiGroupArray: mutiGroupArray})
  },