轉(zhuǎn)帖|使用教程|編輯:龔雪|2016-02-01 10:18:24.000|閱讀 400 次
概述:對于flexgrid,可以直接在單元格內(nèi)進(jìn)行編輯。但另外還有一種編輯方式,即在一行添加按鈕,統(tǒng)一的編輯和提交數(shù)據(jù)。本文主要介紹給flexgrid添加編輯按鈕列,并通過編輯按鈕設(shè)置編輯。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
對于flexgrid,可以直接在單元格內(nèi)進(jìn)行編輯。但另外還有一種編輯方式,即在一行添加按鈕,統(tǒng)一的編輯和提交數(shù)據(jù)。本文主要介紹給flexgrid添加編輯按鈕列,并通過編輯按鈕設(shè)置編輯。
在上一篇自定義編輯器中,我們介紹了如何自定義編輯器,主要使用的就是itemFormatter功能。在本文中,我們依然要使用這個itemFormatter功能設(shè)置編輯列。
在flexgrid的columns中創(chuàng)建列,用來添加按鈕,代碼參考:
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初始化顯示按鈕。設(shè)置單元格元素的innerHTML,讓單元格顯示按鈕,使用JS代碼拼了HTML的字符串,代碼參考:
html = '<div>' +
' ' +
'<button class="btn btn-default btn-sm" onclick="editRow(' + r + ')">' +
'<span class="glyphicon glyphicon-pencil"></span> Edit' +
'</button>' +
'</div>';
在本文里,設(shè)置了editIndex,用來記錄單元格的編輯狀態(tài)情況。當(dāng)點擊Edit按鈕后,會調(diào)用editRow方法,改變editIndex,并且本行的單元格進(jìn)入編輯狀態(tài)。代碼參考:
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按鈕會提交數(shù)據(jù),代碼參考:
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的編輯。根據(jù)本文中的示例,可以通過Edit按鈕進(jìn)行整行編輯,并且修改后,通過commit提交數(shù)據(jù),通過cancel取消提交數(shù)據(jù)。
本文的源代碼請參考:
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都控件網(wǎng)