knockout.js應用

<div style="text-align: left;">
    &nbsp;&nbsp;&nbsp;註：部門基準分：<label style="color:Red">80</label>分
    &nbsp;&nbsp;&nbsp;部門考評分：<label style="color:Red">100</label>分
    </div>
<div style="text-align: left;">
    <label>&nbsp;&nbsp;&nbsp;部門名稱：</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>