框架
jsp+controller+lmp
jsp内容
表格中按钮的写法
根据自己所写的获取表单内容代码,给按钮函数设置一个可以定位表单第几列的参数
下面是我所写的生成表单
function findBmsjcxByCondition() {
var ksxm = $("#KSXM").val();
var mhcx = "";
$('input[name="mhcx"]:checked').each(function () {
if ($(this).prop("checked") == true) {
mhcx = $(this).val(); //动态拼取选中的checkbox的值,用“|”符号分隔
}
});
var zjhm = $("#zjhm").val().toString();
var kmdm = $("#kmdm").val();
var zkzh = $("#zkzh").val();
var kqh = $("#kqh").val();
var kdh = $("#kdh").val();
var kch = $("#kch").val();
var zwh = $("#zwh").val();
var jkmzt = $('input[name="jkmzt"]:checked').val();
var sfcrj = $('input[name="sfcrj"]:checked').val();
jQuery.ajax({
type: "POST",
data: {
'condition': '',
'pageNo': '1',
'totalCount': '-1',
'ksxm': ksxm,
'mhcx': mhcx,
'zjhm': zjhm,
'kmdm': kmdm,
'zkzh': zkzh,
'kqh': kqh,
'kdh': kdh,
'kch': kch,
'zwh': zwh,
'jkmzt': jkmzt,
'sfcrj': sfcrj
},
url: "<%=request.getContextPath()%>/statisticykm/findAjax.htm",
contentType: "application/x-www-form-urlencoded",
dataType: "json",
success: function (data) {
if (data == null || data == undefined || data.result == undefined || data.result == null) {
return;
}
jQuery("#bmsjcxTable tr").remove();
var bmsjcxList = data.result;
var strTr = "";
var strTd = "";
for (var i = 0; i < bmsjcxList.length; i++) {
strTr = "<tr class=\"table_border_cell_bg\">";
for (var j = 0; j <= 16; j++) {
strTd += "<td align=\"center\" class=\"tdNormal\">" + bmsjcxList[i][j] + "</td>";
}
strTd += "<td align='center'><input type='button' class='form-buttun' value='详细信息' οnclick='openDetails(" + i+ ")' /> </td>"
strTr += "</tr>";
$("#bmsjcxTable").append(strTr + strTd);
strTr = "";
strTd = "";
}
$("#page").text(data.pageNo);
$("#count").text(data.totalPages);
$("#totalCount").text(data.totalCount);
}
});
}
按钮所在的列
strTd += "<td align='center'><input type='button' class='form-buttun' value='详细信息' οnclick='openDetails(" + i+ ")' /> </td>"
下面是点击按钮是要弹出的dialog悬浮框
<div id="dialog-user" title="详细信息" >
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
<tr>
<td width="27%" height="22" align="right" class="tdNormal">考生姓名:</td>
<td width="73%" height="22" class="tdNormal">
<input id="jkm_ksxm" name="jkm_ksxm" readonly>
</td>
</tr>
<tr>
<td width="27%" height="22" align="right" class="tdNormal">证件号码:</td>
<td width="73%" height="22" class="tdNormal">
<input id="jkm_zjhm" name=jkm_zjhm" readonly>
</td>
</tr>
<tr>
<td height="22" align="right" class="tdNormal">是否为红码:</td>
<td height="22" class="tdNormal">
<input id="jkm_sfhm" name="jkm_sfhm" maxlength="20">
</td>
</tr>
<tr>
<td height="22" align="right" class="tdNormal">健康码颜色:</td>
<td height="22" class="tdNormal">
<input type="text" id="jkm_ys" name="jkm_ys" maxlength="25">*
</td>
</tr>
<tr>
<td height="22" align="right" class="tdNormal">红码原因:</td>
<td height="22" class="tdNormal">
<input type="text" id="jkm_hmyy" name="jkm_hmyy" maxlength="50">*
</td>
</tr>
<tr>
<td height="22" align="right" class="tdNormal">详细红码原因:</td>
<td height="22" class="tdNormal">
<textarea rows="2" cols="17" id="jkm_xxhmyy" name="jkm_xxhmyy" maxlength="50"></textarea>*
</td>
</tr>
<tr>
<td height="22" align="right" class="tdNormal">核酸检测结果:</td>
<td height="22" class="tdNormal">
<input type="text" id="jkm_hsjcjg" name="jkm_hsjcjg" maxlength="50">
</td>
</tr>
<tr>
<td height="22" align="right" class="tdNormal">核酸检测结果填报时间:</td>
<td height="22" class="tdNormal">
<input type="text" id="jkm_hsjcjgsj" maxlength="50">*
</td>
</tr>
</table>
下面对dialog悬浮框进行初始化设置
$(document).ready(function() {
$("#dialog-user").dialog({
hide:true, //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错.
autoOpen: false,//设置点开页面时不自动弹出.
height: 450,
width: 400,
modal: true,
buttons: {
"保 存": function() {
},
'关闭': function() {
jQuery("#dialog-user").dialog('close');
},
});
下面是具体效果图
注意
使用dialog悬浮框是,需要引用相应的js与css,
其次引用时,要先引用js再引用css,要不然就会出现dialog设置的div不隐藏直接显示在页面中等问题
另外本人在实际开发中将 script type=“text/javascript”>放置到了body标签后面,也导致dialog无法正常隐藏与弹出,后来将顺序调整
后可以正常运行
下面是我所引用的js与css,仅供参考
<script type="text/javascript" src="<%=request.getContextPath()%>/js/common.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/page_init.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ztree3.5/jquery.ztree.all-3.5.min.js"></script>
<script src="<%=request.getContextPath()%>/js/ztree3.5/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/ztree3.5/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>
<link href="<%=request.getContextPath()%>/css/slide.css" rel="stylesheet" type="text/css">
<link href="<%=request.getContextPath()%>/skin/blue/css/style.css" rel="stylesheet" type="text/css">
<link href="<%=request.getContextPath()%>/skin/blue/css/logo.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/ztree3.5/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link href="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css">
这篇文章仅代表自己意见,本人算是编程路上的小白,如有错误欢迎指正