<table>表格与jqGrid
第一次写博客比较生涩。接下来进入正题：......
普通表格前端的增删改查。
<%@ 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>
<table>表格与jqGrid的更多相关文章
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 全部代码
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- Web jquery表格组件 JQGrid 的使用 - 11.问题研究
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
随机推荐
- 第十篇.2、python并发编程之多进程
一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...
- D2. Kirk and a Binary String (hard version) D1 Kirk and a Binary String (easy version) Codeforces Round #581 (Div. 2) （实现，构造）
D2. Kirk and a Binary String (hard version) time limit per test1 second memory limit per test256 meg ...
- uestc summer training #9 牛客第三场 BFS计数
G.coloring tree BFS计数 题目:给你n(<=5000)个节点的一颗树 你有K(<=5000)种颜色 你可以给每一个节点染一种颜色 总共有Kn种染色方法 在一种染色方法中 ...
- redis缓存穿透-解决方案
上面的解决方案个人觉得时有误的,因为就算缓存了value的null值,后面的接口请求还是会判断走数据库,所以看解决方案二 解决方案二: https://blog.csdn.net/muyi_amen/ ...
- python 单元测试_读写Excel及配置文件（八）
一.安装openpyxl模块 openpyxl模块:是用于解决Excel(WPS等均可使用)中扩展名为xlsx/xlsm/xltx/xltm的文件读写的第三方库.xls文件要使用xlwt .wlrd两 ...
- 构建的Web应用界面还不够好看？DevExtreme v19.1全新主题来袭
行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,本文将主要介绍介绍DevExtremev19.1中的数据可视化和主题控件,其中主要包含图表注释.增强图例功能等.欢迎下载v19 ...
- javasctipt之DOM知识点
一:DOM节点 子节点:childNodes 父节点:parentNode offsetPrent 二:元素属性操作 方式一:xxx.style.xxx 方式二:xxx.style["xxx ...
- mybatis 分页插件PageHelper的简单使用
首先在pom.xml配置文件中增加相关的插件. 插件地址:https://github.com/pagehelper/Mybatis-PageHelper <dependency> < ...
- [洛谷P4602] CTSC2018 混合果汁
问题描述 小 R 热衷于做黑暗料理,尤其是混合果汁. 商店里有 n 种果汁,编号为 0, 1, 2, . . . , n − 1.i 号果汁的美味度是 di,每升价格为 pi.小 R 在制作混合果汁时 ...
- Eclipse 开发环境修改及MAVEN配置
Eclipse集成Maven配置 默认为 修改为所用版本 选择maven软件所在目录 勾选 默认连接仓库为 修改为