描述:使用者通過管理員身份登入到該頁面,可以對使用者做簡單的增查改刪的操作

JSP頁面的實現

(1)  checkbox

   a.checkbox 的全選問題

<input type="checkbox"  onclick="checkAll(this)"/>//checkbox屬性
<input type="checkbox"  name="id" value="'+element.id+'"/>//表單中checkbox屬性

            //全選/取消全選
           function checkAll(obj){
		if($(obj).is(":checked")==false){
			$("input[name='id']").each(function(i,e){
				$(e).attr("checked",false);
			});
		}else{
			$("input[name='id']").each(function(i,e){
				$(e).attr("checked",true);
			});
		}	
	}
 

(2) layer的彈窗控制元件

   a.修改

<input type="button" value="修改" id="update" onclick="edit()"/>//button屬性

var pageParam={
		pageType:"",
		id:""	
		}	
	function edit(){
		var id= $("input[name='id']:checked").val();
		pageParam.pageType="edit";
		pageParam.id=id;
		layer.open({
	    	type: 2,//1:自定義頁面;2:iframe;
	        title:"使用者表單",
	        area: ['600px', '350px'], 
	        content:"<%=request.getContextPath()%>/detail" ,
	        btn:["確定","關閉"],
	        yes:function(index,layero){	
	           //呼叫子頁面方法
	             var iframeWin = window[layero.find('iframe')[0]['name']];
	             iframeWin.commit();
	           },
	           btn2:function(index,layero){	
	          }
	      });
          }//整個表單的框架
 

點選修改button會彈出如下彈框                                                                                                                                 

<form id="myform">
	    <input type="hidden" name="id"/>
		<table id="update_table" >
				<tr>
					<td>使用者名稱：</td>
					<td><input type="text" id="username" name="username" /></td>
				</tr>
				<tr>
					<td>密    碼：</td>
					<td><input type="text" id="password" name="password"/></td>
				</tr>
				<tr>
					<td>性   別：</td>
					<td>
						<input type="radio" name="sex" value="男">男
						<input type="radio"name="sex" value="女">女 
					</td>
				</tr>
				<tr>
					<td>類   型：</td>
					<td>
					<select name="role">
					    <option value="">=請選擇=</option>
	               		<option value="管理員" >管理員</option>
	               		<option value="普通使用者">普通使用者</option>
	           		</select>
					</td>
				</tr>
		</table>
	</form>	
 

當通過checkbox勾選使用者時,會把該使用者的資訊回顯到這個彈框中

  $(function(){
		    //表單賦值
			var pageType=parent.pageParam.pageType;
			if(pageType=="edit"){
				var id=parent.pageParam.id;
				$.ajax({
					 url:"<%=request.getContextPath()%>/getUserById",
					 type:"get",
					 data:{id:id},
			         dataType:"json",
				     success:function(data){
				    	 $("#username").val(data.username);
				    	 $("#password").val(data.password);
				    	 $("input[name='sex'][value='"+data.sex+"']").attr("checked",true);
				    	 $("select[name='role']").find("option[value='"+data.role+"']").attr("selected",true);
				    	 $("input[name='id']").val(data.id);
				    	 
				     }
				})
			}
	      })

修改完畢後,需要將這個表單提交,然後重新重新整理頁面

	function commit(){
		   var pageType=parent.pageParam.pageType;
		   var urlStr="<%=request.getContextPath()%>/doregister";
		   if(pageType=="edit"){
			   urlStr="<%=request.getContextPath()%>/doupdate";
		   }
			$.ajax({
				 url:urlStr,
				 type:"post",
				 data:$("#myform").serialize(),
		         dataType:"json",
			     success:function(data){
					  if(data.status==1){
						   var index = window.parent.layer.getFrameIndex(window.name);
						   window.parent.layer.close(index); 
						   window.parent.find();//重新整理父頁面	
						   window.parent.layer.alert("操作成功!")
					  }
				   }   
			  });
		}	

   b.刪除

   點選刪除按鈕,會彈出如下彈窗

               //刪除
		function remove(){
			var ids="";
			$("input[name='id']:checked").each(function(i,e){//遍歷整個checkbox
				if(i==0){
					ids=$(e).val();
				}else{
					ids+=","+$(e).val();
				}
			});
			layer.confirm('確認刪除勾選項?', {icon: 3, title:'提示'}, function(index){
				$.ajax({
					 url:"<%=request.getContextPath()%>/dodelete",
					 type:"post",
					 data:{ids:ids},
			         dataType:"json",
				     success:function(data){
						  	if(data.status==1){
							 	layer.alert("刪除成功!");
							 	find();
							 }
					   }   
				   });
				  layer.close(index);
				});			
		}	

  c.新增

   與修改相似,同樣會彈出一個彈框,但此時不需要勾選checkbox,也不用回顯資料,只需要提交表單的資料到controller層進行使用者新增 即可

function add(){
    	layer.open({
    		type: 2,//1:自定義頁面;2:iframe;
        	title:"使用者表單",
            area: ['600px', '350px'], 
            content:"<%=request.getContextPath()%>/detail" ,
            btn:["確定","關閉"],
            yes:function(index,layero){	
            	//呼叫子頁面方法
            	 var iframeWin = window[layero.find('iframe')[0]['name']];
            	 iframeWin.commit();
            },
            btn2:function(index,layero){	
            }
        });
    }