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>