easyui、layer增删改查整套(jsp)代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
    + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>jdbc管理</title>
<link rel="stylesheet" type="text/css"
    href="<%=basePath%>/resources/easyui1.3.2/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
    href="<%=basePath%>/resources/easyui1.3.2/icon.css" />
<link rel="stylesheet" href="<%=basePath%>resources/validForm/css/style.css" type="text/css" media="all" />
<link href="<%=basePath%>resources/validForm/css/demo.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="<%=basePath%>resources/css/font.css">
<link rel="stylesheet" href="<%=basePath%>resources/css/xadmin.css">
<script type="text/javascript"
    src="<%=basePath%>/resources/easyui1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript"
    src="<%=basePath%>/resources/easyui1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="<%=basePath%>/resources/easyui1.3.2/locale/easyui-lang-zh_CN.js"></script>
<script src="<%=basePath%>resources/allplug/layui/layui.js" charset="utf-8"></script>    
<script type="text/javascript" src="<%=basePath%>resources/js/Validform_v5.3.2.js"></script>
</head>

<body>

    <table id="dg" title="jdbc管理" class="easyui-datagrid" 
        fitColumns="true" pagination="true" toolbar="#tb" rownumbers="true">
    </table>


<div id="DBDiv" class="easyui-dialog" modal="true" closed="true">

  <input type="hidden" id="type"/>
  <input type="hidden" id="upd_jdbcuuid"/>
 <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form layui-form-pane" id="jdbc_user">
                <div class="layui-form-item">
                    <label for="jdbc_name" class="layui-form-label">
                         <span class="x-red">*</span>连接名称:</label>
                    <div class="layui-input-inline" >
                        <input type="text" id="jdbc_name" name="jdbc_name" datatype="*1-50" nullmsg="连接名称不能为空" errormsg="连接名称长度不能超过50!" class="layui-input">
                    </div>
                    <div class="Validform_checktip"></div>
                </div>
                <div class="layui-form-item">
                    <label for="jdbc_drivername" class="layui-form-label">
                        <span class="x-red">*</span>驱动名称:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="jdbc_drivername" name="jdbc_drivername" datatype="*1-50" nullmsg="驱动名称不能为空" errormsg="驱动名称长度不能超过50!" class="layui-input">
                    </div>
                    <div class="Validform_checktip"></div>
                </div>
                <div class="layui-form-item">
                    <label for="jdbc_url" class="layui-form-label">
                        <span class="x-red">*</span>连接地址:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="jdbc_url" name="jdbc_url" datatype="*1-150" nullmsg="连接地址不能为空" errormsg="连接地址长度不能超过150!" class="layui-input">
                    </div>
                    <div class="Validform_checktip"></div>
               </div>  
               <div class="layui-form-item">
                       <label for="jdbc_username" class="layui-form-label">
                       <span class="x-red">*</span>连接用户:</label>
                    <div class="layui-input-inline" > 
                          <input type="text" id="jdbc_username" name="jdbc_username" datatype="*1-50" nullmsg="连接用户不能为空" errormsg="连接用户长度不能超过50!" class="layui-input">
                    </div>
                    <div class="Validform_checktip"></div>
               </div>
                           
                <div class="layui-form-item">
                    <label for="jdbc_pass" class="layui-form-label">
                         <span class="x-red">*</span>连接密码:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="jdbc_pass" name="jdbc_pass" datatype="*1-50" errormsg="连接密码长度不能超过50!" class="layui-input">
                    </div>
                    <div class="Validform_checktip"></div>
                </div>
                <div class="layui-form-item">
                    <label for="jdbc_version" class="layui-form-label">
                         <span class="x-red">*</span>数据库版本:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="jdbc_version" name="jdbc_version" datatype="*1-50" nullmsg="数据库版本不能为空" errormsg="数据库版本长度不能超过50!" class="layui-input">
                    </div>
                    <div class="Validform_checktip"></div>
                </div>                                           
            </form>
            <div id="dlg-buttons" style="display: block">
                    <a id="confirm" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" οnclick="ModifySave()" style="width: 62px">提交</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" οnclick="closeDB()" style="width: 62px">取消</a>
           </div>
        </div>
    </div>
</div>


<script>
    var validObj = null; 
    
    //原先版本的表单验证
    validObj = $("#jdbc_user").Validform({
        tiptype:2,
        callback:false,
        ignoreHidden:true  //隐藏元素不验证
     });  

    var layer="";
  
      layui.use([ 'laydate', 'form', 'layer' ], function() {
        var laydate = layui.laydate;
        form = layui.form;
        layer = layui.layer;
    });
    
    
    $(function(){
        $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData',[{}]);
    });
    
    
    
    $('#dg').datagrid({
      method : 'post',
      loadMsg : '请稍候,数据加载中...',// 自定义等待消息
      emptyMsg : '查询数据为空...', 
      fitColumns:true,//列自适应宽度,不能和冻结列同时设置为true
      striped:true,//斑马线效果
      idField:'jdbc_uuid',//主键列
      rownumbers:true,//显示行号
      singleSelect:true,//是否单选
      pagination:true,//显示分页栏
      pageList:[10,20,50,100],//每页行数选择列表
      remoteSort:true,//是否服务器端排序,设成false,才能客户端排序
      sortName:'jdbc_creatdata',//设置排序列
      sortOrder:'desc',//排序方式
      toolbar:[{iconCls:'icon-add',text:'添加',handler:function(){
            jdbcadd();            
        }},
        {iconCls:'icon-edit',text:'修改',handler:function(){
            //判断是否选中一条记录
            var data=$('#dg').datagrid('getSelected');
            if(data){
                jdbcupd(data)
             }else{
                 $.messager.show({title:'提示',msg:'请选中一条记录',timeout:2000,showType:'show',style:{}});
             }
        }},
        {iconCls:'icon-remove',text:'删除',handler:function(){
            
            var data=$('#dg').datagrid('getSelections');
            
            if(data.length>0){
               $.messager.confirm("确认","确实要删除吗?",function(r){
                   if(r){
                   jdbcdel(data[0].jdbc_uuid);
                  }
               });
            }else{
              $.messager.show({title:'提示',msg:'请至少选中一条记录',timeout:2000,showType:'show',style:{}});
             }
          }}],
      columns : [ [{field : 'jdbc_uuid',title : '主键uuid',hidden : 'true'},
                     {field : 'jdbc_name',width : 100,title : '连接名',align : 'right'},
                   {field : 'jdbc_drivername',width : 130,title : '驱动名',align : 'right'},
                   {field : 'jdbc_url',width : 130,title : '连接地址',align : 'right'},
                   {field : 'jdbc_username',width : 130,title : '用户名',align : 'right'},
                   {field : 'jdbc_pass',width : 130,title : '密码',align : 'right'},
                   {field : 'jdbc_creatdata',width : 130,title : '创建时间',align : 'right'},
                   {field : 'jdbc_version',width : 130,title : '版本',align : 'right'},
                   ] ],
                });
    
    //分页查询    
    function pagerFilter(data){
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
        onSelectPage:function(pageNum, pageSize){
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh',{
                pageNumber:pageNum,
                pageSize:pageSize
            });
            dg.datagrid('loadData',data);
            }
            });
        $.ajax({
              url:'<%=basePath%>jdbc/jdbclist',
              data:{
                  "page":opts.pageNumber,
                  "rows":opts.pageSize
                  
              },
          type:'POST',
          async:false,
          typeData:'json',
          success:function(json){
              json=$.parseJSON(json);
            data.pageNo = json.retData.pageNum;
            data.rows = json.retData.list
            data.total=json.retData.total
            },
          error:function(){
               layer.msg("数据获取失败!!!")
          }
          })
        
        return data;
        }
      
      //添加
      function jdbcadd(){
          validObj.resetForm();
          $('#DBDiv').dialog({title:"添加jdbc连接池",width: "800",height:"450",closed:false})
      }
      
      //修改
      function jdbcupd(data){
          validObj.resetForm();
          $("#type").val("upd");
          $("#upd_jdbcuuid").val(data.jdbc_uuid);
          $("#jdbc_url").val(data.jdbc_url);
           $("#jdbc_name").val(data.jdbc_name);
           $("#jdbc_drivername").val(data.jdbc_drivername);
           $("#jdbc_username").val(data.jdbc_username);
           $("#jdbc_pass").val(data.jdbc_pass);
           $("#jdbc_version").val(data.jdbc_version);
          $('#DBDiv').dialog({title:"修改jdbc连接池",width: "800",height:"450",closed:false})
      }
      
      //删除
      function jdbcdel(jdbc_uuid){
          $.ajax({
              url:'<%=basePath%>jdbc/jdbcdel',
              data:{
                  "jdbc_uuid":jdbc_uuid
                  
              },
          type:'POST',
          async:false,
          typeData:'json',
          success:function(json){
              json=$.parseJSON(json);
              if(json.retCode=="R200"){
                  layer.msg(json.retMsg, {
                    icon : 1}, function() {
                     location.reload();
            });
              }else{
                  layer.msg(json.retMsg)
              }
              
        },
          error:function(){
               layer.msg("数据获取失败!!!")
          }
          })
      }
  
  //提交保存方法
  function ModifySave(){
      if(!validObj.check()){
      return false;
    }
    var type=$("#type").val();
      var upd_jdbcuuid=$("#upd_jdbcuuid").val();
    var jdbc_url=$("#jdbc_url").val();
    var jdbc_name=$("#jdbc_name").val();
    var jdbc_drivername=$("#jdbc_drivername").val();
    var jdbc_username=$("#jdbc_username").val();
    var jdbc_pass=$("#jdbc_pass").val();
    var jdbc_version=$("#jdbc_version").val();
    
    $.ajax({
              url:'<%=basePath%>jdbc/savajdbc',
              data:{
                  "type":type,
                  "jdbc_uuid":upd_jdbcuuid,
                  "jdbc_url":jdbc_url,
                  "jdbc_name":jdbc_name,
                  "jdbc_drivername":jdbc_drivername,
                  "jdbc_username":jdbc_username,
                  "jdbc_pass":jdbc_pass,
                  "jdbc_version":jdbc_version
              },
          type:'POST',
          async:false,
          typeData:'json',
          success:function(json){
              json=$.parseJSON(json);
              if(json.retCode=="R200"){
                  layer.msg(json.retMsg, {
                    icon : 1}, function() {
                        location.reload();
                    });
              }else{
                  layer.msg(json.retMsg)
              }
              
        },
          error:function(){
               layer.msg("数据获取失败!!!")
          }
          })
  }    
  
  //关闭弹出层
  function closeDB(){
   $("#jdbc_url").val("");
   $("#jdbc_name").val("");
   $("#jdbc_drivername").val("");
   $("#jdbc_username").val("");
   $("#jdbc_pass").val("");
   $("#jdbc_version").val("");
   $('#DBDiv').dialog('close');
  }
  
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值