之前的问卷调查都是一页显示一条数据,本例中是一页显示多条数据
共有两个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("fName")"/> <span component="$UI/system/components/justep/select/radioGroup" xid="radioGroup4" bind-itemset="$model.getItems($object.val("fID"))" bind-itemsetValue="ref("fID")" bind-itemsetLabel="ref("fName")" style="color:#000000;" bind-ref="ref("fAnswer")" class="x-radio-group x-radio-group-vertical" bind-visible=" val("fType") =='单选'"/> <span component="$UI/system/components/justep/select/checkboxGroup" class="x-checkbox-group x-checkbox-group-vertical" xid="checkboxGroup1" bind-ref="ref("fAnswer")" bind-itemset="$model.getItems($object.val("fID"))" bind-itemsetValue="ref("fID")" bind-itemsetLabel="ref("fName")" bind-visible=" val("fType") == '多选'"/> </div> </li> </ul> </ul>
评一波