LayUI数据表格--工具栏




<div  class="searchDiv">
	<div class="layui-btn-group searchDiv" style="float:left;margin-right:150px;">
		<button class="layui-btn" data-type="addUser">
		<i class="fa fa-home fa-lg" style="margin-right:5px;"></i>添加用户
		</button>
	</div>
	 <div class="searchDiv"  style="margin-right:0px;" >
		      用户名:
		  <div class="layui-inline">
		    <input class="layui-input" name="name" id="name" autocomplete="off">
		  </div>
		     手机号:
		  <div class="layui-inline">
		    <input class="layui-input" name="mobile" id="mobile" autocomplete="off" maxlength=11
		    	placeholder="请输入数字" onkeyup="this.value=this.value.replace(/\D/g,'')">
		  </div>
		  <button class="layui-btn" data-type="reload">搜索</button>
		  <button class="layui-btn" data-type="reSet">重置</button>
	</div>
</div>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>

<table class="layui-table" lay-data="{url:'<%=path%>/user/userList', page:true,toolbar:'#toolbarDemo',
	defaultToolbar:['filter'], id:'userTab'}" lay-filter="userTabFilter">
  <thead>
    <tr>
      <th lay-data="{type: 'radio', fixed: 'left'}"></th>
      <th lay-data="{field:'userId',width:120,  fixed: true}">登录名</th>
      <th lay-data="{field:'name',}">用户名</th>
      <th lay-data="{field:'mobile', }">手机号</th>
      <th lay-data="{field:'email', }">邮箱</th>
      <th lay-data="{field:'status', width:80 , templet:'#statusTpl'}">状态</th>
      <th lay-data="{field:'loginIpRestrictFlag', width:120 , templet:'#ipTpl'}">登录IP限制</th>
      <th lay-data="{fixed: 'right', align:'center',width:350, toolbar: '#toolBar'}">操作</th>
    </tr>
  </thead>
</table>
<script type="text/html" id="ipTpl">
	{{#  if(d.loginIpRestrictFlag === '0'){ }}
   		 <span style="color: #F581B1;">关闭</span>
  	{{#  } else if(d.loginIpRestrictFlag === '1'){ }}
   		 <span style="color: green;">开启</span>
  	{{#  } }}	
</script>

<script type="text/html" id="statusTpl">
	{{#  if(d.status === '1'){ }}
   		 <span style="color: green;">正常</span>
  	{{#  } else if(d.status === '0'){ }}
   		 <span style="color: #F581B1;">未启用</span>
  	{{#  } else if(d.status === '2'){ }}
   		 <span style="color: #F581B1;">冻结</span>
  	{{#  } else if(d.status === '9'){ }}
		 <span style="color: red;">停用</span>	
  	{{#  } }}	
</script>

<script type="text/html" id="toolBar">
  <a class="layui-btn layui-btn-xs" lay-event="view">查看信息</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="setRole">授予角色</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="resetPass">重置密码</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

           
<%@ include file="/WEB-INF/comm/footer.jsp" %>
<script type="text/javascript">

var $ = layui.query ;
var layer = layui.layer;
layui.use('table', function(){
	
  var table = layui.table;
  
//工具栏事件
table.on('toolbar(userTabFilter)', function(obj){
	var checkStatus = table.checkStatus(obj.config.id);
	// checkStatus.data获取到的值是json对象的 数组,适用于checkbox , 本处用的是radio,所以获取第一个元素
	var data = (checkStatus.data)[0];
	
	var event = obj.event ;
	if(event == 'getCheckData'){
		console.log("data.userId : " + data.userId );//
	} else if(event == 'getCheckLength'){
		var data = checkStatus.data;
		layer.msg('选中了:'+ data.length + ' 个');
	} else if (event == 'isAll'){
		layer.msg(checkStatus.isAll ? '全选': '未全选')
	}
});
  
  //监听工具条
  table.on('tool(userTabFilter)', function(obj){
    var data = obj.data;
    if(obj.event === 'resetPass'){
    	parent.layer.confirm('确定重置密码?【'+data.userId+'】', function(index){
    		resetPass(data.userId) ;
    	});
    } else if(obj.event === 'setRole'){
    	//window.location.href= path+"/user/toSetRole?id="+data.id ;
    	var userId = data.userId ;
    	var parentLayer = parent.layer ;
	  	  var setRole = parentLayer.open({
	            type: 2 //类型
	            ,title: "授予角色"
	            ,area: ['400px', '300px']
	            ,shade: 0.6
	            ,anim: 4
	            ,shadeClose:false
	            ,maxmin: false
	            ,content: "<%=path%>/user/setRolePage?userId="+userId
	            ,yes: function(){
	            }
	            ,btn2: function(){
	          	  parentLayer.closeAll();
	            }
	            ,zIndex: parentLayer.zIndex //重点1
	            ,success: function(layero){
	          	  parentLayer.setTop(layero); //重点2
	            }
	         });
    	
    } else if(obj.event === 'view'){
    	var userId = data.userId ;
    	var parentLayer = parent.layer ;
	  	  var setRole = parentLayer.open({
	            type: 2 //类型
	            ,title: "用户信息"
	            ,area: ['420px', '560px']
	            ,shade: 0.6
	            ,anim: 4
	            ,shadeClose:true
	            ,resize:false
	            ,maxmin: false
	            ,content: "<%=path%>/user/viewPage?userId="+userId
	            ,yes: function(){
	            }
	            ,btn2: function(){
	          	  parentLayer.closeAll();
	            }
	            ,zIndex: parentLayer.zIndex //重点1
	            ,success: function(layero){
	          	  parentLayer.setTop(layero); //重点2
	            }
	         });
    	
    } else if(obj.event === 'del'){
      	parent.layer.confirm('确定删除该行?【'+data.userId+'】', function(index){
      		delUser(data.userId , parent.layer , table) ;
       		//obj.del();
      		parent.layer.close(index);
      	});
    } else if(obj.event === 'edit'){
      //弹出编辑页面
      var userId = data.userId
      var parentLayer = parent.layer;
      var updateUser = parentLayer.open({
          type: 2 //类型
          ,title: "编辑用户信息"
          ,area: ['450px', '600px']
          ,shade: 0.5
          ,anim: 1
          ,shadeClose:false
          ,maxmin: false
          ,resize: false
          ,content: "<%=path%>/user/updatePage?userId="+userId
          ,yes: function(){
          }
          ,btn2: function(){
        	  parentLayer.closeAll();
          }
          ,zIndex: parentLayer.zIndex //重点1
          ,success: function(layero){
        	  parentLayer.setTop(layero); //重点2
          }
       });
    }
  });
  
  var $ = layui.$, active = {
	 reload: function(){
        //执行重载
        table.reload('userTab', {
          	page: {curr: 1 }, //重新从第 1 页开始
         	where: { //查询条件
          		name: $('#name').val().trim(),
          		mobile:$('#mobile').val().trim()
          	}
        });
	 },
	 reSet: function(){
		 $('#name').val("") ;$('#mobile').val("");
        //执行重载
        table.reload('userTab', {
          	page: {curr: 1 }, //重新从第 1 页开始
         	where: { //查询条件
         		name: '',mobile:''
          	}
        });
	 },
	 addUser:function(){
		  //弹出添加页面
	      var parentLayer = parent.layer ;
	      parentLayer.open({
	    	  type: 2 //类型
	          ,title: "添加用户"
	          ,area: ['450px', '600px']
	          ,shade: 0.5
	          ,anim: 1
	          ,shadeClose:false
	          ,maxmin: false
	          ,resize: false
	          ,content: "<%=path%>/user/addPage"
	          ,yes: function(){
	          }
	          ,btn2: function(){
	        	  parentLayer.closeAll();
	          }
	          ,zIndex: parentLayer.zIndex //重点1
	          ,success: function(layero){
	        	  parentLayer.setTop(layero); //重点2
	          }
	       });
	 }
  };
  
  $('.searchDiv .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });





layui

2020.11.18 20:47

https://www.meihaocloud.com.com/245.html , 欢迎转载,请在文章页标出原文连接 !


Copyright © 2020 千夕网 联系站长

粤公网安备 44030302001408号 粤ICP备19099833号-1