第一次写博客比较生涩。接下来进入正题：......
普通表格前端的增删改查。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <head> <title>业务管理</title> <link href="${staticServer}/assets/ace1.4/css/treeTable.min.css?version=${versionNo}" rel="stylesheet" type="text/css"/> </head> <body> <!-- 首页>业务管理>业务参数管理 --> <div class="breadcrumbs breadcrumbs-fixed" id="breadcrumbs"> <ul class="breadcrumb"> <li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">首页</a></li> <li class="active">业务管理</li> <li class="active">业务参数管理</li> </ul> </div> <!-- 凭证管理页面 --> <div class="page-content"> <div class="row"> <div class="col-xs-12"> <div class="widget-box widget-color-blue"> <div class="widget-header"> <h5 class="widget-title bigger lighter"> <i class="ace-icon fa fa-table"></i> 操作面板 <i id="show"></i> </h5> </div> <div class="widget-body"> <div class="widget-main"> <table class="searchField" style="margin: 4px; padding: 4px;"> <tr> <td> <label>Display</label> </td> <td> <select name="dynamic-table_length"class="form-control input-sm" aria-controls="dynamic-table" id="selSize"> <option value="5">5</option> <option value="10">10</option> <option value="20">20</option> <option value="50">50</option> </select> </td> <td> <label>records</label> </td> <td> <button class="btn btn-purple btn-sm" id="btnSearch"> <i class="ace-icon fa fa-share "></i> 查询 </button> </td> <td> <label for="search">Search:</label> </td> <td> <input class="form-control input-sm" id="search" aria-controls="dynamic-table" type="search" placeholder="请输入凭证号" value="${pzlxglmodel.typesid }"/> </td> <td> <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#modal-form-add"> <i class="ace-icon fa fa-plus bigger-110"></i>新增凭证 </button> </td> </tr> </table> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12" id="pzlegl"> <table id="simple-table" class="table table-striped table-bordered table-hover"> <thead> <tr class="active"> <th rowspan="2" class="text-center" style="backcolor:blue"><font><font>凭证类型编号</font></font></th> <th rowspan="2" class="text-center"><font>凭证类型名称</font></th> <th colspan="3" class="text-center"><font>凭着录入时这些信息是否省略</font></th> <th style="display:none"><!-- 序列 --></th> <th rowspan="2" class="text-center">操作</th> </tr> <tr> <th class="text-center"><font>摘要</font></th> <th class="text-center"><font>备注</font></th> <th class="text-center"><font>对方单位信息</font></th> </tr> </thead> <tbody> <c:forEach items="${list}" var="pzlxglmodel" > <tr height="5px"> <td class="text-center">${pzlxglmodel.typesid }</td> <td class="text-center">${pzlxglmodel.typesname }</td> <td class="text-center"> <c:choose> <c:when test="${pzlxglmodel.abstractsign == '1' }">是</c:when> <c:otherwise>否</c:otherwise> </c:choose> </td> <td class="text-center"> <c:choose> <c:when test="${pzlxglmodel.remarksign == '1' }">是</c:when> <c:otherwise>否</c:otherwise> </c:choose> </td> <td class="text-center"> <c:choose> <c:when test="${pzlxglmodel.vsinforsign == '1' }">是</c:when> <c:otherwise>否</c:otherwise> </c:choose> </td> <td style="display:none">${pzlxglmodel.id }</td> <td class="text-center"> <button class="btn btn-link btnupdate" data-toggle="modal" data-target="#modal-up">修改</button> <button class="btn btn-link btndelete delete" data-toggle="modal" data-target="#modal-del">删除</button> </td> </tr> </c:forEach> </tbody> </table> </div> </div> <div class="row"> <div class="col-xs-12">${page.pageModel }</div> </div> <div id="modal-up" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="border: 3px solid #60C0DD;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="blue bigger">提示信息</h4> </div> <div class="modal-body" style="font:'微软雅黑' 30px;"> 确认要修改吗？ </div> <div class="modal-footer"> <button class="btn btn-sm" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 返回 </button> <button class="btn btn-sm btn-primary" id="sure"> <i class="ace-icon fa fa-check"></i> 确认 </button> </div> </div> </div> </div> <div id="modal-del" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="border: 3px solid #60C0DD;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="blue bigger">提示信息</h4> </div> <div class="modal-body text-center" style="font:'微软雅黑' 30px;"> 确认要删除吗？ </div> <div class="modal-footer"> <button class="btn btn-sm" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 返回 </button> <button class="btn btn-sm btn-primary" id="sure"> <i class="ace-icon fa fa-check"></i> 确认 </button> </div> </div> </div> </div> <div id="modal-form-add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="border: 3px solid #60C0DD;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="blue bigger">增加凭证类型</h4> </div> <!-- 增加form --> <form class="form-horizontal" action="${staticServer }/ywgl/ywcsgl/add.htm" method="post" id="updataForm"> <div class="modal-body" > <div class="form-group"> <label for="typesid1" class="col-sm-3">凭证类型编号:</label> <input id="typesid1" class="col-sm-7" type="text" name="typesid" /> </div> <div class="form-group"> <label for="typesname1" class="col-sm-3">凭证类型名称:</label> <input id="typesname1" class="col-sm-7" type="text" name="typesname" /> </div> <div class="form-group"> <label for="activeno1" class="col-sm-3">当前编号:</label> <input id="activeno1" class="col-sm-7" type="text" name="activeno"/> </div> <div class="form-group"> <label for="abstractsign1" class="col-sm-3">是否需要摘要:</label> <select class="col-sm-7" name="abstractsign" id="abstractsign1"> <option value="1">是</option> <option value="0">否</option> </select> </div> <div class="form-group"> <label for="remarksign1" class="col-sm-3">是否需要备注:</label> <select class="col-sm-7" name="remarksign" id="remarksign1"> <option value="1">是</option> <option value="0">否</option> </select> </div> <div class="form-group"> <label for="vainforsign1" class="col-sm-3">是否需要对方信息:</label> <select class="col-sm-7" name="vsinforsign" id="vainforsign1"> <option value="1">是</option> <option value="0">否</option> </select> </div> </div> <div class="modal-footer"> <button class="btn btn-sm" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 返回 </button> <button class="btn btn-sm btn-primary" id="updata"> <i class="ace-icon fa fa-check"></i> 增加 </button> </div> </form> <!-- 增加form --> </div> </div> </div> <div id="modal-form-up" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="border: 3px solid #60C0DD;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="blue bigger">修改凭证选项</h4> </div> <!-- 修改form --> <form class="form-horizontal" action="${staticServer }/ywgl/ywcsgl/updata.htm" method="post" id="updataForm"> <div class="modal-body" name="msg"> <div class="row"> <div class="col-xs-12 "> <table id="sample-table-1" class="table table-striped table-bordered table-hover"> <thead> <tr class="active"> <th rowspan="2" class="text-center" style="backcolor:blue"><font><font>凭证类型编号</font></font></th> <th rowspan="2" class="text-center"><font>凭证类型名称</font></th> <th colspan="3" class="text-center"><font>凭着录入时这些信息是否省略</font></th> <th style="display:none"><!-- 序列 --></th> </tr> <tr class="active"> <th class="text-center"><font>摘要</font></th> <th class="text-center"><font>备注</font></th> <th class="text-center"><font>对方单位信息</font></th> </tr> </thead> <tbody> <tr> <td><input name="typesid" type="text" class="form-control" value="" readonly="readonly"></td> <td><input name="typesname" type="text" class="form-control" value="" readonly="readonly"></td> <td style="width:100px;"> <select name="abstractsign"> <option value="1">是</option> <option value="0">否</option> </select> </td> <td style="width:100px;"> <select name="remarksign"> <option value="1">是</option> <option value="0">否</option> </select> </td> <td style="width:100px;"> <select name="vsinforsign"> <option value="1">是</option> <option value="0">否</option> </select> </td> <td style="display:none"><input name="id" type="text" class="form-control" value=""></td> </tr> </tbody> </table> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-sm" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 返回 </button> <button class="btn btn-sm btn-primary" id="updata"> <i class="ace-icon fa fa-check"></i> 修改 </button> </div> </form> </div> </div> <!-- 修改form --> </div> <script src="${staticServer }/assets/ace1.4/js/jquery.treeTable.min.js" type="text/javascript"></script> <script> $(function(){ /*自定义验证函数*/ jQuery.validator.addMethod("idVerify",function(value,element){ var regular = /^[0-9]{1,2}$/; //return this.optional(element||regular.test(value)); return regular.test(value); },"请输入凭证编号,最大为99"); jQuery.validator.addMethod("activeNoVerify",function(value,element){ var regular = /^[0-9]{1,8}$/; //return this.optional(element||regular.test(value)); return regular.test(value); },"当前编号最多为8位"); jQuery.validator.addMethod("typesNameVerify",function(value,element){ var regular = /^[\u4e00-\u9fa5]{1,5}$/; //return this.optional(element||regular.test(value)) return regular.test(value); },"最多五个字"); /*自定义ajax验证编号函数*/ jQuery.validator.addMethod("idExistVerify",function(value,element){ var flag=0; $.ajax({ url:"${staticServer}/ywgl/ywcsgl/toQueryExcit.htm", type:"POST", async:false, datatype:"text", data:{typesid:value}, success:function(data){ if(data.trim()=="true"){ flag=1; } } }); if(flag==0){ return false; }else{ return true; } },"类型编号已经存在"); /*验证方式*/ $("#updataForm").validate({ rules: { typesid:{ required: true, idVerify: $("#typesid1").val(), idExistVerify:$("#typesid1").val(), }, typesname: { required: true, typesNameVerify: $("#typesname1").val(), }, activeno:{ required: true, activeNoVerify: $("#activeno1").val() } }, messages: { typesid:{ remote: "用户名不可用" } }, submitHandler: function (form) { form.submit(); } }); /*显示系统时间*/ showTime(); $("button.btnupdate").click(function(){ var b = $(this).parent().prev(); $("input[name='typesid']").val(b.prev().prev().prev().prev().prev().html()); $("input[name='typesname']").val(b.prev().prev().prev().prev().html()); if(b.prev().prev().prev().html().indexOf('是') != -1){ $("select[name='abstractsign']").val(1); }else{ $("select[name='abstractsign']").val(0); } if(b.prev().prev().html().indexOf('是')!=-1){ $("select[name='remarksign']").val(1); }else{ $("select[name='remarksign']").val(0); } if(b.prev().html().indexOf('是')!=-1){ $("select[name='vsinforsign']").val(1); }else{ $("select[name='vsinforsign']").val(0); } $("input[name='id']").val(b.html()); $("#sure").click(function(){ $("#modal-form-up").modal("show"); $("#modal-up").modal("hide"); }); }); $("#btnSearch").click(function(){ var url = "index1.htm?typesid="+ $("#123").val(); if($("#selSize").val()!=null){ url += "&pageSize="+$("#selSize").val(); } window.location = encodeURI(url); }); $("button.btndelete").click(function(){ var id = $(this).parent().prev().html(); $("button[id='sure']").click(function(){ alert(id); window.location = encodeURI("del.htm?id=" + id + "&backUrl=${backUrl}"); }); }); }); /*搜索框输入验证*/ document.getElementById('search').onkeyup=function(){ this.value=this.value.match(/^[0-9]{1,2}$/); }; function checkTime(i){ //补位处理 if(i<10) { i="0"+i; //当秒分小于10时，在左边补0； } return i; }; function showTime(){ var now=new Date(); var year=now.getFullYear(); var month=now.getMonth()+1; //js获取的月份是从0开始； var day=now.getDate(); var h=now.getHours(); var m=now.getMinutes(); var s=now.getSeconds(); m=checkTime(m) s=checkTime(s) var weekday=new Array(7) weekday[0]="星期日" weekday[1]="星期一" weekday[2]="星期二" weekday[3]="星期三" weekday[4]="星期四" weekday[5]="星期五" weekday[6]="星期六" var w=weekday[now.getDay()]; //js获取的星期是0~6,0是星期天； document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+w+" "+h+":"+m+":"+s; t=setTimeout('showTime()',1000) }; </script> <style> /*验证信息样式*/ input.error { border: 1px solid red; } label.error { background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; } label.checked { background:url("./demo/images/checked.gif") no-repeat 0px 0px; } </style> </body>
jqGrid表格增删改查。
同过ajax请求获取jqGrid表格数据，是为了分页功能的实现，以及条件查询完成后分页功能仍能实现。其中jqGrid表格内"loadonce: true"是必要条件，否则分页功能不能实现！！！
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <head> <title>业务管理</title> <link href="${staticServer}/assets/ace1.4/css/treeTable.min.css?version=${versionNo}" rel="stylesheet" type="text/css"/> </head> <body> <!-- 首页>业务管理>业务参数管理 --> <div class="breadcrumbs breadcrumbs-fixed" id="breadcrumbs"> <ul class="breadcrumb"> <li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">首页</a></li> <li class="active">业务管理</li> <li class="active">业务参数管理</li> </ul> </div> <!-- 凭证管理页面 --> <div class="page-content"> <div class="row"> <div class="col-xs-12"> <div class="widget-box widget-color-blue"> <div class="widget-header"> <h5 class="widget-title bigger lighter"> <i class="ace-icon fa fa-table"></i> 操作面板 <i id="show"></i> </h5> </div> <div class="widget-body"> <div class="widget-main"> <table class="searchField" style="margin: 4px; padding: 4px;"> <tr> <td> <button class="btn btn-purple btn-sm" id="btnSearch"> <i class="ace-icon fa fa-share "></i> 查询 </button> </td> <td> <label for="123">Search:</label> </td> <td> <input class="form-control input-sm" id="find" aria-controls="dynamic-table" type="search" placeholder="请输入凭证号" value="${pzlxglmodel.typesid }"/> </td> <td> <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#modal-form-add"> <i class="ace-icon fa fa-plus bigger-110"></i>新增凭证 </button> </td> <td> <button class="btn btn-warning btn-sm btnupdate"> <i class="ace-icon fa fa-plus bigger-110"></i>修改 </button> </td> </tr> </table> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12" id="pzlegl"> <table id="table-tbody"></table> </div> <div class="row"> <div class="col-xs-12" id="tbListPage"></div> </div> </div> <div id="modal-up" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="border: 3px solid #60C0DD;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="blue bigger">提示信息</h4> </div> <div class="modal-body text-center" style="font:'微软雅黑' 30px;"> 确认要修改吗？ </div> <div class="modal-footer"> <button class="btn btn-sm" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 返回 </button> <button class="btn btn-sm btn-primary" id="sure"> <i class="ace-icon fa fa-check"></i> 确认 </button> </div> </div> </div> </div> <div id="modal-del" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="border: 3px solid #60C0DD;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="blue bigger">提示信息</h4> </div> <div class="modal-body text-center" style="font:'微软雅黑' 30px;"> <h3>确认要删除吗？</h3> </div> <div class="modal-footer"> <button class="btn btn-sm" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 返回 </button> <button class="btn btn-sm btn-primary" id="sure2"> <i class="ace-icon fa fa-check"></i> 确认 </button> </div> </div> </div> </div> <div id="modal-form-add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="border: 3px solid #60C0DD;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="blue bigger">增加凭证类型</h4> </div> <!-- 增加form --> <form class="form-horizontal" action="${staticServer }/ywgl/ywcsgl/add.htm" method="post" id="updataForm"> <div class="modal-body" > <div class="form-group"> <label for="typesid1" class="col-sm-3">凭证类型编号:</label> <input id="typesid1" class="col-sm-7" type="text" name="typesid" /> </div> <div class="form-group"> <label for="typesname1" class="col-sm-3">凭证类型名称:</label> <input id="typesname1" class="col-sm-7" type="text" name="typesname" /> </div> <div class="form-group"> <label for="activeno1" class="col-sm-3">当前编号:</label> <input id="activeno1" class="col-sm-7" type="text" name="activeno"/> </div> <div class="form-group"> <label for="abstractsign1" class="col-sm-3">是否需要摘要:</label> <select class="col-sm-7" name="abstractsign" id="abstractsign1"> <option value="1">是</option> <option value="0">否</option> </select> </div> <div class="form-group"> <label for="remarksign1" class="col-sm-3">是否需要备注:</label> <select class="col-sm-7" name="remarksign" id="remarksign1"> <option value="1">是</option> <option value="0">否</option> </select> </div> <div class="form-group"> <label for="vainforsign1" class="col-sm-3">是否需要对方信息:</label> <select class="col-sm-7" name="vsinforsign" id="vainforsign1"> <option value="1">是</option> <option value="0">否</option> </select> </div> </div> <div class="modal-footer"> <button class="btn btn-sm" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 返回 </button> <button class="btn btn-sm btn-primary" id="updata"> <i class="ace-icon fa fa-check"></i> 增加 </button> </div> </form> <!-- 增加form --> </div> </div> </div> <div id="modal-form-up" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="border: 3px solid #60C0DD;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="blue bigger">修改凭证选项</h4> </div> <!-- 修改form --> <form class="form-horizontal" action="${staticServer }/ywgl/ywcsgl/updata1.htm" method="post" id="updataForm"> <div class="modal-body" name="msg"> <div class="row"> <div class="col-xs-12 "> <table id="sample-table-1" class="table table-striped table-bordered table-hover"> <thead> <tr class="active"> <th rowspan="2" class="text-center" style="backcolor:blue"><font><font>凭证类型编号</font></font></th> <th rowspan="2" class="text-center"><font>凭证类型名称</font></th> <th colspan="3" class="text-center"><font>凭着录入时这些信息是否省略</font></th> <th style="display:none"><!-- 序列 --></th> </tr> <tr class="active"> <th class="text-center"><font>摘要</font></th> <th class="text-center"><font>备注</font></th> <th class="text-center"><font>对方单位信息</font></th> </tr> </thead> <tbody> <tr> <td><input name="typesid" type="text" class="form-control" value="" readonly="readonly"></td> <td><input name="typesname" type="text" class="form-control" value="" readonly="readonly"></td> <td style="width:100px;"> <select name="abstractsign"> <option value="1">是</option> <option value="0">否</option> </select> </td> <td style="width:100px;"> <select name="remarksign"> <option value="1">是</option> <option value="0">否</option> </select> </td> <td style="width:100px;"> <select name="vsinforsign"> <option value="1">是</option> <option value="0">否</option> </select> </td> <td style="display:none"><input name="id" type="text" class="form-control" value=""></td> <td style="display:none"><input name="backUrl" type="text" class="form-control" value="${staticServer }/ywgl/ywcsgl/index2.htm"></td> </tr> </tbody> </table> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-sm" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 返回 </button> <button class="btn btn-sm btn-primary" id="updata"> <i class="ace-icon fa fa-check"></i> 修改 </button> </div> </form> </div> </div> <!-- 修改form --> </div> <script src="${staticServer }/assets/ace1.4/js/jquery.treeTable.min.js" type="text/javascript"></script> <script> $(function(){ /*展示时间*/ showTime(); /*操作列*/ function customFmatter(cellvalue, options, rowObject) { return "<a href='#' onclick='todelete()'>删除</a>"; } /*查询*/ $("#btnSearch").click(function(){ var title = $("#find").val(); $("#table-tbody").jqGrid('setGridParam',{ url:"${staticServer}/ywgl/ywcsgl/find.htm?", postData:{'typesid':title}, //发送数据 datatype: "json",//前后交互的格式是json数据 mtype: 'POST',//交互的方式是发送httppost请求 }).trigger("reloadGrid"); //重新载入 }); $.ajax({ url : "${staticServer}/ywgl/ywcsgl/jQGrid.htm", type : "post", data : "", dataType : "json", success : function(r) { var grid_data = r; $("#table-tbody").jqGrid({ //url:"${staticServer}/ywgl/ywcsgl/jQGrid.htm", datatype:"local", //数据来源，本地数据 data:grid_data, // mtype:"POST",//提交方式 height:420,//高度，表格高度。可为数值、百分比或'auto' //width:1000,//这个宽度不能为百分比 autowidth:true,//自动宽 cellEdit: true, colNames:['<div align="center">凭证类型编号</div>','<div align="center">凭证类型名称</div>','<div align="center">摘要</div>','<div align="center">备注</div>','<div align="center">对方单位信息</div>',' ',' '], colModel:[ {name:'typesid',index:'typesid',sorttype:'int', width:'50',align:'center',editable:'true'}, {name:'typesname',index:'typesname', width:'50',align:'center'}, {name:'abstractsign',index:'abstractsign', width:'50', align:"center"}, {name:'remarksign',index:'remarksign', width:'50',align:"center"}, {name:'vsinforsign',index:'vsinforsign', width:'50', align:"center"}, {name:'active',index:'',width:80,formatter : customFmatter}, {name:'id',index:'id', width:'50', align:"center",hidden:'true'} ], multiselect:true,//是否可以全选 pager:'#tbListPage', rownumbers:true,//添加左侧行号 //altRows:true,//设置为交替行表格,默认为false //sortname:'createDate', //sortorder:'asc', viewrecords: true,//是否在浏览导航栏显示记录总数 rowNum:5,//每页显示记录数 rowList:[10,20,25],//用于改变显示行数的下拉列表框的元素数组。 //multiboxonly : true, loadonce: true, jsonReader:{ //id: "blackId",//设置返回参数中，表格ID的名字为blackId //repeatitems : false }, }); /*合并表头*/ $("#table-tbody").jqGrid('setGroupHeaders', { useColSpanStyle: false, //没有表头的列是否与表头列位置的空单元格合并 groupHeaders:[ //合并 startColumnName(开始列),以sid列开始; numberOfColumns(合并几列),合并2列; titleText(合并后父列名),合并后父列名为All Student {startColumnName: 'abstractsign', numberOfColumns: 3, titleText: '<div align="center">凭着录入时这些信息是否省略</div>'} ] }); } }); jQuery.validator.addMethod("idVerify",function(value,element){ var regular = /^[0-9]{1,2}$/; //return this.optional(element||regular.test(value)); return regular.test(value); },"请输入凭证编号,最大为99"); jQuery.validator.addMethod("activeNoVerify",function(value,element){ var regular = /^[0-9]{1,8}$/; //return this.optional(element||regular.test(value)); return regular.test(value); },"当前编号最多为8位"); jQuery.validator.addMethod("typesNameVerify",function(value,element){ var regular = /^[\u4e00-\u9fa5]{1,5}$/; //return this.optional(element||regular.test(value)) return regular.test(value); },"最多五个字"); jQuery.validator.addMethod("idExistVerify",function(value,element){ var flag=0; $.ajax({ url:"${staticServer}/ywgl/ywcsgl/toQueryExcit.htm", type:"POST", async:false, datatype:"text", data:{typesid:value}, success:function(data){ if(data.trim()=="true"){ flag=1; } } }); if(flag==0){ return false; }else{ return true; } },"类型编号已经存在"); $("#updataForm").validate({ rules: { typesid:{ required: true, idVerify: $("#typesid1").val(), idExistVerify:$("#typesid1").val(), }, typesname: { required: true, typesNameVerify: $("#typesname1").val(), }, activeno:{ required: true, activeNoVerify: $("#activeno1").val() } }, messages: { typesid:{ remote: "用户名不可用" } }, submitHandler: function (form) { form.submit(); } }); /*修改*/ $("button.btnupdate").click(function(){ var rowid = $("#table-tbody").jqGrid("getGridParam", "selrow"); //获取最后选中的ID var rowids = $("#table-tbody").jqGrid("getGridParam", "selarrrow");//获取多选行的ID 数组 if (rowids.length > 1) { $("#modal-up div.modal-body").html("<h3>选择的账户数多于两个</h3>"); $("#modal-up").modal("show"); return; } else if(rowid == null){ $("#modal-up div.modal-body").html("<h3>请选择修改项</h3>"); $("#modal-up").modal("show"); return; } else{ $("#modal-up").modal("show"); $("#modal-up div.modal-body").html("<h3>你确定要修改吗？</h3>"); var rowData = $("#table-tbody").jqGrid("getRowData", rowid); if(rowData.abstractsign == 1){ $("select[name='abstractsign']").val(1); }else{ $("select[name='abstractsign']").val(0); } if(rowData.remarksign == 1){ $("select[name='remarksign']").val(1); }else{ $("select[name='remarksign']").val(0); } if(rowData.vsinforsign == 1){ $("select[name='vsinforsign']").val(1); }else{ $("select[name='vsinforsign']").val(0); } $("input[name='id']").val(rowData.id); $("input[name='typesid']").val(rowData.typesid); $("input[name='typesname']").val(rowData.typesname); $("#sure").click(function(){ $("#modal-form-up").modal("show"); $("#modal-up").modal("hide"); }); } }); }); /*删除*/ function todelete(){ var rowid=$("#table-tbody").jqGrid("getGridParam","selrow");//获取选中的id var rowids=$("#table-tbody").jqGrid("getGridParam","selarrrow");//获取多选id数组 if(rowid==null){ $("#modal-del div.modal-body").html("<h3>你没有选择任何东西</h3>"); $("#modal-del").modal("show"); //alert("你没有选择任何东西"); return false; } if(rowids.length>1){ $("#modal-del div.modal-body").html("<h3>你没有选择任何东西</h3>"); $("#modal-del").modal("show"); //alert("请选择一个"); return false; } var rowData=$("#table-tbody").jqGrid("getRowData",rowid);//获取选中行的数据 $("#modal-del").modal("show"); $("#sure2").click(function(){ window.location.href="${staticServer}/ywgl/ywcsgl/del22.htm?backUrl=${backUrl}&id="+rowData.id; return true; }); return false; } document.getElementById('find').onkeyup=function(){ this.value=this.value.match(/^[0-9]{1,2}$/); }; function checkTime(i){ //补位处理 if(i<10) { i="0"+i; //当秒分小于10时，在左边补0； } return i; }; function showTime(){ var now=new Date(); var year=now.getFullYear(); var month=now.getMonth()+1; //js获取的月份是从0开始； var day=now.getDate(); var h=now.getHours(); var m=now.getMinutes(); var s=now.getSeconds(); m=checkTime(m) s=checkTime(s) var weekday=new Array(7) weekday[0]="星期日" weekday[1]="星期一" weekday[2]="星期二" weekday[3]="星期三" weekday[4]="星期四" weekday[5]="星期五" weekday[6]="星期六" var w=weekday[now.getDay()]; //js获取的星期是0~6,0是星期天； document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+w+" "+h+":"+m+":"+s; t=setTimeout('showTime()',1000) }; </script> <style> input.error { border: 1px solid red; } label.error { background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; } label.checked { background:url("./demo/images/checked.gif") no-repeat 0px 0px; } .center .ui-jqgrid { margin-left: auto; margin-right: auto; } </style> </body>