来安县城乡建设网站,个人网站建设与维护,学it去哪里学比较好,第1ppt模板免费下载返回目录 这个例子我做了几次#xff0c;之前总是有BUG#xff0c;目前测试后#xff0c;确定没有BUG才发上来的#xff0c;主要功能是实现“我的银行”模块的增删改的功能#xff0c;这个里面包括了级联列表的区域选择#xff0c;这部分是难点#xff0c;在开发过程中之前总是有BUG目前测试后确定没有BUG才发上来的主要功能是实现“我的银行”模块的增删改的功能这个里面包括了级联列表的区域选择这部分是难点在开发过程中我们应该知道一个概念在knockoutjs里如果你的select被绑定了optionsValue属性那么它将存储这个普通的字符而如果你没有设置optionsValue那么它存储的是JS对象。 Html代码 script src/Scripts/areaData.js/scriptdiv idbankDivdiv data-bindforeach:bankListul stylefloat: left;lib银行开户名/bspan data-bindtext:BankAccountName/span/lilib开户行所在城市/bselect disableddisabled data-bindoptions: areaData,optionsText: Name,value:Province,optionsCaption: 选择省份/selectspan data-bindwith:Provinceselect disableddisabled data-bindvisible:$parent.Province,options: Sons,optionsText: Name,value:$parent.City,optionsCaption: 选择城市/select/spanspan data-bindwith:Cityselect disableddisabled data-bindvisible:$parent.City,options: Sons,optionsText: Name,value:$parent.District,optionsCaption: 选择区县/select/span/lilib银行名称/bspan data-bindtext:BankName/span/lilib支行名称/bspan data-bindtext:BankAddress/span/lilib银行账号/bspan data-bindtext:BankAccountNumber/span/lilia hrefjavascript:; data-bindclick:$parent.removeLine删除/anbsp;nbsp;a hrefjavascript:; data-bindclick:$parent.edit编辑/a/li/ul/divdiv styleclear: both;a hrefjavascript:; data-bindclick:add添加银行/a/divdiv data-bindwith:selectItem,visible:editing()ullib正在span data-bindif:UserBankID0新建/spanspan data-bindif:UserBankID0编辑/span银行/b/lilinbsp;nbsp;nbsp;nbsp;nbsp;nbsp;银行开户名input typetext data-bindvalue:BankAccountName //lili开户行所在城市select data-bindoptions: areaData,optionsText: Name,value:Province,optionsCaption: 选择省份/selectspan data-bindwith:Provinceselect data-bindvisible:$parent.Province,options: Sons,optionsText: Name,value:$parent.City,optionsCaption: 选择城市/select/spanspan data-bindwith:Cityselect data-bindvisible:$parent.City,options: Sons,optionsText: Name,value:$parent.District,optionsCaption: 选择区县/select/span/lilinbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;银行名称input typetext data-bindvalue:BankName //lilinbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;支行名称input typetext data-bindvalue:BankAddress //lilinbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;银行账号input typetext data-bindvalue:BankAccountNumber //li/ulinput typebutton data-bindclick:$parent.save value保存 /input typebutton data-bindclick:$parent.cancle value取消 //div
/div JS代码,注意为了测试方便我将AJAX与数据交换的代码全都注释了 script typetext/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);};//postself.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 截图如下 返回目录
