之前的问卷调查都是一页显示一条数据,本例中是一页显示多条数据

共有两个data分别Question(问题)、Option(选项)

定义如下:


<div component="$UI/system/components/justep/data/data" autoLoad="true" xid="Question" idColumn="fID"> 
      <column label="ID" name="fID" type="String" xid="xid4"/>  
      <column label="键" name="fBatch" type="String" xid="xid5"/>  
      <column label="问题" name="fName" type="String" xid="xid6"/>  
      <column label="类型" name="fType" type="String" xid="xid7"/>  
      <data xid="default2">[{"fID":"20160529001","fBatch":"20160529","fName":"您是从哪里来参加本次开发者活动的?","fType":"单选"},{"fID":"20160529002","fBatch":"20160529","fName":"你是首次接触到WeX5吗?","fType":"单选"},{"fID":"20160529003","fBatch":"201605291","fName":"你参加本次活动的目的是:","fType":"多选"}]</data>  
      <column label="答案" name="fAnswer" type="String" xid="xid8"/> 
    </div>

  

<div component="$UI/system/components/justep/data/data" autoLoad="true" xid="Option" idColumn="fID"> 
      <column label="ID" name="fID" type="String" xid="xid1"/>  
      <column label="问题ID" name="fQuestionID" type="String" xid="xid2"/>  
      <column label="答案" name="fName" type="String" xid="xid3"/>  
      <data xid="default1">[{"fID":"2016052900103","fQuestionID":"20160529001","fName":"我从广东之外赶过来的"},{"fID":"2016052900101","fQuestionID":"20160529001","fName":"我就是深圳的"},{"fID":"2016052900102","fQuestionID":"20160529001","fName":"我来自广东其他城市,不在深圳"},{"fID":"2016052900201","fQuestionID":"20160529002","fName":"不是,看到这次活动信息之前已对WeX5有了解"},{"fID":"2016052900202","fQuestionID":"20160529002","fName":"是的,这次活动信息让我第一次知道WeX5"}, {"fID":"2016052900301","fQuestionID":"20160529003","fName":"学习技术"},{"fID":"2016052900302","fQuestionID":"20160529003","fName":"有疑问需要寻求解答"},{"fID":"2016052900303","fQuestionID":"20160529003","fName":"寻求合作"},{"fID":"2016052900304","fQuestionID":"20160529003","fName":"就是感兴趣,无明确目的"}, {"fID":"2016052900305","fQuestionID":"20160529003","fName":"其他"}]</data> 
    </div>

 

由于是列表展现多条所以这里用的list展现,list关联的是Question这个data,下面的选项根据fType确定用单选还是多多选
需要注意的是选项的显示,Option这data中有fQuestionID控制是哪个问题的选项,所以在用radioGroup或者checkboxGroup时需要动态控制显示Option中的选项,这里是定义一个函数实现的,函数的定义如下:

	Model.prototype.getItems = function(fQuestionID){
	    var itemData = this.comp('Option');
	    var ret = [];
	    itemData.each(function(param){
	        var row = param.row;
	        if(row.val('fQuestionID')==fQuestionID)
	            ret.push(row);
	    });
	    return ret;
	}

list和list中的radioGroup或者checkboxGroup的设置如下,注意radioGroup或者checkboxGroup的bind-itemset的设置是调用的函数


<ul xid="newsList" class="x-list" component="$UI/system/components/justep/list/list" data="Question" limit="-1" dataItemAlias="QuestionList"> 

<ul class="x-list-template" xid="listTemplateUl1"> 

<li class="media" xid="li3"> 

<div class="media-body" xid="mediaBody1"> 

<div component="$UI/system/components/justep/output/output" class="x-output" xid="output1" bind-ref="ref(&quot;fName&quot;)"/>  
                          <span component="$UI/system/components/justep/select/radioGroup" xid="radioGroup4" bind-itemset="$model.getItems($object.val(&quot;fID&quot;))" bind-itemsetValue="ref(&quot;fID&quot;)" bind-itemsetLabel="ref(&quot;fName&quot;)" style="color:#000000;" bind-ref="ref(&quot;fAnswer&quot;)" class="x-radio-group x-radio-group-vertical" bind-visible=" val(&quot;fType&quot;) =='单选'"/>  
                          <span component="$UI/system/components/justep/select/checkboxGroup" class="x-checkbox-group x-checkbox-group-vertical" xid="checkboxGroup1" bind-ref="ref(&quot;fAnswer&quot;)" bind-itemset="$model.getItems($object.val(&quot;fID&quot;))" bind-itemsetValue="ref(&quot;fID&quot;)" bind-itemsetLabel="ref(&quot;fName&quot;)" bind-visible=" val(&quot;fType&quot;) == '多选'"/>
                        </div>

 
                      </li>

 
                    </ul>

 
                  </ul>

 

显示效果如下:
list