一、新增页面的渲染
(1)text与Texarea新增页面不需要初始化;
(2)对于radio、select、checkbox元素选项固定的情况也不做出说明;
(3)动态加载radio的枚举数值:
a、js方式
$.ajax({
url:'${_baseUrl}/dd/getDatas',
type:'post', //数据发送方式
dataType:'json', //接受数据格式
data:{},
async: false,
success: function(data){
for(var j=0;j<data.length;j++){
str += "<input type='radio' name='radioName' value='"+values[j].id+"'>";
str += "<span style='margin-left:10px'>"+values[j].name+"</span>";
}
},
error:function(){
layer.msg( "系统错误");
}
});
b、jstl方式
<c:forEach var="item" items="${itemList}" varStatus="status">
<input type="radio" name="radioName" value="+item.id+">
<span style="margin-left:10px'>"+item.name+"</span>
</c:forEach>
(4)checkbox同radio,不做特别说明
(5)select的初始化
a、js方式
先编写selec的html代码
<select name="dataName" id="dataId" onchange="setName(this)"></select>
然后初始化选项
$.ajax({
url:'${_baseUrl}/dd/selectAllDatas',
type:'post', //数据发送方式
dataType:'json', //接受数据格式
data:{},
async: false,
success: function(data){
$.each(data, function (i, item) {
jQuery("#dataId").append("<option value="+ item.id+">"+ item.name+"</option>");
});
},
error:function(){
layer.msg( "系统错误");
}
});
b、jstl方式
<select name="dataName" id="dataId" onchange="setName(this)">
<option value ="">请选择</option>
<c:forEach var="item" items="${itemList}" varStatus="status">
<optionvalue ="${item.id }">${item.name}</option>
</c:forEach>
</select>
c、如果要获取选项的名称,在select下面添加
<input type="hidden" id="dataNameId" name="dataNameId" value="" />
每次select修改都把select的选项值赋给隐藏变量,可以传到后台
function setName(select){
$("#"+select.id.replace("Id","Name")).val(select.selectedOptions[0].label);
}
二、修改页面的渲染及初始化值
js方式
(1)text和textarea赋值
$("#dataId").val(dataValue);
(2)radio赋值
$("input[type=radio][name='radioName'][value='"+radioValue+"']").attr('checked',true);
(3)checkbox赋值
$("input[type=checkbox][name=‘fieldName’]").each(function (index, item) {
if(filedValue.indexOf($(this).val()) >= 0){
$(this).prop('checked',true);
}
});
(4)select赋值
$("#selectId option").each(function () {
var txt = $(this).val();
if(txt == value){
$(this).prop("selected","selected");
}
});
jstl方式
(1)text和textarea赋值
<input type="text" name="dataName" id="dataId" value="${dataValue}"/>
<textarea name="dataName" id="dataId" >${dataValue}</textarea>
(2)radio赋值
radioValue为后台传到前台的数值,如果选项的value与后台传的值一致,则会被选中
<input type="radio" name="radioName" value="1" <c:if test="${radioValue == '1'}">checked="checked"</c:if>>开启
<input type="radio" name="radioName" value="0" <c:if test="${radioValue == '0'}">checked="checked"</c:if>>关闭
(3)checkbox赋值
用法同radio
<input type="checkbox" name="boxName" value="1" <c:if test="${boxValue == '1'}">checked="checked"</c:if>>开启
<input type="checkbox" name="boxName" value="0" <c:if test="${boxValue == '0'}">checked="checked"</c:if>>关闭
(4)select赋值
<select class="layout_table_select" name="selectId" id="selectId" >
<option value ="">请选择</option>
<c:forEach var="item" items="${itemList}" varStatus="status">
<c:choose>
<c:when test="${id eq item.id}">
<option value="${item.id}" selected="selected">${item.name}</option>
</c:when>
<c:otherwise>
<option value="${item.id}">${item.name}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
或者
<select class="layout_table_select" name="selectId" id="selectId" >
<option value="${id}">${name}</option>
<c:forEach var="item" items="${itemList}" varStatus="status">
<c:when test="${id != item.id}">
<option value="${item.id}">${item.name}</option>
</c:otherwise>
</c:forEach>
</select>
第一个optio为默认,把保存的值放在默认进行展示
三、新增和修改页面提交获取数值
(1)获取text和textarea的值
var value = $("#id").val();
(2)获取radio被选中的值
var value = $("input:radio:checked[name='radioName']").val();
(3)获取checkbox勾选的值
var vals = [];
$("input:checkbox:checked[name='boxName']").each(function (index, item) {
vals.push($(this).val());
});
fvar value = vals.join(",");
(4)获取select的值
var value = $("#selectId option:selected").val();
到此结束,如有问题,请留言交流!