新架构下复选框的两种实现

Kgrid- CheckBox实现

方法1：

 angular.forEach(c.vm.ResultList, function (item) {

        item.Selected = false;

      });

1.    先将数据集合初始化一个Selected 属性

2.    { field: "", template: "<input type='checkbox' id='dataItem.Id'  ng-model='dataItem.Selected'/>" }绑定到表格列上

3.

  var idList = [];

   for (var i = 0; i < c.DataSource.view().length; i++) {

      if (c.DataSource.at(i).Selected) {

            idList.push(c.DataSource.at(i).Id);

            }

        }

提交时变量c. DataSource获取选中项

c.DataSource.view()表示只遍历当前页

c.DataSource.data()表示遍历整个DataSource

优点： 页面代码简单，符合Angular数据驱动页面的设计理念

缺点：对于后台查询的表格不适用，c.DataSource翻页数据获取不到

               

方法2：

1. c.SelectedRow = []; c.SelectedRow = false;先初始化一个空数组,和一个全选标记
2.    { field: "", template: "<input type='checkbox' id='dataItem.Id'  ng-checked='c.Event.GetCheckState(dataItem.Id)'  ng-click='c.Event.Selected(dataItem.Id)'/>"}绑定控件到页面上
3. 分别实现单选，清空，获取选择状态事件

   Selected: function (Id) {
   
               var index = c.SelectedRow.GetIndex(Id);
   
              if (index != -1) {
   
                   c.SelectedRow.splice(index, 1)
   
               } else {
   
                   c.SelectedRow[c.SelectedRow.length] = Id;
   
               }
   
           },
   
   ReSelect: function () {
   
               c.SelectedRow = [];
   
           },
   
   GetCheckState: function (Id) {
   
               if (c.SelectedRow.GetIndex(Id) != -1) { return true; }
   
    else { return false; }
   
   },
   
   SelectedAll: function () { //全选
   
               angular.forEach(c.DataSource._view, function (item) {
   
                   if (c.SelectedALL) {
   
                       if (!c.Event.GetCheckState(item.Id)) {
   
                           c.SelectedRow[c.SelectedRow.length] = item.Id;
   
                       }
   
                   } else {
   
                       var index = c.SelectedRow.GetIndex(item.Id);
   
                       if (index != -1) {
   
                           c.SelectedRow.splice(index, 1)
   
                       }
   
                   }
   
               })
   
   },

   //表头写法
   
   <th><input type="checkbox" ng-model="c.SelectedALL" ng-change="c.Event. SelectedAll()" /></th>初始化一个数组属性方法
   
      //数组查下标 一般放到ProjectBase_Common.js
   
       Array.prototype.GetIndex = function (key) {
   
           var index = -1;
   
           for (var i = 0; i < this.length; i++) {
   
               if (this[i] == key) {
   
                   index = i;
   
               }
   
           }
   
           return index;
   
   }

   优势：提交时不需要在遍历集合，直接使用c.SelectedRow = []，能支持后端查询表格

   缺点：基于Jquery的操作模式实现，用页面控件直接改数据，和angular设计不符