最近在使用Tapestry实现页面的一些表单操作。深入的tapestry技术我也没有多少了解,今天经过一番拼搏终于搞定了关于复选框的存取问题。
首先tapestry下,复选框(checkbox)知识保存一个boolean类型的值,很多时候无法实现多选。于是我们通过JS进行控制。
首先表单上的代码我们可以采用一个隐藏域用于保存需要更新到数据库的实际内容:
Html代码:
产权分界点附件<input id="checkType1" name="checkType" type="Checkbox" onClick="selectHtAttachment(this,'${htInfo.htAttachment}');" value="1"/> 方案<input id="checkType2" name="checkType" type="Checkbox" onClick="selectHtAttachment(this,'${htInfo.htAttachment}');" value="2"/> 图纸<input id="checkType3" name="checkType" type="Checkbox" onClick="selectHtAttachment(this,'${htInfo.htAttachment}');" value="3"/> 法人代表<input id="checkType4" name="checkType" type="Checkbox" onClick="selectHtAttachment(this,'${htInfo.htAttachment}');" value="4"/> 授权委托书<input id="checkType5" name="checkType" type="Checkbox" onClick="selectHtAttachment(this,'${htInfo.htAttachment}');" value="5"/> 其他<input id="checkType6" name="checkType" type="Checkbox" onClick="selectHtAttachment(this,'${htInfo.htAttachment}');" value="6"/> <input id="htAttachment" t:id="htAttachment" t:type="HiddenField" value="prop:htInfo.htAttachment" />
|
JS代码实现复选框的赋值(这段JS是点击复选框的时候调用):
function selectHtAttachment(obj,value){ var arr = new Array(6); if(value==null||value.length<1){ arr=[0,0,0,0,0,0,0]; }else { var values = value.split(','); for(var k = 0;k<values.length;k++) arr[k]=values[k]; } var ord = document.getElementById("htAttachment"); ord.value = arr; for(var i = 1; i <= $N("checkType").length; i++){ if($N("checkType")[i-1].checked!=false){ arr[i-1]=1; ord.value = arr; }else if($N("checkType")[i-1].checked==false){ arr[i-1]=0; ord.value = arr; } } } |
JS用于实现复选框是否被选的现实效果代码:(这段代码是进入页面的时候需要调用)
function initHtAttachment(){ var obj = document.getElementById("htAttachment"); if((obj!=null)){ var values = obj.value.split(','); for(var k = 1;k<=values.length;k++) { if(values[k-1]==1){ $N("checkType")[k-1].checked = true; } else{ $N("checkType")[k-1].checked = false; } } }else{ obj.value="0,0,0,0,0,0"; for(var i = 0;i<6;i++){ $N("checkType")[k-1].checked = false; } } } |
实现的效果如下: