掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流
在Web應用程序開發(fā)中，管理和編輯數(shù)據(jù)非常重要。我們經(jīng)常需要將存儲在數(shù)據(jù)庫中的數(shù)據(jù)展示在頁面中，讓用戶能夠方便地對其進行修改或刪除。因此，開發(fā)者需要一些工具來處理這些數(shù)據(jù)操作。
創(chuàng)新互聯(lián)長期為千余家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為神木企業(yè)提供專業(yè)的網(wǎng)站建設、成都網(wǎng)站建設，神木網(wǎng)站改版等技術服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
本文將介紹一種使用EXT技術來輕松往表格中添加數(shù)據(jù)庫數(shù)據(jù)的方法。EXT是一種用于構(gòu)建富客戶端Web應用程序的JavaScript框架。它提供了豐富的組件庫，可以很容易地創(chuàng)建數(shù)據(jù)表格、表單、菜單等。
我們需要在頁面中引入EXT庫和相關資源。
“`
“`
接著，我們需要創(chuàng)建一個數(shù)據(jù)模型來描述要展示或編輯的數(shù)據(jù)。在本例中，我們使用PHP作為后端語言，MySQL作為數(shù)據(jù)庫。我們創(chuàng)建了一個名為“User”的數(shù)據(jù)模型，該模型對應了一個名為“users”的數(shù)據(jù)庫表。創(chuàng)建數(shù)據(jù)模型的代碼如下：
“`
Ext.define(‘User’, {
extend: ‘Ext.data.Model’,
fields: [
{name: ‘id’, type: ‘int’},
{name: ‘username’, type: ‘string’},
{name: ’eml’, type: ‘string’},
{name: ‘reg_date’, type: ‘date’, dateFormat: ‘Y-m-d’},
],
proxy: {
type: ‘a(chǎn)jax’,
api: {
read: ‘users.php?action=read’,
create: ‘users.php?action=create’,
update: ‘users.php?action=update’,
destroy: ‘users.php?action=delete’
},
reader: {
type: ‘json’,
root: ‘data’,
idProperty: ‘id’
},
writer: {
type: ‘json’,
writeAllFields: true,
encode: false,
root: ‘data’
},
listeners: {
exception: function(proxy, response, operation) {
Ext.MessageBox.show({
title: ‘REMOTE EXCEPTION’,
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
“`
在數(shù)據(jù)模型中，我們定義了需要展示和編輯的數(shù)據(jù)字段，包括id、username、eml和reg_date。我們還定義了與PHP文件交互的代理配置，包括讀取、創(chuàng)建、更新和刪除操作的URL地址。
接下來，我們需要創(chuàng)建一個表格視圖來展示數(shù)據(jù)。我們使用EXT的grid組件來創(chuàng)建一個名為“UserGrid”的表格視圖。代碼如下：
“`
var store = Ext.create(‘Ext.data.Store’, {
model: ‘User’,
autoLoad: true,
pageSize: 10,
proxy: {
type: ‘a(chǎn)jax’,
url: ‘users.php’,
actionMethods: {
read: ‘POST’
},
reader: {
type: ‘json’,
root: ‘data’,
totalProperty: ‘total’
}
}
});
var grid = Ext.create(‘Ext.grid.Panel’, {
store: store,
columns: [
{text: ‘ID’, dataIndex: ‘id’},
{text: ‘Username’, dataIndex: ‘username’, editor: ‘textfield’},
{text: ‘Eml’, dataIndex: ’eml’, editor: ‘textfield’},
{text: ‘Registration Date’, dataIndex: ‘reg_date’, xtype: ‘datecolumn’, format: ‘Y-m-d’}
],
selModel: ‘rowmodel’,
plugins: {
ptype: ‘rowediting’,
clicksToEdit: 2
},
dockedItems: [{
xtype: ‘pagingtoolbar’,
store: store,
dock: ‘bottom’,
displayInfo: true
}],
renderTo: Ext.getBody()
});
“`
在表格視圖中，我們創(chuàng)建了一個名為“store”的數(shù)據(jù)源，它使用我們定義的User模型，并通過AJAX請求讀取數(shù)據(jù)。我們還定義了表格的列，指定了每一列展示或編輯的數(shù)據(jù)字段。我們使用rowmodel選擇器來指定行選擇模式，rowediting插件來實現(xiàn)行內(nèi)編輯模式。
我們將視圖渲染到頁面上。我們使用renderTo方法將表格視圖渲染到頁面的文檔流上。此時，我們就可以看到表格視圖中展示了從數(shù)據(jù)庫中讀取出來的數(shù)據(jù)。
為了在表格視圖中添加數(shù)據(jù)，我們需要為表格視圖添加一個按鈕，并在按鈕的點擊事件處理函數(shù)中添加一條新數(shù)據(jù)。我們可以使用EXT的button組件來創(chuàng)建按鈕，并使用store.add方法來添加數(shù)據(jù)。
代碼如下：
“`
var addButton = Ext.create(‘Ext.button.Button’, {
text: ‘Add User’,
handler: function() {
store.add(new User({
username: ‘new user’,
eml: ‘[email protected]’,
reg_date: new Date()
}));
}
});
grid.addDocked(addButton);
“`
在這個例子中，我們創(chuàng)建了一個名為“addButton”的按鈕，并將其添加到表格視圖的dockedItems中。當用戶點擊該按鈕時，表格視圖會用我們新建的一條數(shù)據(jù)來展示。
本文介紹了如何使用EXT框架來快速地展示和編輯數(shù)據(jù)庫數(shù)據(jù)。我們創(chuàng)建了一個User模型來定義需要展示和編輯的數(shù)據(jù)字段，并使用grid組件來創(chuàng)建表格視圖，還加入了一個簡單的按鈕來實現(xiàn)添加數(shù)據(jù)的操作。如果你想了解更多關于EXT的知識，可以查看官方文檔和示例代碼，進一步提升Web應用程序開發(fā)的效率和質(zhì)量。
相關問題拓展閱讀：
先更新數(shù)據(jù)庫，
在關閉數(shù)據(jù)庫，
再只讀方式打開數(shù)據(jù)庫，
確認下是否數(shù)據(jù)錄入，
如果錄入，則刷新下當前頁面即可。
Ext.grid.plugin.CellEditing
Ext.grid.plugin.RowEditing
你用的應該是以上兩種
你可以用canceledit事件做提交后臺，總是方式很多
然后grid.getStore().reload(); 刷新
根據(jù)該行的rowIndex獲取改行的值 傳到后臺 就能保存到數(shù)據(jù)庫了
關于ext 往表格中添加數(shù)據(jù)庫的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。
香港服務器選創(chuàng)新互聯(lián)，2H2G首月10元開通。
創(chuàng)新互聯(lián)（www.cdcxhl.com）互聯(lián)網(wǎng)服務提供商,擁有超過10年的服務器租用、服務器托管、云服務器、虛擬主機、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗。專業(yè)提供云主機、虛擬主機、域名注冊、VPS主機、云服務器、香港云服務器、免備案服務器等。
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流
微信二維碼
微信二維碼
移動版官網(wǎng)