Angular4 后台管理系統搭建（3） - wijmo5 flexgrid表格增刪改按鈕實現

  這章應該是wijmo5 flexgrid表格應用的最后一章，我們在三章內介紹了flexgrid表格組件的數據綁定，分頁器搭建，單元格模板控制和代碼重繪單元格控制。這章在介紹下對表格添加增刪改三個按鈕。有了這些功底以后做angular的項目，使用wijmo5 flexgrid組件。基本上是夠用了。還有一些比如內部編輯，合並，子表格什么的需要了在去熟悉即可。

  首先是要在ts文件內找到html模板內的表格對象。這個用@ViewChild 這個指令實現。我們看下實現，首先是html模板

  對表格組件，我們添加一個 #flexgrid ，即模板內變量。他可以在模板內被其他函數引用或綁定，也可以直接在后台獲取，使用@ViewChild指令。

  這樣在后台ts文件內就可以獲取這個表格對象的引用了。有了表格對象一切都好辦。比如批量刪除和編輯函數的實現

  edit():void{
    let inId:number = 0;
    let typeid:number = 0;
    let flex:wjGrid.Row[] = this.flexgrid1.selectedRows as wjGrid.Row[];
    if(flex.length == 1){
      inId = flex[0].dataItem.id;
      typeid = 1;
      let isdelandedit:string = flex[0].dataItem.isdelandedit;
      if(isdelandedit == '已鎖定') typeid = 2;
    }
    switch(typeid){
      case 0:
        alert('沒有選中行，請先選中行后修改');
      break;
      case 2:
        alert('選中行的主鍵是' + inId + '  但是本行狀態位是已鎖定，不可在編輯');
      break;
      case 1:
        alert('選中行的主鍵是' + inId);
        this.m2v2open.showChildModal();
      break;
    }
  }

  dellList():void{
    let flex:wjGrid.RowCollection = this.flexgrid1.rows;
    let checkboxAdd:number[] = [];
    for(let i = 0;i<flex.length;i++){
      let rowData = flex[i].dataItem;
      if(rowData.check == true){ checkboxAdd.push(rowData.id);}
    }
    if(checkboxAdd.length == 0) {
      alert('沒有選擇');
    }
    else {
      alert('您選擇的主鍵為[' + checkboxAdd.join(",") + '] 業務操作自己去實現');
    }
  }

  實現思路是先在外部觸發函數內獲取表格對像。獲取flexgrid表格的行集合對象，對象類型為 wjGrid.RowCollection 。行集合內每個行對象是 wjGrid.Row ， 把wjGrid.Row 對象在轉為dataIItem對象。從dataIItem對象上可以很方便的獲取到綁定的數據。我覺得對wijmo5 flexgrid 熟悉了以后，用起來確實很方便。能很大的提升效率。但就是相關資料太少了。

  對wijmo5引用，最好的方式還是遠程引用。直接在package.json 文件內添加

"wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20171.293.tgz",

　這樣直接引用遠程的wijmo5包即可。雖然下面會出水印。但我們個人用還是無所謂的。最后上個效果圖

這里面規則是：

1、鎖定的行，不可以在編輯；

2、禁用的行，多選框不可選中；

具體效果可以去  http://121.42.203.123  查看。想下載代碼可以去前兩篇文章里找github地址。這里就不列出了。