项目中前端用到的知识
<c:if>标签的使用
项目中用到的radio单选，根据后台返回值选中：
<td>
<span class="red_style" style="float:right;color:red;margin-top:1px;"><b>*</b></span>
<input type= "radio" style="margin-left: 141px;" name="isUpdate" id="isUpdate" <c:if test="${uninInfo.isUpdate == 1}"> checked </c:if> value="1" /><span>是</span>
<input type= "radio" style="margin-left: 141px;" name="isUpdate" id="isUpdate" <c:if test="${uninInfo.isUpdate == 0}">checked </c:if> value="0"/><span>否</span>
</td>
按钮增加动态增加tr
按增加污染物按钮，动态增加一个tr
<button type="button" class="btn btn-info btn-sm" style="float:right; background-color: #7ec7f1;line-height: 18px;color: #fff;padding: 5px 10px; margin-bottom: 10px;" onclick="add()">添加污染物</button>
<table class="table table-bordered" id="pollutant">
<tr >
<th style="text-align: left;">污染物</th>
<th style="text-align: left;">总量指标(t/a)</th>
<th style="text-align: left;">备注说明</th>
<th style="text-align: left;">操作</th>
</tr>
<tr>
<td class="opt_col">
<span class="red_style" style="float:right;color:red;margin-top:1px;"><b>*</b></span>
<input type="hidden" style="width: 95%" name="pollutantId" id= "pollutantId" class="form-control" />
<div style="width: 70%;float: left;">
<input type="text" style="width: 95%" name="pollutantName" id= "pollutantName" class="form-control" readonly="readonly"/>
</div>
<div style="width: 25%;float: left;">
<button type="button" class="btn btn-info" onclick="chosePollutant(this)">选择</button>
</div>
</td>
<td>
<span class="red_style" style="float:right;color:red;margin-top:1px;"><b>*</b></span>
<input type="text" style="width: 70%" name="pollutantIndex" id= "pollutantIndex" class="form-control"/>
</td>
<td>
<input type="text" style="width: 70%" name="remarks" id= "remarks" class="form-control" />
</td>
<td>
<a onclick="removeTable(this)">删除</a>
</td>
</tr>
</table>
js写法
function add(){
var str = '<tr><td class="opt_col"><span class="red_style" style="float:right;color:red;margin-top:1px;"><b>*</b></span>'+
'<input type="hidden" style="width: 95%" name="pollutantId" id= "pollutantId" class="form-control" />'+
'<div style="width: 70%;float: left;"> <input type="text" style="width: 95%" name="pollutantName" id= "pollutantName" readonly="readonlys" class="form-control" /></div>'+
'<div style="width: 25%;float: left;"> '+
'<button type="button" class="btn btn-info" onclick="chosePollutant(this)">选择</button>'+
'</div>'+
'</td>'+
'<td>'+
'<span class="red_style" style="float:right;color:red;margin-top:1px;"><b>*</b></span>'+
'<input type="text" style="width: 70%" name="pollutantIndex" id= "pollutantIndex" class="form-control"/>'+
'</td>'+
'<td>'+
'<input type="text" style="width: 70%" name="remarks" id= "remarks" class="form-control" />'+
'</td>'+
'<td>'+
'<a onclick="removeTable(this)">删除</a>'+
'</td>'+
'</tr>';
$("#pollutant").append(str);
}
实现效果如下：
选择数据显示错位
错误描述：点击第二栏的选择，选中的数据显示在第一栏
解决方案如下：
add的事件中增加：<td class="opt_col">
function add(){
var str = '<tr><td class="opt_col"><span class="red_style" style="float:right;color:red;margin-top:1px;"><b>*</b></span>'+
'<input type="hidden" style="width: 95%" name="pollutantId" id= "pollutantId" class="form-control" />'+
'<div style="width: 70%;float: left;"> <input type="text" style="width: 95%" name="pollutantName" id= "pollutantName" readonly="readonlys" class="form-control" /></div>'+
'<div style="width: 25%;float: left;"> '+
'<button type="button" class="btn btn-info" onclick="chosePollutant(this)">选择</button>'+
'</div>'+
'</td>'+
'<td>'+
'<span class="red_style" style="float:right;color:red;margin-top:1px;"><b>*</b></span>'+
'<input type="text" style="width: 70%" name="pollutantIndex" id= "pollutantIndex" class="form-control"/>'+
'</td>'+
'<td>'+
'<input type="text" style="width: 70%" name="remarks" id= "remarks" class="form-control" />'+
'</td>'+
'<td>'+
'<a onclick="removeTable(this)">删除</a>'+
'</td>'+
'</tr>';
$("#pollutant").append(str);
}
table中也加上：<td class="opt_col">
<table class="table table-bordered" id="pollutant">
<tr >
<th style="text-align: left;">污染物</th>
<th style="text-align: left;">总量指标(t/a)</th>
<th style="text-align: left;">备注说明</th>
<th style="text-align: left;">操作</th>
</tr>
<tr>
<td class="opt_col">
<span class="red_style" style="float:right;color:red;margin-top:1px;"><b>*</b></span>
<input type="hidden" style="width: 95%" name="pollutantId" id= "pollutantId" class="form-control" />
<div style="width: 70%;float: left;">
<input type="text" style="width: 95%" name="pollutantName" id= "pollutantName" class="form-control" readonly="readonly"/>
</div>
<div style="width: 25%;float: left;">
<button type="button" class="btn btn-info" onclick="chosePollutant(this)">选择</button>
</div>
</td>
<td>
<span class="red_style" style="float:right;color:red;margin-top:1px;"><b>*</b></span>
<input type="text" style="width: 70%" name="pollutantIndex" id= "pollutantIndex" class="form-control"/>
</td>
<td>
<input type="text" style="width: 70%" name="remarks" id= "remarks" class="form-control" />
</td>
<td>
<a onclick="removeTable(this)">删除</a>
</td>
</tr>
</table>
js代码如下：
//选择污染物
function chosePollutant(_this){
var activeTcell = $(_this).parent().parent()
var TcellSiblings = activeTcell.parent().siblings()
activeTcell.addClass("activeOpt")
for(var i=0; i< TcellSiblings.length; i++) {
$(TcellSiblings[i]).find('td.opt_col').removeClass('activeOpt')
}
activeTcell.parent().siblings()
var url="${ctx}/sys/pollutantAss/searchPollutantAss";
win=openDialog('选择污染物',url,BootstrapDialog.TYPE_INFO,BootstrapDialog.SIZE_WIDE,false,false,"","450px");
}
//选择污染物回掉
function PollutantCallBack(id,value){
$(".activeOpt #pollutantId").val(id);
$(".activeOpt #pollutantName").val(value);
$(".activeOpt").removeClass('activeOpt');
closeDialog(win);
}
实现效果如下：
日期格式化
错误描述：
日期格式显示：Sat Jan 12 00:00:00 CST 2019
jsp代码加上：<fmt:formatDate *** pattern='yyyy-MM-dd'/>即可：
<input type="text" id="operationTime" name="operationTime" readonly="readonly" value = "<fmt:formatDate value='${uninInfo.operationTime}' pattern='yyyy-MM-dd'/>" class="form-control" style="width:80%;"/>
多选框
实现效果如下：
代码如下：
$(function() {
initSelect2();
jQuery("#product_grid")
.jqGrid(
{
url : '${ctx}/sys/pollutantAss/getAirPollutantList',
datatype : "json",
styleUI : 'Bootstrap',
mtype : "post",
colModel : [
{
label : 'id',
name : 'id',
hidden : true,
},
{
label : '大气污染物编号',
name : 'airpollutantCode',
width : 80,
align : 'left',
sortable : true
},
{
label : '大气污染物名称',
name : 'airpollutantName',
width : 40,
align : 'left',
sortable : true
}],
rowNum : 10,
rowList : [ 10, 100, 200 ],
prmNames : {
search : "search"
},
jsonReader : {
root : "dataList",
repeatitems : false
},
pager : '#product_grid_pager',
sortname : 'airpollutant_code',
sortorder : "asc",
viewrecords : true,
rownumbers : true,
pagerpos : "center",
recordpos : "right",
hidegrid : false,
shrinkToFit : true,
autowidth : true,
multiselect: true,//实现多选
multiboxonly: true
});
jQuery("#product_grid").jqGrid('setGridHeight',jQuery("body").height());
});
点击确定：saveAirPollutant
$("#saveAirPollutant").click(function(){
//获取选中行的id数组
var id = $("#product_grid").jqGrid("getGridParam", "selarrrow")
var arrList = new Array();
for (var i = 0; i < id.length; i++) {
var gr = $("#product_grid").getGridParam('selrow');
//选中行的时间
var name = $("#product_grid").getCell(id[i], "airpollutantName");
//建一个数组，把选中行的时间添加到这个数组中去。
arrList[i] = name;
}
window.parent.AirPollutantCallBack(id,arrList);//页面跳转
})
暂时只想到这些，后续遇到问题再更新
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
