ext-4.2之grid的高级应用：增删改查！
生活随笔
收集整理的這篇文章主要介紹了
ext-4.2之grid的高级应用：增删改查！
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
直接上圖看效果！
代碼里面的路徑要配置好，還有就是資源引入要正確，這樣就能使用了。
最起碼也要將資源路徑配好，雖然看不到數(shù)據(jù)，體驗不到增刪改查效果，但可以自己模擬json數(shù)據(jù)。
這里給json數(shù)據(jù)來模擬：
"{"root":{"result":[{"limit":"0","price":"10. 0","upTime":"2016-01- 01","start":"0","pid":"150","productName":"承諾連續(xù)兩年，每月消費10元-- 馬上返還999","isValid":"true","checked":"true","productId":"proid. 789","downTime":"2016-12-31"},{"limit":"0","price":"2333.0","upTime":"2016-08-03","start":"0","pid":"101","productName":"承諾消費2333元包年送1000元","isValid":"true","productId":"proid.456","downTime":"2016-08-12"},{"limit":"0","price":"123.0","upTime":"2016-08-04","start":"0","pid":"100","productName":"只要123元","isValid":"true","checked":"true","productId":"proid.123","downTime":"2016-08-19"}],"totalCount":"3"}}最重要的代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <%--ext-all-neptune.css不支持IE6 --%> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/common/ext-4.2.1/resources/css/ext-all-neptune.css"> <script src="${pageContext.request.contextPath}/common/ext-4.2.1/ext-all.js"></script> <script src="${pageContext.request.contextPath}/common/bootstrap/js/jquery.js"></script> <script src="${pageContext.request.contextPath}/common/ext-4.2.1/locale/ext-lang-zh_CN.js"></script><title>填寫用戶管理的數(shù)據(jù)</title> <script type="text/javascript"> //獲取基本路徑 var serverPath="${pageContext.request.contextPath}"; //到數(shù)據(jù)庫查詢數(shù)據(jù) var doQueryUrl = serverPath + "/program.action?method=doQuery"; //保存數(shù)據(jù) var doSaveUrl = serverPath + "/program.action?method=doSave"; //刪除 var doDeleteUrl = serverPath + "/program.action?method=doDelete"; //表格的數(shù)據(jù)處理 var gridStore; //窗口裝載表單 var extWin; //表單 var grid;Ext.onReady(function() {/*Ext.BLANK_IMAGE_URL默認已經(jīng)加載s.gif*/Ext.tip.QuickTipManager.init();var json = [{"productId":"test1","price":20},{"productId":"test2","price":25}];console.log(json[1].price);var root = {"result":[{"productId":"test1","price":20},{"productId":"test2","price":25}],"totalCount":100000};var storePageSize = 10;$("#edits").click(function(){alert("edit");}); //填寫產(chǎn)品數(shù)據(jù)的表單var form = new Ext.form.Panel({autoScroll: true, //與layout: "fit",結(jié)合使用，在window內(nèi)部顯示滾動條frame: false,border: false,bodyPadding: 10,defaults: {width: 350},items: [{xtype: "hiddenfield", //隱藏id: "pid",fieldLabel: "ID"}, {xtype: "textfield",id: "productId",fieldLabel: "產(chǎn)品ID<font color='red'>*</font>",allowBlank: false}, {xtype: "textarea",id: "productName",fieldLabel: "產(chǎn)品名稱<font color='red'>*</font>",allowBlank: false,width: 350,height: 100}, {xtype: "numberfield",id: "price",fieldLabel: "低消金額（元）<font color='red'>*</font>",allowBlank: false}, {id: "upTime",xtype: "datefield",format: "Y-m-d", //format: "Y-m-d H:i:s"fieldLabel: "上架時間<font color='red'>*</font>",allowBlank: false}, {id: "downTime",xtype: "datefield",format: "Y-m-d", //format: "Y-m-d H:i:s"fieldLabel: "下架時間<font color='red'>*</font>",allowBlank: false}, {xtype: "textarea",id: "remark",fieldLabel: "說明",width: 350,height: 100}]});//裝表單的窗口extWin = new Ext.window.Window({title: "方案套餐",width: 420,height: 450,closeAction: "hide",modal: true, //遮罩 :就是讓form表單以外不能編輯constrain: true, //限制拖動范圍resizable: true, //可調(diào)整大小的; 可變尺寸的bodyPadding: 10,border:false,buttonAlign: "center", //按鈕顯示位置layout: "fit",items: [form], //裝表單進來listeners: {"close": function() {//點擊右上角的關(guān)閉按鈕，就清空formform.getForm().reset();}},buttons: [{text: "保存",iconCls: "icon-save",handler: function() {doSave();}}, {text: "取消",iconCls: "icon-cancel",handler: function() {form.getForm().reset();extWin.hide(); //隱藏窗口}}]});function doSave() {if(form.getForm().isValid()) {Ext.Msg.confirm("提示", "是否保存？", function(btn) {if(btn == "yes") {//加載中// layer.load(2);$.ajax({type : "POST",url : doSaveUrl,dataType : "json", //返回 JSON 數(shù)據(jù)cache : false, //不緩存async : true,timeout : 30000,data : {//獲取值pid: Ext.getCmp("pid").getValue(),productId: Ext.getCmp("productId").getValue(),productName: Ext.getCmp("productName").getValue(),price: Ext.getCmp("price").getValue(),upTime: Ext.Date.format(new Date(Ext.getCmp("upTime").getValue()), 'Y-m-d'), //格式化時間downTime: Ext.Date.format(new Date(Ext.getCmp("downTime").getValue()), 'Y-m-d'),remark: Ext.getCmp("remark").getValue()},success : function(data, textStatus) {//關(guān)閉加載中// layer.closeAll('loading');if(data.success == true || data.success == "true") {form.getForm().reset();extWin.hide();doQuery();}// layer.msg(data.msg);},error : function(XMLHttpRequest, textStatus, errorThrown) {Ext.Msg.alert("提示","很遺憾出現(xiàn)錯誤");//layer.closeAll('loading');}});}});}}gridStore = new Ext.data.Store({pageSize: storePageSize, //設(shè)置分頁大小fields: ["pid", "productId", "productName", "price", "downTime" , "upTime","remark", "isValid"],proxy: { //Proxy對象，用于訪問數(shù)據(jù)對象。type: "ajax",url: doQueryUrl, //data: json,actionMethods : {read: "POST" //解決傳中文參數(shù)亂碼問題，默認為“GET”提交},reader: { //處理數(shù)據(jù)對象的DataReader會返回一個Ext.data.Record對象的數(shù)組。其中的id屬性會是一個緩沖了的鍵。type: "json", //返回數(shù)據(jù)類型為json格式root: "root.result", //數(shù)據(jù)totalProperty: "root.totalCount" //數(shù)據(jù)總條數(shù)}}});//為該元素添加事件處理函數(shù)（addListener的簡寫方式）。//on(eventName事件名稱,handler處理函數(shù))gridStore.on("beforeload", function(store, options) {options.page--; //項目必須使用的分頁參數(shù)var start = Ext.getCmp("txtUpTime").getValue();var end = Ext.getCmp("txtDownTime").getValue();if(start != null) {//日期格式化start = Ext.Date.format(new Date(start), 'Y-m-d');}if(end != null) {end = Ext.Date.format(new Date(end), 'Y-m-d');}var newParams = {size: storePageSize, //項目必須使用的分頁參數(shù)productId: Ext.getCmp("txtProductId").getValue(),productName: Ext.getCmp("txtProductName").getValue(),upTime: start,downTime: end};//用于實現(xiàn)把一個對象中的屬性應(yīng)用于另外一個對象中，相當于屬性拷貝,//將會覆蓋目標對象中的屬性//該方法包含三個參數(shù)，第一個參數(shù)是要拷貝的目標對象，第二個參數(shù)是拷貝的源對象，第三個參數(shù)是可選的，表示給目標對象提供一個默認值。可以簡單的理解成把第三個參數(shù)（如果有的話）及第二個參數(shù)中的屬性拷貝給第一個參數(shù)對象Ext.apply(store.proxy.extraParams, newParams);});//創(chuàng)建多選var selModel = Ext.create("Ext.selection.CheckboxModel");grid = new Ext.grid.Panel({region: "center",selModel:selModel, // selModel:Ext.create('Ext.selection.CheckboxModel',{mode:"SIMPLE"}),disableSelection:false,//值為TRUE，表示禁止選擇行 title: "方案套餐列表",frame: true,border: false,columnLines: true, //在列分隔處顯示分隔符autoScroll: true,viewConfig: {forceFit: true //列寬度自動充滿空間,強制平均列寬度},store: gridStore,columns: [{xtype: "rownumberer" //顯示行號}, {header: "ID",hidden: true, //隱藏dataIndex: "pid"},{header: "產(chǎn)品ID",dataIndex: "productId",},{header: "產(chǎn)品名稱",dataIndex: "productName",width: 200},{header: "低消金額（元）",dataIndex: "price",width: 100},{header: "上架時間",dataIndex: "upTime"},{header: "下架時間",dataIndex: "downTime"},{header: "說明",dataIndex: "remark",width:200},{header: "是否有效",dataIndex: "isValid",/**renderer可以格式化該列顯示的數(shù)據(jù)格式或者按照你自定義的腳本顯示最終數(shù)據(jù)樣子renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ } 1.value是當前單元格的值 2.cellmeta里保存的是cellId單元格id，id不知道是干啥的，似乎是列號，css是這個單元格的css樣式。 3.record是這行的所有數(shù)據(jù)，你想要什么，record.data["id"]這樣就獲得了。 4.rowIndex是行號，不是從頭往下數(shù)的意思，而是計算了分頁以后的結(jié)果。 5.columnIndex列號太簡單了。 6.store，這個厲害，實際上這個是你構(gòu)造表格時候傳遞的ds，也就是說表格里所有的數(shù)據(jù)，你都可以隨便調(diào)用，唉，太厲害了。 */renderer: function(value, cellmeta, record, rowIndex, columnIndex, store) {if(value == true || value == "true") {return "是";}return "<font color='red'>否</font>";}},{header:"操作",dateIndex:"operation",width : 200,renderer : function(value, cellmeta, record, rowIndex, columnIndex, store){return "<a href='javascript:void(0)'οnclick='extWin.show()'>新增</a> |<a href='javascript:void(0)' οnclick='edits()'>編輯</a> |<a href='javascript:void(0)' οnclick='deleteProdcut()'>刪除</a>";}}],loadMask: { //loadMask:True表示為當grid加載過程中，會有一個Ext.LoadMask的遮罩效果。默認為false。msg: "正在加載數(shù)據(jù)，請稍候......"},dockedItems: [{ //在底部顯示，分頁xtype: "pagingtoolbar", store: gridStore,dock: "bottom", //extjs在容器中引入了dockedItems屬性，需要停靠的組件應(yīng)該放在這里。且停靠位置用dock屬性指定。 displayInfo: true}],tbar: [{text: "新增",iconCls: "icon-add",handler: function() {extWin.show();}},{text:"編輯",handler:function(){edits();}},{text:"刪除",handler:function(){deleteProdcut();}}, "-",//一條豎線，用于分隔 "（提示：雙擊編輯!）"],listeners: {//雙擊事件/*視圖：Ext.view.Viewrecord：Ext.data.Model 屬于item的記錄 The record that belongs to the itemitem：HTMLElement item的元素index：Number item的索引e：Ext.EventObject raw事件對象eOpts：Object將options對象傳遞給Ext.util.Observable.addListener。*/"itemdblclick": function(grid, record, item, index, e) {editRow(record.data["pid"], record.data["productId"], record.data["productName"], record.data["price"], record.data["upTime"], record.data["downTime"], record.data["remark"]);}}});var panel = new Ext.Panel({region: "north", //顯示在頂部layout: {type: "table",columns: 6},height: 60,width: "100%",bodyPadding: 10, //內(nèi)邊距frame: true,defaults: {width: 120, //對 下面items內(nèi)容寬度的設(shè)置margin: "0 10 10 0"},items: [{id: "txtProductId",xtype: "textfield",emptyText: "產(chǎn)品ID"}, {id: "txtProductName",xtype: "textfield",emptyText: "產(chǎn)品名稱(模糊)"}, {id: "txtUpTime",xtype: "datefield",emptyText: "開始時間",format: "Y-m-d", //format: "Y-m-d H:i:s"fieldLabel: "產(chǎn)品有效期",width: 220}, {id: "txtDownTime",xtype: "datefield",emptyText: "結(jié)束時間",format: "Y-m-d"}, {xtype: "button",text: "查詢",width: 60,iconCls: "icon-search",handler: function() {doQuery();}}]});var viewport = new Ext.container.Viewport({layout: "border",items: [panel, grid]});doQuery(); //連接數(shù)據(jù)庫才需要執(zhí)行這一行 });function doQuery() {gridStore.loadPage(1); }//設(shè)置值并顯示在表單中 function editRow(pid, productId, productName, price, upTime, downTime, remark) {Ext.getCmp("pid").setValue(pid);Ext.getCmp("productId").setValue(productId);Ext.getCmp("productName").setValue(productName);Ext.getCmp("price").setValue(price);Ext.getCmp("upTime").setValue(upTime);Ext.getCmp("downTime").setValue(downTime);Ext.getCmp("remark").setValue(remark);extWin.show(); }//編輯 function edits(){var record = grid.getSelectionModel().getSelection();if(record.length == 0 || record.length > 1){Ext.MessageBox.show({title:"提示",msg:"請選擇一行進行編輯！"})return;}else{var pid = record[0].get("pid");var productId = record[0].get("productId");var productName = record[0].get("productName");var price = record[0].get("price");var upTime = record[0].get("upTime");var downTime = record[0].get("downTime");var remark = record[0].get("remark");editRow(pid, productId, productName, price, upTime, downTime, remark);} }//根據(jù)pid批量刪除 function deleteProdcut(){var record = grid.getSelectionModel().getSelection();if(record.length==0){Ext.MessageBox.show({title:"提示",msg:"請選擇至少一行進行刪除！"})return; }else{var ids = "";for(var i=0;i<record.length; i++){ids += record[i].get("pid")if(i<record.length-1){ids = ids +","}}$.ajax({type : "POST",url : doDeleteUrl,dataType : "JSON", //返回JSON數(shù)據(jù)cache : false, //不緩存async : true,timeout : 30000,data : {ids:ids},success : function(data,textStatus){if(data.success == true|| data.success == "true"){doQuery();}}});} }</script> </head><body></body> </html>
總結(jié)
以上是生活随笔為你收集整理的ext-4.2之grid的高级应用：增删改查！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle创建带有自增序列的表和字符串
- 下一篇： Ext之Combobox的远程加载数据实