<Wijmo Enterprise下載>

對于flexgrid，可以直接在單元格內進行編輯。但另外還有一種編輯方式，即在一行添加按鈕，統一的編輯和提交數據。本文主要介紹給flexgrid添加編輯按鈕列，并通過編輯按鈕設置編輯。

在上一篇自定義編輯器中，我們介紹了如何自定義編輯器，主要使用的就是itemFormatter功能。在本文中，我們依然要使用這個itemFormatter功能設置編輯列。

創建buttons列

在flexgrid的columns中創建列，用來添加按鈕，代碼參考：

columns: [
{ header: 'ID', name: "id", binding: 'id', width: '*' },
{ header: 'Date', name: "date", binding: 'date', width: '*' },
{ header: 'Country', name: "country", binding: 'country', format: 'n0', width: '*' },
{ header: 'Population', name: "population", binding: 'population', width: '*' },
{ header: 'Buttons', binding: "buttons", name: "buttons", width: '*' }],

初始化

通過itemFormatter初始化顯示按鈕。設置單元格元素的innerHTML，讓單元格顯示按鈕，使用JS代碼拼了HTML的字符串，代碼參考：

html = '<div>' +
' ' +
'<button class="btn btn-default btn-sm" onclick="editRow(' + r + ')">' +
'<span class="glyphicon glyphicon-pencil"></span> Edit' +
'</button>' +
'</div>';

邏輯判斷

在本文里，設置了editIndex，用來記錄單元格的編輯狀態情況。當點擊Edit按鈕后，會調用editRow方法，改變editIndex，并且本行的單元格進入編輯狀態。代碼參考：

function editRow(row) {
editIndex = row;
flex.invalidate();
}

點擊按鈕后，通過改變innerHTML，改變本列按鈕的顯示，本列按鈕顯示成commit和cancel。代碼參考：

html = '<div>' +
' ' +
'<button class="btn btn-primary btn-sm" onclick="commitRow(' + r + ')">' +
'<span class="glyphicon glyphicon-ok"></span> OK' +
'</button>' +
' ' +
'<button class="btn btn-warning btn-sm" onclick="cancelRow(' + r + ')">' +
'<span class="glyphicon glyphicon-ban-circle"></span> Cancel' +
'</button>' +
'</div>';

點擊commit按鈕會提交數據，代碼參考：

function commitRow(row) {

// save changes
flex.setCellData(row, 'date', inputDate.value);
flex.setCellData(row, 'country', $("#theCountry").val());
flex.setCellData(row, 'population', inputPopulation.value);

// done editing
cancelRow(row);

//Get the updated values in collection view.
var cv = flex.collectionView;
}

點擊cancel按鈕，會取消修改，代碼參考：

function cancelRow(row) {
editIndex = -1;
flex.invalidate();
}

至此，就完成了InlineEdit的編輯。根據本文中的示例，可以通過Edit按鈕進行整行編輯，并且修改后，通過commit提交數據，通過cancel取消提交數據。

本文的源代碼請參考：

PS: 關于ComponentOne，這些產品你可以關注>>

本文轉載自

葡萄城經典UI產品新年大促，驚喜折扣禮品送不停！優惠詳情點擊查看>>

新年新禧新氣象，送禮送福送優惠！優惠詳情點擊查看>>