Ext簡單的一個RowEditor例子(C#)
阿新 • • 發佈:2019-02-09
先上圖,一個很簡單的RowEditor的實現,如下圖所示:
此實現,是根據ext-3.2.0/ux/RowEditor.js實現的,具體程式碼如下:
頁面引用東西如下:
<link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../ext-3.2.0/ux/css/grid-examples.css" /> <link rel="stylesheet" type="text/css" href="../ext-3.2.0/shared/examples.css" /> <link rel="stylesheet" type="text/css" href="../ext-3.2.0/ux/css/RowEditor.css" /> <style type="text/css"> .icon-user-add { background-image: url(../ext-3.2.0/shared/icons/fam/user_add.gif) !important; } .icon-user-delete { background-image: url(../ext-3.2.0/shared/icons/fam/user_delete.gif) !important; } </style> <script type="text/javascript" language="javascript" src="../ext-3.2.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" language="javascript" src="../ext-3.2.0/ext-all.js"></script> <script language="javascript" src="../ext-3.2.0/ux/RowEditor.js"></script> <script type="text/javascript" language="javascript" src="../Js/roweditor.js"></script>
其中:樣式裡面的兩個圖片是“增加”,“刪除”兩個按鈕前面的圖片。最後一個JS檔案為實現檔案。
JS檔案程式碼如下:
Ext.BLANK_IMAGE_URL = '../../ext-3.2.0/resources/images/default/s.gif'; Ext.onReady(function(){ Ext.QuickTips.init(); //資料來源reader物件 var Dwlb = Ext.data.Record.create([ {name: 'XH',type: 'string'}, {name: 'LBMC',type: 'string'} ]); //資料來源 var proxy = new Ext.data.HttpProxy({ method:'GET', url:'RowEditor.aspx?action=get' });
//在頁面上的操作直接影響store,根據store的'update','remove'兩個監聽事件,向後臺提交資料,實現互動 var store = new Ext.data.GroupingStore({ reader: new Ext.data.JsonReader({ fields: Dwlb, root:'data' }), proxy:proxy, autoLoad:true ,listeners:{ 'update':function(sto,record,operation){ var Dwlb=sto.getAt(sto.indexOf(record)).data; if(operation==Ext.data.Record.EDIT&&Dwlb.LBMC!=''&&Dwlb.LBMC!=null){ Ext.Ajax.request({ url:'Dwlb.aspx?action=update', params:{'XH':Dwlb.XH,'LBMC':Dwlb.LBMC}, success:function(response,opts){ var obj=Ext.util.JSON.decode(response.responseText); store.reload(); if(!obj.success) Ext.Msg.alert('提示',obj.msg); }, failure:function(response,opts){ Ext.Msg.alert('錯誤','儲存錯誤') sto.removeAt(0); } }); } } ,'remove':function(sto,record,index){ if(record.get('XH')!=''&&record.get('XH')!=null){ Ext.Ajax.request({ url:'RowEditor.aspx?action=del', params:{'xh':record.data.XH}, success:function(response,opts){ var obj=Ext.util.JSON.decode(response.responseText); if(!obj.success) { Ext.Msg.alert('提示',obj.msg); store.insert(index,record) } }, failure:function(response,opts){ Ext.Msg.alert('錯誤','儲存錯誤'); store.insert(index,record) } }); } } } }); //編輯行控制元件,在下面的grid中引用 var editor = new Ext.ux.grid.RowEditor({ saveText: '儲存', cancelText:'取消' }); var grid = new Ext.grid.GridPanel({ store: store, width: 400, region:'center', margins: '0 5 5 5', plugins: [editor], view: new Ext.grid.GroupingView({ markDirty: false }), tbar: [{ iconCls: 'icon-user-add', text: '新增', handler: function(){ var e = new Dwlb({ XH: '', LBMC: ' ' }); editor.stopEditing(); store.insert(0, e); grid.getView().refresh(); grid.getSelectionModel().selectRow(0); editor.startEditing(0); } },{ ref: '../removeBtn', iconCls: 'icon-user-delete', text: '刪除', disabled: true, handler: function(){ editor.stopEditing(); var s = grid.getSelectionModel().getSelections(); for(var i = 0, r; r = s[i]; i++){ store.remove(r); } } }], columns: [ new Ext.grid.RowNumberer(), { header: '類別名稱', dataIndex: 'LBMC',width: 200,sortable: true, editor: { xtype: 'textfield',allowBlank: false } } ] }); var layout = new Ext.Panel({ layout: 'border', title: '隊伍級別維護', layoutConfig: { columns: 1 }, width:250, height: 300, items: [grid] }); layout.render('Cont'); grid.getSelectionModel().on('selectionchange', function(sm){ grid.removeBtn.setDisabled(sm.getCount() < 1); }); });
後臺程式碼實現如下:
protected void Page_Load(object sender, EventArgs e)
{
string action = Request.Params["action"];
string strResponse = "";
string xh = Request.Params["XH"];
string lbmc = Request.Params["LBMC"];
switch (action)
{
case "get":
//獲得JSON源資料的方法就不寫了
strResponse = "{data:[{XH:'1',LBMC:'消防'},{XH:'2',LBMC:'醫療'},{XH:'3',LBMC:'其它'}]}";
Response.Write(strResponse);
Response.End();
break;
case "update":
strResponse = saveYalb(xh, lbmc);
Response.Write(strResponse);
Response.End();
break;
case "del":
strResponse = delYalb(xh);
Response.Write(strResponse);
Response.End();
break;
default:
break;
}
}
//儲存
private string saveYalb(string xh, string mc)
{
string result = "";
string sql = "xxxx";
try
{
//資料庫操作方法,此處省略
result = "{success:true,msg:'儲存成功'}";
}
catch (Exception)
{
result = "{success:false,msg:'儲存出現錯誤!'}";
}
return result;
}
//刪除
private string delYalb(string xh)
{
string result = "";
string sql = string.Format("xxxx where xh='{0}'", xh);
try
{
//資料庫操作方法,此處省略
result = "{success:true,msg:'操作成功'}";
}
catch (Exception)
{
result = "{success:false,msg:'操作失敗'}";
}
return result;
}
這是例子的簡單實現的連結 RowEditor例子