<table>表格与jqGrid

钱志
2023-12-01

  第一次写博客比较生涩。接下来进入正题:......

 

普通表格前端的增删改查。

<%@ 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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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='#' οnclick='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>

 

转载于:https://www.cnblogs.com/pzx-java/p/7284412.html

 类似资料: