文件
专题 ·
最新
首页
  • 我的主页卡化石
  • off中心
  • 基本设置
  • 文件上传

layui使用案例

硅谷探秘者 2006 0 2 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"><meta>
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/css/page_common.css" media="all">
  <link rel="icon" href="/img/builder.ico" type="image/x-icon" />
  <style type="text/css">
  </style>
</head>
<body>
	<div class="box">
		 <div class="title"><h3><b>用户管理</b></h3></div>
		 <hr>
		 <div class="layui-form-item">
			 <div class="layui-inline">
			    <label class="layui-form-label">用户名</label>
			    <div class="layui-input-inline">
			      <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
			    </div>
		    </div>
		    <div class="layui-inline">
			    <button class="layui-btn layui-btn-normal search" data-type="reload" id="search">搜索</button>
		    </div>
		  </div>
		<table class="layui-hide" id="user" lay-filter="test"></table>
	</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="addUser">添加用户</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-set-sm">&nbsp;编辑</i></a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="role"><i class="layui-icon layui-icon-username">&nbsp;角色修改</i></a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">&nbsp;删除</i></a>
</script>

<script type="text/html" id="addModel">
<div style="margin-left:50px;">
<div class="layui-form-item">
		    <label class="layui-form-label">用户名:</label>
		    <div class="layui-input-inline">
		      <input type="text" name="ausername" id="ausername" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		    </div>
	  </div>
<div class="layui-form-item">
		    <label class="layui-form-label">用户姓名:</label>
		    <div class="layui-input-inline">
		      <input type="text" name="afullname" id="afullname" lay-verify="required" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
		    </div>
	  </div>
</div>
</script>

<script type="text/html" id="updateModel">
<div style="margin-left:50px;">
<div class="layui-form-item">
		    <label class="layui-form-label">用户名:</label>
		    <div class="layui-input-inline">
		      <input type="text" name="upusername" id="upusername" value="{{userName}}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		    </div>
	  </div>
<div class="layui-form-item">
		    <label class="layui-form-label">用户姓名:</label>
		    <div class="layui-input-inline">
		      <input type="text" name="upfullname" id="upfullname" value="{{fullName}}" lay-verify="required" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
		    </div>
	  </div>
</div>
</script>

<script type="text/html" id="roleModel">
<form class="layui-form" action="">
<div class="layui-form-item" pane="">
    <div class="layui-input-block" id="roleList">
		{{each data}}
			<input type="checkbox" ids="{{$value.id}}" class="ro" name="like1[write]" lay-skin="primary" title="{{$value.roleDes}}&nbsp;[{{$value.roleName}}]" {{if $value.have != 0}}checked=""{{/if}}><br>
		{{/each}}
    </div>
  </div>
</form>
</script>  
 
<script src="../layuiadmin/layui/layui.js"></script>          
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
 <script src="/js/template.js"></script>
<script>
layui.use(['table','form'], function(){
  var table = layui.table;
  var form = layui.form
  var $ = layui.$
  table.render({
    elem: '#user'
    ,id: 'tableReload'
    ,url:'/shiro/userList'
    ,toolbar: '#toolbarDemo'
    ,title: '用户数据表'
    ,cols: [
	    	[
		      {type: 'checkbox', fixed: 'left'}
		      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
		      ,{field:'userName', title:'用户名', }
		      ,{field:'fullName', title:'真实姓名',}
		      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:265}
		    ]
    	]
    ,page: true
  });
  $("#username").keydown(function(event){
      if(event.keyCode==13){
    	  document.getElementById("search").click();
      }
  });
    var active = {
	     reload: function () {
	      	var username=$('#username').val();
	          table.reload('tableReload', {
	              page: {
	                  curr: 1 //重新从第 1 页开始
	              }
	              , where: {
	            	  username: username,
	              }
	          });
	      }
	  };
	  $('.search').on('click', function () {
	      var type = $(this).data('type');
	      active[type] ? active[type].call(this) : '';
	  });
  
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'addUser':
    	  top.layer.open({
    		  content:template('addModel', obj)
        	  ,btn: ['确定','取消']
    	  	  ,area:["500px","250px"]
    	  	  ,title:'添加用户'
	          ,yes:function(index, layero){
	        	  var username=$(top.getActiveTab("ausername"));
	        	  if(username.val()==null||username.val()==""){
	        		  username.css("border-color","red");
	        		  return;
	        	  }
	        	  var fullname=$(top.getActiveTab("afullname"));
	        	  if(fullname.val()==null||fullname.val()==""){
	        		  fullname.css("border-color","red");
	        		  return;
	        	  }
	        	  $.ajax({
	        		  url:'/shiro/addUser',
	        		  dataType:'json',
	        		  type:'post',
	        		  data:{username:username.val(),fullname:fullname.val()},
	        		  success:function(res){
	        			  if(res.code==200){
		        			  layui.table.reload('tableReload')
		        			  top.layer.msg(res.msg,{icon:1,time:2000});
	        			  }else{
		        			  top.layer.msg(res.msg,{icon:2,time:2000});
	        			  }
	        		  },
	        		  error:function(res){
	        			  top.layer.msg("网络异常");
	        		  }
	        	  })
	        	  top.layer.close(index);
	          },
	          btn2:function(index){
	        	  top.layer.msg("已经取消",{icon:1,time:500})
	          }
    	  });
      break;
    };
  });
  var rolebut=0;
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      top.layer.confirm('真的删除行么',{
    	  btn: ['确定','取消']
      },function(index){
        $.ajax({
	    	url:'/shiro/delUser',
	    	type:'post',
	    	dataType:'json',
	    	data:{id:obj.data.id},
	    	success:function(res){
	    		top.layer.closeAll();
	    		if(res.code==200){
		    		obj.del();
		    		top.layer.msg(res.msg);
	    		}else{
	    			top.layer.msg(res.msg);
	    		}
	    	},
	    	error:function(){
	    		top.layer.msg("网络异常");
	    	}
        })
        top.layer.close(index);
      },function(index){
    	  top.layer.msg("已经取消")
      });
    } else if(obj.event === 'edit'){
    	var id=data.id;
    	top.layer.open({
  		  content:template('updateModel', data)
      	  ,btn: ['确定','取消']
  	  	  ,area:["500px","250px"]
  	  	  ,title:'修改用户信息'
          ,yes:function(index, layero){
        	  var username=$(top.getActiveTab("upusername"));
        	  var fullname=$(top.getActiveTab("upfullname"));
        	  if(username.val()==null||username.val()==""){
        		  username.css("border-color","red");
        		  return;
        	  }
        	  if(fullname.val()==null||fullname.val()==""){
        		  fullname.css("border-color","red");
        		  return;
        	  }
        	  if(fullname.val()==data.fullName && username.val()==data.userName){
    			  top.layer.msg("您没有对当前的数据进行任何操作",{icon:2,time:2000});
    			  return;
    		  }
        	  $.ajax({
        		  url:'/shiro/updateUser',
        		  dataType:'json',
        		  type:'post',
        		  data:{userId:id,username:username.val(),fullname:fullname.val()},
        		  success:function(res){
        			  if(res.code==200){
	        			  obj.update({//修改某一行元素
							userName:username.val(),
							fullName: fullname.val()
						  });
	        			  top.layer.msg(res.msg,{icon:1,time:2000});
        			  }else{
	        			  top.layer.msg(res.msg,{icon:2,time:2000});
        			  }
        		  },
        		  error:function(res){
        			  top.layer.msg("网络异常");
        		  }
        	  })
        	  top.layer.close(index);
          },
          btn2:function(index){
        	  top.layer.msg("已经取消",{icon:1,time:500})
          }
  	  });
    }else if(obj.event === 'role'){
    	if(rolebut==0){
    		rolebut=1;
    		$.ajax({
   	 		   url:'/shiro/getRoleList',
   	 		   dataType:'json',
   	 		   type:'post',
   	 		   data:{userId:data.id},
   	 		   success:function(res){
   	 			   if(res.code==200){
   		 			    layer.open({
   		 		   		   content:template('roleModel', res)
   		 		       	   ,btn: ['确定','取消']
   		 		   	  	   ,area:["450px","350px"]
   		 		   	  	   ,title:'修改用户角色信息'
   		 		           ,yes:function(index, layero){
   		 		        	   var ids="";
   		 		        	   $(".ro").each(function(){
   		 		        		   if($(this).prop("checked")){
   		 		        			   ids+=$(this).attr("ids")+"-";
   		 		        		   }
   		 		        	   })
   		 		        	   $.ajax({
					   	 		   url:'/shiro/setRoleList',
					   	 		   dataType:'json',
					   	 		   type:'post',
					   	 		   data:{userId:data.id,ids:ids},
					   	 		   success:function(res){
					   	 			   if(res.code==200){
					   	 				   top.layer.msg(res.msg,{icon:1,time:1000});
					   	 			   }else{
					   	 				   top.layer.msg(res.msg,{icon:2,time:1000});
					   	 			   }
					   	 			   console.log(res)
					   	 		   }
   		 		        	   })
   		 		         	  layer.close(index);
   		 		           },
   		 		           btn2:function(index){
   		 		         	  top.layer.msg("已经取消",{icon:1,time:500})
   		 		           }
   		 		           ,success:function(){
   		 		        	  form.render();
   		 		        	  rolebut=0;
   		 		           }
   		 		   	  	});
   	 			   }else{
   	 				  top.layer.msg(res.msg,{icon:2,time:2000})
   	 			   }
   	 		   },
   	 		   error:function(res){
   	 			   top.layer.msg("网络异常",{icon:2,time:2000})
   	 		   }
   	 	   })
    	}
    }
  });
});
</script>
</body>
</html>


layui渲染select执行：form.render('select');





<select  lay-filter="business"  class="select"  lay-verify="type" name="business"  >

   <option value="0"  >请选择</option>

    <option value="1"  >张三</option>

</select>


layui select选择事件监听

form.on('select(business)', function(data){
    alert(1)
})



layui 表格从新渲染：

table.reload('table', {
     where: {
          kcId:$('#kc').val(),
          zjId:$('#zj').val(),
          zt:$('#zt').val()
     }
});


评论区
请写下您的评论...
暂无评论...
猜你喜欢
前端(h5) 1779 引入layui相关组件layui.use(['form','laypage'],function(){ var$=layui.$; varlaypage=layui.laypage
数据库 1149 用户管理创建用户删除用户设置密码权限管理授权撤销授权刷新权限一、用户管理1.创建用户语法：createuser[用户名]identifiedby'[密码
数据结构与算法 1721 java使用欧几里得算法计算比例的方法 publicstaticvoidmain(String[]args){ System.out.println(bili(2,6
数据结构与算法 6803 矩阵中的每一盏灯设置一个初始状态。请你写一个程序，确定需要按下那些按钮，插好使得所有的灯都被熄灭。例图1：例图2：叉号代表按下的按钮输入：第一行是一个正整数n表示需要解决的案例数。每一个案例由5行组成，
框架 1633 最近在项目中遇到了一个批量导入excel的功能，excel导入用到的是esaypoi，可以轻松将excel中的数据封装成对象，但是不知为何，突然转换对象的过程变得很慢，一万条数据得转换一分钟。无奈只
mqtt协议 972 pom依赖dependencygroupIdorg.eclipse.paho/groupIdartifactIdorg.eclipse.paho.client.mqttv3/artifactIdversion1.2.0/version/dependency发布端importorg.eclipse.paho.client.mqttv3.MqttClient;importorg.eclipse.pah
official 1018 服务端packagecom.weblog.netty.basic.server; importio.netty.bootstrap.ServerBootstrap; importio.netty.channel.*; importio.netty.channel.nio.NioEventLoopGroup; importio.netty.channel.socket.SocketChannel;
java基础 3236 asm实例对象方法的调用1.需要的jar包2.我们需要通过asm生成的目标类如下：packageclub.jiajia.test3;publicclassExamp5
最新发表
归档
2018-11  12 2018-12  33 2019-01  28 2019-02  28 2019-03  32 2019-04  27 2019-05  33 2019-06  6 2019-07  12 2019-08  12 2019-09  21 2019-10  8 2019-11  15 2019-12  25 2020-01  9 2020-02  5 2020-03  16 2020-04  4 2020-06  1 2020-07  7 2020-08  13 2020-09  9 2020-10  5 2020-12  3 2021-01  1 2021-02  5 2021-03  7 2021-04  4 2021-05  4 2021-06  1 2021-07  7 2021-08  2 2021-09  8 2021-10  9 2021-11  16 2021-12  14 2022-01  7 2022-05  1 2022-08  3 2022-09  2 2022-10  2 2022-12  5 2023-01  3 2023-02  1 2023-03  4 2023-04  2 2023-06  3 2023-07  4 2023-08  1 2023-10  1 2024-02  1 2024-03  1 2024-04  1 2024-08  1
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议 无聊的知识 jenkins springboot mqtt协议 keepalived minio mysql ensp 网络基础 xxl-job rabbitmq haproxy srs 音视频 webrtc javascript 加密算法
目录
没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。