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地址。这里就不列出了。