ko学习记录记载

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="base" value="${pageContext.request.contextPath}" />
<!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" />
	<title></title>
	<link href="${base}/resources/common/jquery-ztable2/css/blue/ztable.css" rel="stylesheet" type="text/css" id="ui-ztable-css-load">
	<link href="${base}/resources/default/css/style.css" rel="stylesheet" type="text/css" />
	<jsp:include page="/WEB-INF/views/default/common/common.jsp" />
	<script type="text/javascript" src="${base}/resources/common/jquery-ztable2/js/knockout-2.2.1.js"></script>
	<script type="text/javascript" src="${base}/resources/common/jquery-ztable2/js/zTable2.js"></script>
</head>
<script>
var onePerson;
$(document).ready(function() {
	//var _zView = {};
	
	var date = new Date();
	 date.setDate(1);
	 var week = date.getDay();
	 var weeks;
	 var constDayOfWeek = [];
	 for(var j=week;j<=7+week;j++){
		if((j%7)==1){
			weeks="一";
		}else if((j%7)==2){
			weeks="二";
		}else if((j%7)==3){
			weeks="三";
		}else if((j%7)==4){
			weeks="四";
		}else if((j%7)==5){
			weeks="五";
		}else if((j%7)==6){
			weeks="六";
		}else if((j%7)==0){
			weeks="日";
		}
		constDayOfWeek.push(weeks);	
	 }
	 
	 date.setMonth(date.getMonth() + 1);
	 var lastDate = new Date(date - 3600000*24);
	 //alert("本月最后一天是 " + lastDate.getDate());
	 
	_zView.monthDays = ko.observableArray([]);
	for(var i=0;i<lastDate.getDate();i++){
		_zView.monthDays.push({idx:i+1, css: (constDayOfWeek[i%7]=='日'||constDayOfWeek[i%7]=='六')?'xxr1':'', dayOfWeek: constDayOfWeek[i%7]});
	}
	_zView.userList = ko.observableArray([]);
	onePerson=function(name, days,id){
		this.name = ko.observable(name);
		this.dayList = ko.observableArray([]);
		this.id=id;
		for(var i=0; i<days.length && i<lastDate.getDate(); i++){
			this.dayList.push(days.substring(i, i+1));
		}
		return this;
	}
	
	var tempUserList=eval('${detailList}');
	var userList=[];
	for(var i in tempUserList){
		var person=new onePerson(tempUserList[i].name,tempUserList[i].detail,tempUserList[i].id);
		userList.push(person);
	}
	_zView.myFunction= function(id,y,x,data, event) {
		changeDetail(id,y(),x());
    }
	_zView.userList(userList);
	ko.applyBindings(_zView);


});

function changeDetail(id,y,x){
	$.fn.zWindow({
		width:400,
		height:140,
		titleable:true,
		title: "出勤状态",
		moveable:true,
		windowType:'iframe',
		windowSrc:'${base}/attendance/changeDetail/'+id+"/"+y+"/"+x,
		resizeable:true,
		isMode:true});
}
function search(){
	ztable.refresh();
}


</script>
<body>
<div class="container">
<div class="main" style="margin-top:130px;">
<div class="title"><b>考勤管理</b>
<a title="返回" class="return" href="考勤管理3.html"></a>
<a title="统计" class="view" href="考勤管理1.html"></a>
</div>
<div class="info">
<table class="infobg" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td align="right">员工姓名</td>
			<td><input type="text" class="srk" /></td>
			<td align="right">员工编号</td>
			<td colspan="2"><select><option></option></select></td>
			</tr>
		<tr>
			<td align="right">出勤日期</td>
			<td><input type="text" class="srk" /></td>
			<td align="right">迟到/早退查询</td>
			<td><select><option></option></select></td>
			<td><input style="margin:0px;" type="button" class="btn" value="查 询" onclick="search();"/></td>
		</tr>
	</table>
</div>
<h2><em>统计一个月的出勤明细,单击出勤小图标(√、—、☆、◇、 ⊙),可以对某一天的出勤情况进行编辑</em><cite>√正常 —假期 ☆加班 ◇事假 ⊙出差</cite></h2>
<table class="kqbg" border="0" id="zTable" cellspacing="1" cellpadding="0">
	<tr class="bt">
		<td rowspan="2" >姓名</td>
		<!-- ko foreach:{data: _zView.monthDays, as: 'oneDay'} --><td data-bind="{css:css, text:dayOfWeek}"></td><!-- /ko -->
	</tr>
	<tr class="bt">
		<!-- ko foreach:{data: _zView.monthDays, as: 'oneDay'} --><td data-bind="{css:css, text:idx}"></td><!-- /ko -->
	</tr>
	<tbody data-bind="foreach: {data: _zView.userList, as: 'user'}">
		<tr>
			<td><!--ko text:user.name --><!-- /ko --></td>
			<!-- ko foreach:{data: dayList, as: 'day'} -->
			<td data-bind="{css:$root.monthDays()[$index()].css,click: function(data, event) { $root.myFunction(user.id, $index,$parentContext.$index, data, event) }}" name="hgs">
			
				<!--ko if:$data=='0' --><span>—</span><!-- /ko -->
				<!--ko if:$data=='1' --><span>√</span><!-- /ko -->
				<!--ko if:$data=='2' --><span>☆</span><!-- /ko -->
				<!--ko if:$data=='3' --><span>◇</span><!-- /ko -->
				<!--ko if:$data=='4' --><span>⊙</span><!-- /ko -->
			
			</td>
			<!-- /ko -->
		</tr>
	</tbody>
</table>
</div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="base" value="${pageContext.request.contextPath}" />
<!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" />
<title>首页</title>
<link href="${base}/resources/common/jquery-ztable2/css/blue/ztable.css" rel="stylesheet" type="text/css" id="ui-ztable-css-load">
<link href="${base}/resources/default/css/style.css" rel="stylesheet" type="text/css" />
<jsp:include page="/WEB-INF/views/default/common/common.jsp" />
<script type="text/javascript" src="${base}/resources/common/jquery-ztable2/js/knockout-2.2.1.js"></script>
<script type="text/javascript" src="${base}/resources/common/jquery-ztable2/js/zTable2.js"></script>
<script>
$(function(){
	$("select").each(function(){
		$(this).val($(this).attr("data"));
	});
})
function save(){
	var detail=changeStr('${detail}','${y}',$("#indexValue").val());
	$.get("${base}/attendance/changeDetail2/"+'${id}'+'/'+detail,function(bool){
		if(bool){debugger;
		var p =parent._zView.userList()[parseInt('${x}')];
		var s=[];
		$(parent._zView.userList()).each(function(i,v){
			if(i!='${x}'){
				s.push(v);
			}else{
				s.push(new parent.onePerson(p.name(),detail,p.id));
			}
		});
		parent._zView.userList(s);
			alert("修改成功");
			parent.$.zWindow.close();
		}else{
			alert("修改失败");
		}
	});
}

function changeStr(str,idx,value){
	return str.substr(0,idx)+value+str.substr(parseInt(idx)+1);
}
</script>
</head>
<body>
<div class="main" style="min-height: 0px;margin-top: 10px;" >
<div class="title"><b>出勤状态</b></div>
<div class="info">
	<table class="infobg" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td align="right">状态</td>
			<td><select id="indexValue" data="${indexValue}">
				<option value="0">假期</option>
				<option value="1">正常</option>
				<option value="2">加班</option>
				<option value="3">事假</option>
				<option value="4">出差</option>
			</select></td>
			<td><input type="button" style="margin: 0px;" class="btn" value="保 存" onclick="save()"/></td>
		</tr>
	</table>
</div>

</div>

</body>

</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值