wangdaping
/
wp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->


<!-- 日期控件start -->
<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
<!-- 日期控件end -->

<!-- 表单验证start -->
<script src="../../libs/js/form/validationRule.js" type="text/javascript"></script>
<script src="../../libs/js/form/validation.js" type="text/javascript"></script>
<!-- 表单验证end -->

<style>
.detailFormContainer{
	padding:5px 0 5px 10px;
	text-align:left;
	width:800px;
}
.detailFormTable{
	border:0;
}
.detailFormTable td{
	border:0;
	height:35px;
}
.detailFormTitle{
	height:30px;
	line-height:30px;
	font-size:16px;
	font-weight:bold;
	background-image: url(../../libs/images/formEle/groupTitle.jpg);
	background-repeat: no-repeat;
	background-position:0% 100%;
	padding:0 0 0 5px;
	
}

</style>
</head>
<body>
	<div class="padding_right5">
		<div id="maingrid"></div>
    </div>
<script type="text/javascript">
		var testData={"pager.pageNo":1,"pager.totalRows":21,"rows":[{"orgName":"财务部","userEducation":"专科","userEmployTime":"2012-09-04","userId":15,"userLoginName":"zhuguan","userName":"财务部主管","userPassword":"123456","userSex":"女"},{"orgName":"南京分公司","userEducation":"专科","userEmployTime":"2012-09-03","userId":2,"userLoginName":"guest","userName":"访客","userPassword":"123456","userSex":"男"},{"orgName":"行政部","userEducation":"专科","userEmployTime":"2012-09-04","userId":16,"userLoginName":"fuzeren","userName":"行政部负责人","userPassword":"123456","userSex":"男"},{"orgName":"市场部","userEducation":"专科","userEmployTime":null,"userId":22,"userLoginName":"dd","userName":"点对点","userPassword":"111111","userSex":"女"},{"orgName":"南京分公司","userEducation":"专科","userEmployTime":"2013-12-17","userId":21,"userLoginName":"11a","userName":"是","userPassword":"111111","userSex":"女"},{"orgName":"市场部","userEducation":"专科","userEmployTime":"2012-09-12","userId":14,"userLoginName":"jingli","userName":"市场部经理","userPassword":"123456","userSex":"男"},{"orgName":"市场1组","userEducation":"本科","userEmployTime":"2012-07-24","userId":1,"userLoginName":"chen","userName":"小陈","userPassword":"123456","userSex":"男"},{"orgName":"市场1组","userEducation":"专科","userEmployTime":"2012-08-28","userId":7,"userLoginName":"qian","userName":"小钱","userPassword":"123456","userSex":"男"},{"orgName":"杭州办事处","userEducation":"专科","userEmployTime":"2012-09-03","userId":11,"userLoginName":"zheng","userName":"小郑","userPassword":"123456","userSex":"女"},{"orgName":"市场2组","userEducation":"博士","userEmployTime":"2012-09-04","userId":6,"userLoginName":"zhao","userName":"小赵","userPassword":"123456","userSex":"男"}]};
		var userEducationData={"list":[{"value":"专科","key":"专科"},{"value":"本科","key":"本科"},{"value":"硕士","key":"硕士"},{"value":"博士","key":"博士"}]};
		var sexData={"list":[{"value":"男","key":"男"},{"value":"女","key":"女"}]};
        var grid;
        function initComplete(){
        	grid = $("#maingrid").quiGrid({
			columns:[
				{ display: '姓名', name: 'userName',     align: 'left', width: "20%"},
			    { display: '所属部门', name: 'orgName', 	 align: 'left', width: "20%"},
			    { display: '性别', name: 'userSex', align: 'left', width: "20%"},
			    { display: '入职时间', name: 'userEmployTime', 	 align: 'left',  width:"20%"} ,
			    { display: '学历', name: 'userEducation', 	 align: 'left',  width:"20%"} 
			  ],
			 data: testData,width:'100%', height:'100%',
                detail: { onShowDetail: showEmployees, height: 'auto' },
                onError: function (a, b){
                    //错误事件
                }
            });
        };
        
        //显示所选部门下的员工
        function showEmployees(row, detailPanel,callback){
        			var childGrid = document.createElement('div'); 
                    $(detailPanel).append(childGrid);
                   $(childGrid).addClass("detailFormContainer");
					var $table=$('<div class="detailFormTitle">本行编辑</div> <form id=form_'+row.userId+' method="post" action="" failAlert="表单填写不正确，请按要求填写！" showOnMouseOver="false">'+
					'<table class="detailFormTable" style="width:100%">'+
					'<tr><td width="100" class="ali03">姓名：</td><td><input type="text" id="inputa1" class="validate[required] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td></tr>'+
					'<tr><td class="ali03">所属部门：</td><td><input type="text" id="inputa2" class="validate[required] float_left" /><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td></tr>	'+
					'<tr><td class="ali03">性别：</td><td><select id="inputa3" class="validate[required] float_left" prompt="请选择" ></select><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td></tr>	'+
					'<tr><td class="ali03">入职时间：</td><td><input type="text" id="inputa4" class="date validate[required] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td></tr>	'+
					'<tr><td class="ali03">学历：</td><td><select id="inputa5" class="validate[required] float_left" prompt="请选择" ></select><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td></tr>'+
					'<tr><td colspan="2" class="ali01"><div style="padding-left:100px;"><input type="button" value="提交" id="inputa6" onclick=validateForm("#form_'+row.userId+'")>&nbsp;<input type="reset" value="重置" id="inputa7"/></div></td></tr>'+
				'</table></form>')
	
				$(childGrid).append($table);
				$table.find("#inputa1").val(row.userName);
				$table.find("#inputa1").render();
				$table.find("#inputa2").val(row.orgName);
				$table.find("#inputa2").render();
				$table.find("#inputa3").data("data",sexData);
				$table.find("#inputa3").attr("selectedValue",row.userSex);
				$table.find("#inputa3").render();
				$table.find("#inputa4").val(row.userEmployTime);
				$table.find("#inputa4").render();
				$table.find("#inputa5").data("data",userEducationData);
				$table.find("#inputa5").attr("selectedValue",row.userEducation);
				$table.find("#inputa5").render();
				$table.find("#inputa6").render();
				$table.find("#inputa7").render();
				
				$table.validationEngine({showOnMouseOver:false});		
        }
        
        function validateForm(containerId){
		    var valid = $(containerId).validationEngine({returnIsValid: true,showOnMouseOver:false});
			if(valid == true){
				top.Dialog.alert('进行提交处理，完成后刷新数据。',function(){
					grid.loadData();
				});
			}else{
			    top.Dialog.alert('表单填写不正确，请按要求填写！');
			} 
		}
        
        function clickHandler(str){
        	top.Dialog.alert("弹出窗口操作“"+str+"”，完成后刷新数据。",function(){
        		testData.rows[0].open=false;
        		//第二个参数表示刷新数据时保持之前展开的子表
        		grid.loadData(null,true);
        	})
        }
        
    </script>		
</body>
</html>