代码:

  1. function Product(ProductID,ProductName,ProductNum,Result,Price) {
  2. this.ProductID = ko.observable(ProductID);
  3. this.ProductName = ko.observable(ProductName);
  4. this.ProductNum = ko.observable(ProductNum);
  5. this.Result = ko.observable(Result);
  6. this.Price = ko.observable(Price);
  7. }
  1. self.add = function (o) {
  2. self.isDetail(true);
  3. self.selectedItem(new Sale());
  4. $.ajax({
  5. url: "/api/CommonApi?API=GetProductListByBuy",
  6. type: "get",
  7. dataType: "json",
  8. success: function (data) {
  9. var list = data.ApiParamObj;
  10. var arr = [];
  11. $(list).each(function () {
  12. var ProductNum = $(this)[].ProductNum;
  13. var Result = $(this)[].Result;
  14. var Price = $(this)[].Price;
  15. var ProductID = $(this)[].ProductID;
  16. var ProductName = $(this)[].ProductName;
  17. //console.log(Price);
  18. //self.ProductList().push(new Product(ProductNum, Result, Price));
  19. arr.push(new Product(ProductID, ProductName, ProductNum, Result, Price));
  20. //self.ProductList.push(new Product(ProductID, ProductName, ProductNum, Result, Price));
  21. })
  22. //console.dir(arr);
  23. self.ProductList(arr);
  24. //self.ProductList = ko.observableArray(arr);
  25.  
  26. //console.log(self.ProductList().length);
  27. //console.dir(self.ProductList());
  28. }
  29. });
  30. $("#formDialog").valid();
  31. }

对每一个属性进行监控,组成数组对整个数组进行监控

计算总数量,总金额

  1. self.TotalNum = ko.computed(function () {
  2. //console.log("ffff");
  3. //console.dir(self.ProductList());
  4. var total = ;
  5. ko.utils.arrayForEach(self.ProductList(), function (item) {
  6. if (item.Result()) {
  7. var value = parseFloat(item.ProductNum());
  8. if (!isNaN(value)) {
  9. total += value;
  10. }
  11. }
  12. });
  13. return total.toFixed();
  14. });
  15. self.TotalAmount = ko.computed(function () {
  16. var total = ;
  17. ko.utils.arrayForEach(self.ProductList(), function (item) {
  18. if (item.Result()) {
  19. var value = parseFloat(item.ProductNum() * item.Price());
  20. if (!isNaN(value)) {
  21. total += value;
  22. }
  23. }
  24. });
  25. return total.toFixed();
  26. })

html代码:

  1. <div class="row">
  2. <div class="form-group col-xs-12">
  3. <label class="control-label col-md-2">产品:</label>
  4. <div class="col-md-10" data-bind="visible: ProductList().length > 0,foreach:ProductList">
  5. <div class="dvcls">
  6. <input type="checkbox" class="chk" data-bind="checked:Result,value:ProductID,attr:{ name: $index },enable:$parent.isDetail" />
  7. <span data-bind="text:ProductName"></span>
  8. &nbsp;&nbsp;价格:<span data-bind="text:Price"></span>
  9. &nbsp;&nbsp;<input type="number" style="width:40px" min="" data-bind="value:ProductNum,valueUpdate:'keyup',visible:Result,enable:$parent.isDetail" />
  10. </div>
  11. </div>
  12. </div>
  13. </div>

效果图:

整个代码:

  1. @{
  2. Model.Scripts = new string[] {
  3. "~/Scripts/paginationViewModel.js",
  4. "/Views/BoxSale/BoxSale.js" };
  5. }
  6. <style type="text/css">
  7. .dvcls{
  8. display:inline-block;
  9. width:290px;
  10. padding-left:0px;
  11. }
  12.  
  13. </style>
  14. <div class="page-content" style="padding-top: 0;">
  15. <!-- BEGIN PAGE CONTENT-->
  16. <div class="row">
  17. <div class="col-md-12">
  18. <!-- BEGIN EXAMPLE TABLE PORTLET-->
  19. <div class="portlet box blue-hoki" style="background-color: white">
  20. <div class="portlet-title">
  21. <div class="caption" style="font-weight:bold;margin:10px;">
  22. 销售记录
  23. </div>
  24. <div class="tools"></div>
  25. </div>
  26.  
  27. <div class="portlet-body">
  28.  
  29. <a href="javascript:void(0)" class="label label-info" style="margin:10px;" data-toggle="modal" data-target="#dvDialog" data-bind="click:add">销售礼品</a>
  30. <table class="table table-striped table-bordered table-hover" id="tblCompany" style="margin:10px; text-align: center;">
  31. <thead>
  32. <tr style="background-color:#00adef">
  33. <th>
  34. 序号
  35. </th>
  36. <th>
  37. 客户
  38. </th>
  39. <th>
  40. 礼品数量
  41. </th>
  42. <th>
  43. 总金额
  44. </th>
  45. <th>
  46. 编辑
  47. </th>
  48. </tr>
  49. </thead>
  50. <tbody data-bind="visible: SaleList().length > 0,foreach: SaleList">
  51. <tr>
  52. <td data-bind="text:$index()+1"></td>
  53. <td data-bind="text:Name"></td>
  54. <td data-bind="text:Num"></td>
  55. <td data-bind="text:Amount.toFixed(2)"></td>
  56. <td>
  57. <a class="label label-info" data-toggle="modal" data-target="#dvDialog" data-bind="click:$parent.edit">查看</a>
  58. <a class="label label-info" data-bind="click:$parent.remove">删除</a>
  59. </td>
  60. </tr>
  61. </tbody>
  62. </table>
  63. <div class="row datatables_paginate paging_full_numbers" style="text-align:center;" data-bind="visible: pages().length > 0">
  64. <div class="small-12 columns" data-bind="template: 'PaginationTemplate'"></div>
  65. </div>
  66. </div>
  67.  
  68. </div>
  69. <!-- END EXAMPLE TABLE PORTLET-->
  70. </div>
  71. </div>
  72.  
  73. <!-- 编辑公司 -->
  74. <div class="modal fade bs-example-modal-lg" tabindex="-1" id="dvDialog" role="dialog" aria-hidden="true">
  75. <div class="modal-dialog modal-lg" style="margin-top:10%">
  76. <div class="modal-content" style="width:860px">
  77. <div class="modal-header">
  78. <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  79. <h4 class="modal-title" style="margin-left:4%;color:#00adef">
  80. <i class="icon-docs" style="font-size: 24px;"></i>
  81. <span data-bind="if:selectedItem().SaleRecordID==null">新建</span>
  82. <span data-bind="if:selectedItem().SaleRecordID!=null">查看</span>
  83. </h4>
  84. </div>
  85. <div class="modal-body" style="border-top: 1px solid #EFEFEF; width: 90%;margin-left:5%">
  86. <form id="formDialog" name="formDialog" class="form-horizontal">
  87. <div class="row">
  88. <div class="form-group col-xs-12">
  89. <label class="control-label col-md-2">客户:</label>
  90. <div class="col-md-10">
  91. <select class="form-control" required name="fCustomerID" data-bind="options:customersList,optionsCaption: '请选择客户',
  92. optionsText:function(item){ return item.NameMobile},
  93. optionsValue:function(item){ return item.ID },
  94. value:selectedItem().CustomerID,enable:isDetail"></select>
  95. </div>
  96. </div>
  97. </div>
  98. </form>
  99. <div class="row">
  100. <div class="form-group col-xs-12">
  101. <label class="control-label col-md-2">产品:</label>
  102. <div class="col-md-10" data-bind="visible: ProductList().length > 0,foreach:ProductList">
  103. <div class="dvcls">
  104. <input type="checkbox" class="chk" data-bind="checked:Result,value:ProductID,attr:{ name: $index },enable:$parent.isDetail" />
  105. <span data-bind="text:ProductName"></span>
  106. &nbsp;&nbsp;价格:<span data-bind="text:Price"></span>
  107. &nbsp;&nbsp;<input type="number" style="width:40px" min="" data-bind="value:ProductNum,valueUpdate:'keyup',visible:Result,enable:$parent.isDetail" />
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="row">
  113. <div class="form-group col-xs-12">
  114. <label class="control-label col-md-2">总数:</label>
  115. <div class="col-md-4">
  116. <span data-bind="text:TotalNum"></span>
  117. </div>
  118. <label class="control-label col-md-2">总金额:</label>
  119. <div class="col-md-4">
  120. <span data-bind="text:TotalAmount"></span>
  121. </div>
  122. </div>
  123. </div>
  124. <div class="modal-footer" data-bind="visible:isDetail">
  125. <button style="width: 42%;" type="button" class="btn blue" data-bind="click:function(){save();}">
  126. 确定
  127. </button>
  128. <button style="width: 42%;" type="button" class="btn blue" data-dismiss="modal">取消</button>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135.  
  136. <script type="text/html" id="PaginationTemplate">
  137. <ul class="pagination" data-bind="visible: pages().length > 0">
  138. <li><a data-bind="click: goToFirst"><<</a></li>
  139. <li><a data-bind="click: goToPrev"><</a></li>
  140. <!--ko if:showStartPagerDot-->
  141. <li><a data-bind="click:StartPageDot">...</a></li>
  142. <!--/ko-->
  143. <!--ko foreach:pages-->
  144. <li data-bind="css: { 'active': $data == $parent.currentPage() }">
  145. <a data-bind="text: $data, click: $parent.goToPage.bind($data, $data)"></a>
  146. </li>
  147. <!--/ko-->
  148. <!--ko if:showEndPagerDot-->
  149. <li><a data-bind="click:EndPageDot">...</a></li>
  150. <!--/ko-->
  151. <li><a data-bind="click: goToNext">></a></li>
  152. <li><a data-bind="click: goToLast">>></a></li>
  153. </ul>
  154. </script>
  1. $(function () {
  2. Date.prototype.Format = function (fmt) {
  3. var o = {
  4. "M+": this.getMonth() + , //月份
  5. "d+": this.getDate(), //日
  6. "h+": this.getHours() % == ? : this.getHours() % , //小时
  7. "H+": this.getHours(),
  8. "m+": this.getMinutes(), //分
  9. "s+": this.getSeconds(), //秒
  10. "q+": Math.floor((this.getMonth() + ) / ), //季度
  11. "f": this.getMilliseconds() //毫秒
  12. };
  13. if (/(y+)/.test(fmt))
  14. fmt = fmt.replace(RegExp.$, (this.getFullYear() + "").substr( - RegExp.$.length));
  15. for (var k in o)
  16. if (new RegExp("(" + k + ")").test(fmt))
  17. fmt = fmt.replace(RegExp.$, (RegExp.$.length == ) ? (o[k]) : (("" + o[k]).substr(("" + o[k]).length)));
  18. return fmt;
  19. }
  20. function GetNow() {
  21. return new Date().Format("yyyy-MM-dd HH:mm:ss");
  22. }
  23. function Guid() {
  24. var guid = "";
  25. for (var i = ; i <= ; i++) {
  26. var n = Math.floor(Math.random() * 16.0).toString();
  27. guid += n;
  28. if ((i == ) || (i == ) || (i == ) || (i == ))
  29. guid += "-";
  30. }
  31. return guid;
  32. }
  33.  
  34. var isT = false;
  35. var isS = false;
  36. function Product(ProductID,ProductName,ProductNum,Result,Price) {
  37. this.ProductID = ko.observable(ProductID);
  38. this.ProductName = ko.observable(ProductName);
  39. this.ProductNum = ko.observable(ProductNum);
  40. this.Result = ko.observable(Result);
  41. this.Price = ko.observable(Price);
  42. }
  43. function Sale() {
  44. this.SaleRecordID = null;
  45. this.CustomerID = "";
  46. this.Name = "";
  47. this.Amount = ;
  48. this.Num = ;
  49. }
  50. var model = function () {
  51. var self = this;
  52. self.ProductList = ko.observableArray([]);
  53. self.selectedItem = ko.observable();
  54. self.customersList = ko.observableArray();
  55. self.SaleList = ko.observableArray();
  56. self.isDetail = ko.observable(true);
  57. self.remove = function (o) {
  58. Confirm('你确定要删除该记录吗?').on(function () {
  59. var data = {
  60. SaleRecordID: o.SaleRecordID,
  61. UpdateTime: GetNow(),
  62. UpdateBy: $User.UserID,
  63. IsDelete:
  64. };
  65. $.ajax({
  66. url: "/api/CommonApi?API=DelSale",
  67. type: "put",
  68. data: { ApiParamObj: JSON.stringify(data) },
  69. dataType: "json",
  70. success: function (data) {
  71. if (data.Success) {
  72. Alert("删除成功").on(function () {
  73. self.goToPage();
  74. })
  75. }
  76. }
  77. });
  78. });
  79. }
  80. self.add = function (o) {
  81. self.isDetail(true);
  82. self.selectedItem(new Sale());
  83. $.ajax({
  84. url: "/api/CommonApi?API=GetProductListByBuy",
  85. type: "get",
  86. dataType: "json",
  87. success: function (data) {
  88. var list = data.ApiParamObj;
  89. var arr = [];
  90. $(list).each(function () {
  91. var ProductNum = $(this)[].ProductNum;
  92. var Result = $(this)[].Result;
  93. var Price = $(this)[].Price;
  94. var ProductID = $(this)[].ProductID;
  95. var ProductName = $(this)[].ProductName;
  96. //console.log(Price);
  97. //self.ProductList().push(new Product(ProductNum, Result, Price));
  98. arr.push(new Product(ProductID, ProductName, ProductNum, Result, Price));
  99. //self.ProductList.push(new Product(ProductID, ProductName, ProductNum, Result, Price));
  100. })
  101. //console.dir(arr);
  102. self.ProductList(arr);
  103. //self.ProductList = ko.observableArray(arr);
  104.  
  105. //console.log(self.ProductList().length);
  106. //console.dir(self.ProductList());
  107. }
  108. });
  109. $("#formDialog").valid();
  110. }
  111. self.TotalNum = ko.computed(function () {
  112. //console.log("ffff");
  113. //console.dir(self.ProductList());
  114. var total = ;
  115. ko.utils.arrayForEach(self.ProductList(), function (item) {
  116. if (item.Result()) {
  117. var value = parseFloat(item.ProductNum());
  118. if (!isNaN(value)) {
  119. total += value;
  120. }
  121. }
  122. });
  123. return total.toFixed();
  124. });
  125. self.TotalAmount = ko.computed(function () {
  126. var total = ;
  127. ko.utils.arrayForEach(self.ProductList(), function (item) {
  128. if (item.Result()) {
  129. var value = parseFloat(item.ProductNum() * item.Price());
  130. if (!isNaN(value)) {
  131. total += value;
  132. }
  133. }
  134. });
  135. return total.toFixed();
  136. })
  137.  
  138. self.edit = function (o) {
  139. self.isDetail(false);
  140. self.selectedItem(o);
  141. $.ajax({
  142. url: "/api/CommonApi?API=GetBoxSaleRecordBySaleRecordID",
  143. type: "get",
  144. data:{"SaleRecordID":o.SaleRecordID},
  145. dataType: "json",
  146. success: function (data) {
  147. var list = data.ApiParamObj;
  148. var arr = [];
  149. $(list).each(function () {
  150. var ProductNum = $(this)[].ProductNum;
  151. var Result = ;
  152. var Price = $(this)[].Price;
  153. var ProductID = $(this)[].ProductID;
  154. var ProductName = $(this)[].ProductName;
  155. arr.push(new Product(ProductID, ProductName, ProductNum, Result, Price));
  156. })
  157. self.ProductList(arr);
  158. }
  159. });
  160. console.dir(self);
  161. }
  162. self.insertRecord = function (guid) {
  163. ko.utils.arrayForEach(self.ProductList(), function (item) {
  164. if (item.Result()) {
  165. var data = {};
  166. data.ProductID = item.ProductID();
  167. data.SaleRecordID = guid;
  168. data.Num = item.ProductNum();
  169. data.Price = item.Price();
  170. data.IsDelete = ;
  171. data.CreateBy = $User.UserID;
  172. data.UpdateBy = $User.UserID;
  173. data.CreateTime = GetNow();
  174. data.UpdateTime = GetNow();
  175. $.ajax({
  176. url: "/api/CommonApi?API=InsertBoxSaleRecord",
  177. type: "post",
  178. data: { ApiParamObj: JSON.stringify(data) },
  179. dataType: "json",
  180. success: function (data) {
  181. //console.dir(data);
  182. //if (data.Success) {
  183. // Alert("添加成功!").on(function () {
  184. // self.Refresh();
  185. // $('#dvDialog').modal('hide');
  186. // isS = false;
  187. // })
  188. //}
  189. }
  190. });
  191. }
  192. });
  193. }
  194. self.save = function () {
  195. $("#formDialog").valid();
  196. var arr = self.ProductList();
  197. var guid = Guid();
  198. var o = self.selectedItem();
  199. if ($("#formDialog").valid()) {
  200. if (!isS) {
  201. isS = true;
  202. var data = {
  203. SaleRecordID: guid,
  204. Amount: self.TotalAmount(),
  205. CustomerID: self.selectedItem().CustomerID,
  206. Num: self.TotalNum(),
  207. IsDelete: ,
  208. CreateBy: $User.UserID,
  209. UpdateBy: $User.UserID,
  210. CreateTime: GetNow(),
  211. UpdateTime: GetNow()
  212. };
  213.  
  214. $.ajax({
  215. url: "/api/CommonApi?API=InsertSale",
  216. type: "post",
  217. data: { ApiParamObj: JSON.stringify(data) },
  218. dataType: "json",
  219. success: function (data) {
  220. self.insertRecord(guid);
  221. if (data.Success) {
  222. Alert("添加成功!").on(function () {
  223. self.Refresh();
  224. $('#dvDialog').modal('hide');
  225. isS = false;
  226. })
  227. }
  228. }
  229. });
  230.  
  231. }
  232. }
  233. }
  234. self.Refresh = function (pageIndex) {
  235. //this.pageSize = 10;
  236. if (pageIndex == undefined)
  237. pageIndex = ;
  238. var data = {};
  239. data.API = "GetSaleList";
  240. data.PageSize = self.pageSize;
  241. data.PageIndex = pageIndex;
  242. $.ajax({
  243. url: "/api/CommonApi",
  244. type: "get",
  245. data: data,
  246. dataType: "json",
  247. success: function (datas) {
  248. var list = datas.ApiParamObj;
  249. self.SaleList(list);
  250. if (list.length == ) {
  251. self.total();
  252. } else {
  253. self.total(list[].TotalCount);
  254. }
  255. self.caculatePages();
  256. return datas;
  257. }
  258. });
  259. }
  260. }
  261. var vm = new model();
  262. paginationViewModel.call(vm, );
  263. vm.caculatePages();
  264. vm.goToPage();
  265. vm.selectedItem(new Product());
  266. ko.applyBindings(vm);
  267.  
  268. //获取客户列表
  269. var getCustomersList = function () {
  270. $.getJSON('/api/commonapi?API=GetCustomerUsedCarUse', function (data) {
  271. if (data.Success) {
  272. vm.customersList(data.ApiParamObj);
  273. }
  274. });
  275. };
  276. getCustomersList();
  277. });

http://knockout.com.cn/topic/55cf6552829c6622973d7e40

Knockout 监控数组对象属性的更多相关文章

  1. php删除多重数组对象属性,重新赋值的方法

    php删除多重数组对象属性,重新赋值的方法 实例:sphinx搜索出来的结果,要去掉某个属性值:$cl = new SphinxClient ();$query = $cl->Query ( $ ...

  2. knockout 监控数组的缺点

    knockout的监控数组没有想象中的强大,只能监控数组元素的位置变化,或个数的增减,然后对视图对应区域进行同步. <!DOCTYPE html> <html> <hea ...

  3. knockout的监控数组实现

    knockout应该是博客园群体中使用最广的MVVM框架,但鲜有介绍其监控数组的实现.最近试图升级avalon的监控数组,决定好好研究它一番,看有没有可借鉴之处. ko.observableArray ...

  4. Knockout v3.4.0 中文版教程-4-通过监控数组工作

    2.通过监控数组工作 1. 监控数组 如果你想检测或者响应一个对象的改变,你用observables.如果你想检测和响应一个集合的改变,使用observableArray.这个在很多情况下都非常有用, ...

  5. JavaScript中数组对象详解

    Array对象即数组对象用于在单个变量中存储多个值,JS的数组是弱类型的,所以允许数组中含有不同类型的元素,数组元素甚至可以是对象或者其他数组. 创建数组的语法 1.Array构造器 1.var li ...

  6. Knockout.js(二):监控数组属性(Observables Arrays)

    如果想发现并响应一个对象的变化,就应该使用监控属性(observables),如果想发现并响应一个集合的变化,就需要使用监控属性数组(observableArray).在很多情况下,它都非常有用,比如 ...

  7. (初)Knockout 监控属性(Observables)

    1 创建带有监控属性的view model 1.1 Observables Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tr ...

  8. AngularJS 监控对象属性:$watch和$digest

    监控对象属性:$watch和$digest $watch和$digest是相辅相成的.两者一起,构成了Angular作用域的核心:数据变化的响应.如果你学习过WPF,并基于WPF使用过一些MVVM框架 ...

  9. (四 )Knockout - ViewModel 的使用3 - 对象属性变化的实时更新

    ko.observableArray()就可以自动检测属性,其实他只是监控对象,而不是对象中的属性 使用ko.observable()进行处理 DEMO1 实时更新属性 //定义user数据对象 va ...

随机推荐

  1. android基础---->Fragment的使用

    碎片(Fragment)是一种可以嵌入在活动当中的UI 片段,它能让程序更加合理和充分地利用大屏幕的空间,因而在平板上应用的非常广泛. Fragment的基础例子

  2. Ubuntu14.04下安装DevStack

    虚拟机中的网络配置 NET8 为nat net2 为host-only 虚拟机网络配置 # The primary network interface vmnet nat type auto eth0 ...

  3. office2010如何使用excel冻结窗格

    当我们在制作一个Excel表格时,如果列数较多,行数也较多时,一旦向下滚屏,则上面的标题行也跟着滚动,在处理数据时往往难以分清各列数据对应的标题,事实上利用"冻结窗格"功能可以很好 ...

  4. ubuntu下nginx编译安装

    安装依赖库: sudo apt-get install libgd2-xpm sudo apt-get install libgd2-xpm-dev sudo apt-get install libg ...

  5. gvim编辑器_vimrc文件

    set nocompatiblesource $VIMRUNTIME/vimrc_example.vimsource $VIMRUNTIME/mswin.vimbehave mswin set dif ...

  6. 去面试H5游戏问的一些问题

    首先肯定是自我介绍,然后问一些基础题,然后问简历上的相关问题. 1. WebSocket和Socket的区别 2.Http和Https的区别,get和post区别 3.进程和线程 4.H5的渲染流程 ...

  7. 【BZOJ4553】[Tjoi2016&Heoi2016]序列 cdq分治+树状数组

    [BZOJ4553][Tjoi2016&Heoi2016]序列 Description 佳媛姐姐过生日的时候,她的小伙伴从某宝上买了一个有趣的玩具送给他.玩具上有一个数列,数列中某些项的值可能 ...

  8. DGbroker故障切换示例

    1.主库故障 SQL> startup ORACLE instance started. Total System Global Area bytes Fixed Size bytes Vari ...

  9. log4j 设置将生成的日志进行gz压缩并删除过期日志

    1.准备jar  :log4j-1.2.17.jar,commons-logging-1.2.jar,这2个就可以了,其他关于日志的jar包就不要加进来了,在优先级上会有冲突. 2.定义一个类,继承R ...

  10. Oracle HA 之 RAC one node实战

    --创建rac one node步骤 安装grid软件,配置grid集群:安装oracle软件:dbca创建rac one node. >试验创建的rac one node数据库信息如下: gl ...