關於單選框、下拉框、複選框的資料回顯問題以及全選和全不選
阿新 • • 發佈:2018-12-29
在列表顯示的介面中通常都有編輯操作,進行編輯操作時通常就牽涉到資料的回顯問題,本文中編輯介面和新增介面是在同一個介面。
頁面中使用了jstl中的c標籤,所以要先引用:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
1、單選按鈕的資料回顯:
<tr> <td>性別:</td> <td> <c:choose> <c:when test="${'男' eq pd.SEX}"> <input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 </c:when> <c:when test="${'女' eq pd.SEX}"> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" checked="checked">女 </c:when> <c:otherwise> <input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 </c:otherwise> </c:choose> </td> </tr>
其中的${pd.SEX}是從後臺拿到的資料然後和前臺的進行比較,由於編輯介面和新增介面是在同一個介面,所以需要有一個預設值。
2、下拉框標籤的資料回顯:
<tr> <td>婚否:</td> <td><select name="select" id="select"> <option value="">--請選擇--</option> <option value="已婚" <c:if test="${pd.HUN eq '已婚'}">selected</c:if> >已婚</option> <option value="未婚" <c:if test="${pd.HUN eq '未婚'}">selected</c:if> >未婚</option> </select></td> </tr>
其中的${pd.HUN}是從後臺拿到的資料然後和前臺的進行比較,然後選中值相同的選項。
3、複選框的資料回顯:由於複選框的資料不確定,所以需要通過遍歷比較才能將資料回顯到介面中,通常有JQuery和jS兩種實現方法。下面我介紹的是JS的實現方法:
HTML程式碼:
JS程式碼:<tr> <td>愛好:</td> <td><input type="checkbox" name="like" id="like" value="Java">Java <input type="checkbox" name="like" id="like" value="C#">C# <input type="checkbox" name="like" id="like" value="PHP">PHP <input type="hidden" > </td> </tr>
//當頁面載入完成的時候,自動呼叫該方法
window.onload=function(){
var boxObj = document.getElementsByName("like"); //獲取所有的複選框
var payment = '${pd.AIHAO}'; //用el表示式獲取在控制層存放的複選框的值為字串型別
var pay = payment.split(','); //去掉它們之間的分割符“,”
var index = 0;
for(i=0;i<boxObj.length;i++){
for(j=0;j<pay.length;j++){
if(boxObj[i].value == pay[j]) //如果值與修改前的值相等
{
boxObj[i].checked= true;
break;
}
}
}
};
JS程式碼中使用了window.onload
就是當介面載入完成時自動就會呼叫的方法。
以上就可以實現資料的回顯了。
4、複選框的全選和全不選的實現:
HTML程式碼:
<tr>
<th width="60px" align="center"><input type="checkbox" id="zcheckbox" onclick="checkAll(this)" /></th>
<th width="60px" align="center">序號</th>
<th width="60px" align="center">姓名</th>
<th width="60px" align="center">性別</th>
<th width="60px" align="center">婚否</th>
<th width="60px" align="center">年齡</th>
<th width="60px" align="center">愛好</th>
<th width="60px" align="center">備註</th>
<th width="60px" align="center">操作</th>
</tr>
<c:forEach items="${list}" var="l" varStatus="vs">
<tr>
<td><input type="checkbox" name="cb" onclick="check(this)" value="${l.ID}" /></td>
JS程式碼:
<script type="text/javascript">
var number=0;
//單擊全選
function checkAll(checkBoxAll){
var elements = document.getElementsByName("cb");
if(checkBoxAll.checked){
//全選
for(var i=0;i<elements.length;i++){
var ele = elements[i];
ele.checked=true;
}
number=${list.size()};
}else{
//全不選
for(var i=0;i<elements.length;i++){
var ele = elements[i];
ele.checked=false;
}
number=0;
}
};
//點選每一條前的複選框的判斷
function check(checkbox){
if(checkbox.checked){
number++;
}else{
number--;
}
//如果長度等於迴圈出的條數,那麼全選複選框選中,否則不選
var cBoxAll = document.getElementById("zcheckbox");
if(number==${list.size()}){
cBoxAll.checked=true;
}else{
cBoxAll.checked=false;
}
};
</script>
通過上面的這些程式碼就可以將普通介面中的資料全部回顯出來了。