MVVM架构~knockoutjs系列之包括区域级联列表的增删改
浏览数：25 /
时间：2015年06月09日
这个例子我做了几次，之前总是有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"> //银行对象 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; /*为数据库中的值对象初始化为Bank对象*/ var selArr = []; selArr.push(new Bank(1, areaData[0], areaData[0].Sons[0], areaData[0].Sons[0].Sons[0], "银行名称", "开户名", "账号", "支行名称", false)); selArr.push(new Bank(1, areaData[1], areaData[1].Sons[1], areaData[1].Sons[1].Sons[1], "银行名称", "开户名", "账号", "支行名称", false)); /*初始化时，需要将数据源数值转换为对象*/ self.bankList = ko.observableArray(selArr); self.selectItem = ko.observable(); self.editing = ko.observable(false); //移除同时提交 self.removeLine = function (o) { //$.ajax({ // url: "/CommonData/DelUserBank", // type: "POST", // data: { UserBankID: o.UserBankID }, // success: function (data) { 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显示时，使用完整对象*/ @*$.ajax({ url: "/CommonData/UpdateUserBank", type: "POST", data: { userID: ‘@Model.UserInfoID‘, UserBankID: o.UserBankID, Province: o.Province().Name, City: o.City().Name, District: o.District().Name, BankName: o.BankName, BankAccountName: o.BankAccountName, BankAccountNumber: o.BankAccountNumber, BankAddress: o.BankAddress }, success: function (data) {*@ 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>
截图如下
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
