文章出處
文章列表
這個例子我做了幾次，之前總是有BUG，目前測試后，確定沒有BUG才發上來的，主要功能是實現“我的銀行”模塊的增刪改的功能，這個里面包括了級聯列表的區域選擇，這部分是難點，在開發過程中，我們應該知道一個概念，在knockoutjs里，如果你的select被綁定了optionsValue屬性，那么它將存儲這個普通的字符，而如果你沒有設置optionsValue，那么它存儲的是JS對象。
Html代碼
<script src="/Scripts/areaData.js"></script> <div id="bankDiv"> <div data-bind="foreach:bankList"> <ul style="float: left;"> <li><b>銀行開戶名：</b><span data-bind="text:BankAccountName"></span></li> <li><b>開戶行所在城市：</b> <select disabled="disabled" data-bind=" options: areaData, optionsText: 'Name', value:Province, optionsCaption: '選擇省份'"> </select> <span data-bind="with:Province"> <select disabled="disabled" data-bind=" visible:$parent.Province, options: Sons, optionsText: 'Name', value:$parent.City, optionsCaption: '選擇城市'"> </select> </span> <span data-bind="with:City"> <select disabled="disabled" data-bind=" visible:$parent.City, options: Sons, optionsText: 'Name', value:$parent.District, optionsCaption: '選擇區縣'"> </select> </span> </li> <li><b>銀行名稱：</b><span data-bind="text:BankName"></span></li> <li><b>支行名稱：</b><span data-bind="text:BankAddress"></span></li> <li><b>銀行賬號：</b><span data-bind="text:BankAccountNumber"></span></li> <li><a href="javascript:;" data-bind="click:$parent.removeLine">刪除</a> <a href="javascript:;" data-bind="click:$parent.edit">編輯</a></li> </ul> </div> <div style="clear: both;"><a href="javascript:;" data-bind="click:add">添加銀行</a></div> <div data-bind="with:selectItem,visible:editing()"> <ul> <li><b>正在<span data-bind="if:UserBankID==0">新建</span><span data-bind="if:UserBankID>0">編輯</span>銀行</b></li> <li> 銀行開戶名：<input type="text" data-bind="value:BankAccountName" /></li> <li>開戶行所在城市： <select data-bind=" options: areaData, optionsText: 'Name', value:Province, optionsCaption: '選擇省份'"> </select> <span data-bind="with:Province"> <select data-bind=" visible:$parent.Province, options: Sons, optionsText: 'Name', value:$parent.City, optionsCaption: '選擇城市'"> </select> </span> <span data-bind="with:City"> <select data-bind=" visible:$parent.City, options: Sons, optionsText: 'Name', value:$parent.District, optionsCaption: '選擇區縣'"> </select> </span> </li> <li> 銀行名稱：<input type="text" data-bind="value:BankName" /></li> <li> 支行名稱：<input type="text" data-bind="value:BankAddress" /></li> <li> 銀行賬號：<input type="text" data-bind="value:BankAccountNumber" /></li> </ul> <input type="button" data-bind="click:$parent.save" value="保存" /> <input type="button" data-bind="click:$parent.cancle" value="取消" /> </div> </div>
JS代碼,注意，為了測試方便，我將AJAX與數據交換的代碼全都注釋了
<script type="text/ecmascript"> //銀行實體可以從數據庫中讀出來的,所以不存儲ko對象 var BankEntity = function ( UserBankID, Province, City, District, BankName, BankAccountName, BankAccountNumber, BankAddress, IsAdd ) { this.UserBankID = UserBankID; this.Province = Province; this.City = City; this.District = District; this.BankName = BankName; this.BankAccountName = BankAccountName; this.BankAccountNumber = BankAccountNumber; this.BankAddress = BankAddress; this.IsAdd = IsAdd; } //銀行對象 var Bank = function ( UserBankID, Province, City, District, BankName, BankAccountName, BankAccountNumber, BankAddress, IsAdd ) { this.UserBankID = UserBankID; this.Province = ko.observable(Province); this.City = ko.observable(City); this.District = ko.observable(District); this.BankName = BankName; this.BankAccountName = BankAccountName; this.BankAccountNumber = BankAccountNumber; this.BankAddress = BankAddress; this.IsAdd = IsAdd; } //我的銀行操作 var bankEditor = function () { var self = this; var dataArr = []; dataArr.push(new BankEntity(1, "北京市", "市轄區", "石景山區", "bank", "user", "110", "beijing")); dataArr.push(new BankEntity(2, "安徽省", "安慶市", "大觀區", "bank2", "user2", "110", "beijing")); var selDataArr = []; var p, c, d; for (var data in dataArr) { for (var i in areaData) { if (areaData[i].Name == dataArr[data].Province) { for (var j in areaData[i].Sons) { if (areaData[i].Sons[j].Name == dataArr[data].City) { for (var k in areaData[i].Sons[j].Sons) { if (areaData[i].Sons[j].Sons[k].Name == dataArr[data].District) { selDataArr.push(new Bank( dataArr[data].UserBankID, areaData[i], areaData[i].Sons[j], areaData[i].Sons[j].Sons[k], dataArr[data].BankName, dataArr[data].BankAccountName, dataArr[data].BankAccountNumber, dataArr[data].BankAddress, false)); break; } } } } } } } self.bankList = ko.observableArray(selDataArr); self.selectItem = ko.observable(); self.editing = ko.observable(false); //移除同時提交 self.removeLine = function (o) { self.bankList.remove(o); } //添加 self.add = function () { self.editing(true); self.selectItem(new Bank(0, "", "", "", "銀行名稱", "開戶名", "賬號", "支行名稱", true)); }; //編輯 self.edit = function (o) { self.editing(true); self.bankList.remove(o)//將上面的實體移除 o.IsAdd = false; self.selectItem(o); }; //post self.save = function (o) { /*數據傳遞時，使用字符串或者數值，而在knockoutjs顯示時，使用完整對象*/ if (o.Province() == undefined || o.City() == undefined || o.District() == undefined) { alert("請選擇區域信息"); return false; } self.editing(false); /*地域顯示為文本*/ self.bankList.push(o);//將編輯后的實體添加 }; self.cancle = function (o) { if (!o.IsAdd) self.bankList.push(o); self.editing(false); }; } var bankModel = new bankEditor() ko.applyBindings(bankModel, document.getElementById("bankDiv")); </script>
截圖如下
文章列表
全站熱搜
留言列表
