knockout.js应用
<div style="text-align: left;">
注：部门基准分：<label style="color:Red">80</label>分
部门考评分：<label style="color:Red">100</label>分
</div>
<div style="text-align: left;">
<label> 部门名称：</label>
<input id="deptOrgName" type="text" /><input type="hidden" />
<label>主管名称：</label>
<input id="leaderName" type="text" /><input type="hidden" />
<input type="button" data-bind="click:addPerson" value="添加" class="but2" />
</div>
<br />
<table id="tblGrid" style="width: 98%">
<thead>
<tr>
<td style="width: 18%;">
姓名
</td>
<td style="width: 18%;">
部门
</td>
@*<td style="width: 18%;">
职位
</td>*@
<td style="width: 18%;">
基准分
</td>
<td style="width: 18%;">
最高分
</td>
<td style="width: 10%;">
操作
</td>
</tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td>
<label data-bind="if:IsMain">
（主要）
</label>
<label data-bind="text:PersonName">
</label>
</td>
<td data-bind="text:OrgName">
</td>
@*<td data-bind="text:Position">
</td>*@
<td>
<input style="width: 50px;" class="count" data-bind="value:Weight,event: { blur: $root.InputA }" />
<input type="hidden" data-bind="text:PersonId" />
</td>
<td>
<label data-bind="text:HeightWeight" > </label>
</td>
<td>
<a href="###" data-bind="enable: !IsMain(), click: $parent.removePerson">删除</a>
</td>
</tr>
</tbody>
<tfoot style=" background-color:#FFFFFF">
<tr><td colspan="2"></td><td>总和：<input type="text" readonly="readonly" style="width:50px;" id="totalWeight" /></td><td colspan="2"></td></tr>
</tfoot>
</table>
<script type="text/javascript">
$(document).ready(function () {
http.get('@Url.Action("GetAllRelation")', {assessInfoId: @(ViewBag.AssessInfoId), PersonId: @(ViewBag.PersonId)})
.next(function (data) {
if (data.success) {
var viewModel = {
people:ko.mapping.fromJS(data.result) // ko.observable()
,addPerson : function(current) {
if($("#leaderName").next("input").val()==""||$("#deptOrgName").next("input").val()==""){
alert("部门名称或主管姓名不能为空！");
return;
}
var obj = {
PersonName: ko.observable($("#leaderName").val())
,OrgName: ko.observable($("#deptOrgName").val())
,Position: ko.observable("")
,IsMain: ko.observable(false)
,Weight: ko.observable(50)
,HeightWeight: ko.observable(0)
};
viewModel.people.push(obj);
//ko.mapping.updateFromJS(viewModel);
}
,removePerson : function(current) {
if(confirm("确认删除吗？")){
viewModel.people.remove(current);
}
}
,InputA : function(current){
var _self = parseInt(current.Weight());
current.HeightWeight(_self*150/100);
var total=0;
$(".count").each(function(index, element){
total+=parseInt($(element).val());
});
$("#totalWeight").val(total);
}
};
ko.applyBindings(viewModel);
var totalWeight=0;
for (var i = 0; i < data.result.length; i++) {
totalWeight += data.result[i].Weight;
}
$("#totalWeight").val(totalWeight);
}
else{
return;
}
});
$("#deptOrgName").myAutoComplete({
width: 250,
ajaxUrl: '@Url.Action("GetOrg", new { layer = 1 })',
returnCodeType: "string",
errorMsg: "不存在该部门",
callback: function (event, data) {
$("#leaderName").myAutoComplete({
width: 220,
isExtra: true,
extraLabel: ["工号:"],
ajaxUrl: '@Url.Action("GetPerson")?orgCode=' + data,
errorMsg: "不存在该员工"
});
$("#leaderName").focus();
}
});
$("#leaderName").bind("click", function () {
var orgCode = $("#deptOrgName").next("input").val();
if (orgCode == "") {
alert("请先选择主管所在的部门！");
$("#deptOrgName").focus();
return;
}
});
$("[count='weightCount']").change(function () {
alert($(this).val());
var count=0;
$("input.weightCount").each(function(){
//count+=$(this).val();
alert($(this).val());
});
});
});
//是否刷新父页面
function refreshOpener() {
var winOpener = window.opener ? window.opener : window.dialogOpener;
if(winOpener) {
winOpener.location.href = winOpener.location.href;
}
}
</script>