layui增删改查

增加

编辑

删除

搜索

引入css样式和js
	<link rel="stylesheet" href="css/layui.css" media="all">
	<script src="layui.js"></script>

	<div class="layui-btn-group demoTable">
		<button type="button" class="layui-btn" id="btn_add">
			<i class="layui-icon">&#xe608;</i> 添加
		</button>
		<button type="button" class="layui-btn layui-btn-danger"
			data-type="getCheckData" id="dels">
			<i class="layui-icon">批量删除</i>
		</button>
	</div>

<table class="layui-hide" id="demo" lay-filter="test" ></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 

/**
 * 主页面绑定数据
 */
layui.use(['table','layer','form'], function(){
   var table = layui.table
   ,layer=layui.layer
   ,form=layui.form
   ,$=layui.jquery
   
   //表格渲染
   table.render({
     elem: '#test'
     ,height: 600
     ,url: 'studentAction.action?operation=findAllStudent' //数据接口
     ,page: true //开启分页
     ,method:'post'//模糊查询姓名乱码解决
     ,response:{
    	 code:'code',
    	 data:'data'
     }
//    ,toolbar: 'default'//工具条（添加，删除，修改图标）
     ,cols: [[ //表头
    	 { checkbox:true, fixed: 'left',align: 'center',width: '5%' }, 
         { field: 'sid', title: '编号', width: '10%',align: 'center' }, 
         { field: 'sname', title: '姓名', width: '10%' ,align: 'center' }, 
         { field: 'snamePinyin', title: '姓名拼音', width: '15%' ,align: 'center'}, 
         { field: 'age', title: '年龄', width: '10%',align: 'center' }, 
         { field: 'remark', title: '备注', width: '20%',align: 'center' }, 
         { fixed: 'right',title: '操作', width: '30%', align: 'center', toolbar: '#barDemo' }
     ]],
     id: 'testReload'
   });
  
   /**
    *   添加
    */
   		$('#btn_add').on('click',function(index){
	          layer.open({
	       	   type: 1 ,
	       	   title:"添加",
	       	   area: ['500px', '300px'],
	       	   shadeClose:false,
	       	   content: $('#box1'), //这里content是一个DOM，最好该元素要存放在body
	          });
	          $("#add").click(function () {
	        	var sname = $("#name").val();
	        	var age =$("#age").val();
	        	var bz=$("#remark").val();
	        	  $.ajax({
	  				type:"post",
	  				data:{
	  					"sname":sname,
	  					"age":age,
	  					"remark":bz
	  				},
	  				url:"${path}/studentAction.action?operation=addStudent",
	  				dataType:"json",
	  				success:function(ok){
	  				if(ok.code==1){
	  					location.href="students.jsp";
	  				}
	  				}
	  			})
				})
   		});

			   /**
  				 *   批量删除
 			     */
           $("#dels").on('click',function(){
               //获取选中状态            
               var checkStatus = table.checkStatus('testReload');
               //获取选中数量
               var selectCount = checkStatus.data.length;
//   				 console.info(selectCount);
               if(selectCount == 0){
                   layer.msg('批量删除至少选中一项数据',function(){});
                   return false;
               }
               layer.confirm('真的要删除选中的项吗？',function(index){
                   layer.close(index);
                   index = layer.load(1, {shade: [0.1,'#fff']});
                   
                      var isStr="";
                   for(var i=0; i<selectCount; i++){
                       isStr = isStr + "," + checkStatus.data[i].sid;
                   }
//    						console.info(isStr);
                        $.ajax({
                       type:'post',
                       data:{"isStr":isStr},
   					   dataType:'json',
                       url:'studentAction.action?operation=delStudents',
                       success:function(data){
                           if(data.code==1){
                            table.reload('testReload', {})
                             }
                           layer.close(index);
                           layer.msg(data.msg);
                       },error:function(code){   
                           parent.layer.msg('操作失败!',{icon: 5,time:1000});  
                       }
                   });
               })
           });               
 

   /**
    *  模糊查询
    */
   var $ = layui.$, active = {
           //查询
           reload: function () {
               var name = $('#sname');//书籍名称 根据 id来取值
               console.log(name.val());
               table.reload('testReload', {
                   where: {
                       key: 'sname',
                       sname: name.val()
                   }
               });
           }
   };
   $('.layui-form .layui-btn').on('click', function () {
       var type = $(this).data('type');
       active[type] ? active[type].call(this) : '';
   });

});

	//监听工具条
   table.on('tool(test)', function(obj){ //tool是工具条事件名，test是table原始容器的属				性 lay-filter="对应的值"
     var data = obj.data; //获得当前行数据
     var layEvent = obj.event; //获得 lay-event 对应的值
     var tr = obj.tr; //获得当前行对象
    
     if(layEvent === 'detail'){ //查看
       //do somehing
     } else if(layEvent === 'del'){ //删除
    	 var path=document.getElementById('path').value;
      	 layer.confirm('真的删除么', function(index){
         obj.del(); 
         layer.close(index);
         //向服务端发送删除指令
         $.getJSON(path+'/studentAction.action?operation=delStudent',{sid: data.sid}, function(ret){
             layer.close(index);//关闭弹窗
             table.reload('testReload', {//重载表格
             })
       		});
    	});
     } else if(layEvent === 'edit'){ //编辑
     //修改页面绑定数据
    	 var path=document.getElementById('path').value;
     	   var index= layer.open({
    		  type: 2, 
    		  title:'修改',
    		  area: ['500px', '300px'],
    		  content:path+'/studentAction.action?operation=getOndstudent&sid='+data.sid, 
    		  
 			});
        }
   });

修改页面对应的js代码

<script type="text/javascript">
	layui.use(['table','layer','form'],function(){
		var table=layui.table
		,layer=layui.layer
		,layer=layui.form
		,$=layui.jquery
		
		edit();//执行修改的方法
			
	});
	
	
	 /**
	    *   修改学生信息
	   */
	function edit(){
			$('#myform').click(function(){
			$.ajax({
				data:{
					sid:$('#sid').val(),
					sname:$('#sname').val(),
					age:$('#age').val(),
					remark:$('#remark').val(),
				},
				type:'post',
				url:"studentAction.action?operation=updateStudent",
				success:function(data){
					var json=JSON.parse(data);
					if(json.code==1){
					 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
			         parent.layer.close(index); //再执行关闭
			         parent.layui.table.reload('testReload');
					}
				},
				error:function(e){
					alert(e);
				}
			})
			
		});
	}
	
</script>