這章應該是wijmo5 flexgrid表格應用的最後一章,咱們在三章內介紹了flexgrid表格組件的數據綁定,分頁器搭建,單元格模板控制和代碼重繪單元格控制。這章在介紹下對錶格添加增刪改三個按鈕。有了這些功底之後作angular的項目,使用wijmo5 flexgrid組件。基本上是夠用了。還有一些好比內部編輯,合併,子表格什麼的須要了在去熟悉便可。html
首先是要在ts文件內找到html模板內的表格對象。這個用@ViewChild 這個指令實現。咱們看下實現,首先是html模板git
對錶格組件,咱們添加一個 #flexgrid ,即模板內變量。他能夠在模板內被其餘函數引用或綁定,也能夠直接在後臺獲取,使用@ViewChild指令。github
這樣在後臺ts文件內就能夠獲取這個表格對象的引用了。有了表格對象一切都好辦。好比批量刪除和編輯函數的實現npm
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 熟悉了之後,用起來確實很方便。能很大的提高效率。但就是相關資料太少了。json
對wijmo5引用,最好的方式仍是遠程引用。直接在package.json 文件內添加函數
"wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20171.293.tgz",
這樣直接引用遠程的wijmo5包便可。雖然下面會出水印。但咱們我的用仍是無所謂的。最後上個效果圖flex
這裏面規則是:this
一、鎖定的行,不能夠在編輯;spa
二、禁用的行,多選框不可選中;3d
具體效果能夠去 http://121.42.203.123 查看。想下載代碼能夠去前兩篇文章裏找github地址。這裏就不列出了。