首页
最新
文件
layui使用案例
硅谷探秘者
layui使用案例
硅谷探秘者
2019-05-27发表 2 0 2318 
<!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()
     }
});


fixed
没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。