Knockoutjs——checkbox全选

原文链接:http://www.cnblogs.com/elvira/p/4166847.html

一、前言

楼主是个小菜鸟。之前做的项目都是用第三方控件做的,最近开始学习用MVC、EasyUI和Knockoutjs等,可能下面有些地方写的不好,请大家多多包涵。Knockoutjs——checkbox全选

二、内容

首先我们要了解一下基本的Knockoutjs绑定。

我是新建了一个table,主要内容有如下:

 

Knockoutjs——checkbox全选Knockoutjs——checkbox全选
 1 <table align="center">
 2     <thead>
 3         <tr>
 4             <th width="3%"></th>
 5             <th width="20%">新闻名称</th>
 6             <th width="20%">作者</th>
 7         </tr>
 8     </thead>
 9     <tbody data-bind="foreach: News"><!--foreach:News是用来获取数组数据-->
10         <tr>
11             <td>
12                 <input type="checkbox" data-bind="checked: checks"><!--checked绑定checkbox-->
13             </td>
14             <td data-bind="text: Title"></td><!--text 绑定显示对应的title值-->
15             <td data-bind="text: UsersName"></td>
16         </tr>
17     </tbody>
18     <tr>
19         <td>
20             <input type="checkbox" data-bind="checked: selectall"></td>
21         <td>全选</td>
22         <td></td>
23         <td></td>
24         <td></td>
25         <td></td>
26     </tr>
27 </table>
View Code

 

注:对text box,drop-down list和所有non-checkable的form表单控件,用value绑定来读取和写入是该元素的值,而不是checked绑定。(套用手册里面的话Knockoutjs——checkbox全选

如上绑定结束之后就是用如下代码来实现:

 

Knockoutjs——checkbox全选Knockoutjs——checkbox全选
 1 $(function () {
 2         var viewModel = {
 3             selectall: ko.observable(false),
 4             News: ko.observableArray(
 5                    [
 6                        { checks:false,Title: 'this is Title', UsersName: 'cccccc' },
 7                        { checks:false,Title: 'hahahhahaha', UsersName: 'ssssss' }
 8                    ]
 9            )
10         };
11         //监听
12         viewModel.selectall.subscribe(function (nvalue) { //subscribe是监控属性显示订阅,通过nvalue判断全选是选中,还是没选中
13             if (nvalue) {                               //如果选中
14                 var s = viewModel.News();
15                 viewModel.News([]);
16                 for (var i = 0; i < s.length; i++) {   
17                     s[i].checks = true;                //则将列表中的check设置为true
18                 }
19                 viewModel.News(s);
20             } else {                                  //如果没选
21                 var s = viewModel.News();
22                 viewModel.News([]);
23                 for (var i = 0; i < s.length; i++) {
24                     s[i].checks = false;              //则将列表中的check设置为false
25                 }
26                 viewModel.News(s);                   
27             }
28         });
29         ko.applyBindings(viewModel);
30     });
View Code

 

 

 

其中显示的时候全选要为空,所以就我们就可以直接设置false

observableArray是数组所以上方用foreach绑定

注:上方绑定的名称一定要和下方统一,不然会显示不出来

结果如下:

 

Knockoutjs——checkbox全选

 

转载于:https://www.cnblogs.com/elvira/p/4166847.html

上一篇:android查询天气demo,基于mvp+kotlin+rxjava2+room+retrofit2 (一)


下一篇:设计模式:观察者模式