zoukankan      html  css  js  c++  java
  • extjs_04_grid(弹出窗口&行编辑器 CRUD数据)

    1.弹出窗口(添加。删除)

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <title>My JSP "index.jsp" starting page</title>
    
    <link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
    <script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
    <script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
    
    <script type="text/javascript">
    	Ext.onReady(function() {
    		// 自己定义数据模型
    		var myModel = Ext.define("studentInfo", {
    			extend : "Ext.data.Model",
    			fields : [ {
    				type : "string",
    				name : "stuNo"
    			}, {
    				type : "string",
    				name : "stuName"
    			}, {
    				type : "string",
    				name : "stuClass"
    			}, {
    				type : "number",
    				name : "chScore"
    			}, {
    				type : "number",
    				name : "maScore"
    			}, {
    				type : "number",
    				name : "enScore"
    			} ]
    		});
    		// 本地数据
    		var myData = [ [ "No1", "wangzs1", "1年级", 80, 67, 49 ], [ "No2", "wangzs2", "2年级", 65, 57, 79 ],
    				[ "No3", "wangzs3", "3年级", 45, 77, 59 ], [ "No4", "wangzs4", "4年级", 99, 27, 19 ],
    				[ "No5", "wangzs5", "5年级", 23, 97, 99 ], [ "No6", "wangzs6", "6年级", 34, 67, 99 ] ];
    		// 数据存储
    		var myStore = Ext.create("Ext.data.Store", {
    			model : "studentInfo",
    			data : myData
    		});
    
    		// 表格
    		var myGrid = new Ext.grid.Panel({
    			columns : [ {
    				xtype : "rownumberer",
    				text : "行号"
    			}, {
    				text : "学号",
    				dataIndex : "stuNo"
    			}, {
    				text : "姓名",
    				dataIndex : "stuName"
    			}, {
    				text : "班级",
    				dataIndex : "stuClass"
    			}, {
    				text : "语文",
    				dataIndex : "chScore"
    			}, {
    				text : "数学",
    				dataIndex : "maScore"
    			}, {
    				text : "英语",
    				dataIndex : "enScore"
    			} ],
    			store : myStore,
    			selModel : {
    				selType : "checkboxmodel"//复选框
    			},
    			multiSelect : true
    		//支持多选
    		});
    
    		// 新增panel
    		var addPanel = Ext.create("Ext.form.Panel", {
    			items : [ {
    				xtype : "textfield",
    				name : "stuNo",
    				fieldLabel : "学号"
    			}, {
    				xtype : "textfield",
    				name : "stuName",
    				fieldLabel : "姓名"
    			}, {
    				xtype : "textfield",
    				name : "stuClass",
    				fieldLabel : "班级"
    			}, {
    				xtype : "numberfield",
    				name : "chScore",
    				fieldLabel : "语文"
    			}, {
    				xtype : "numberfield",
    				name : "maScore",
    				fieldLabel : "数学"
    			}, {
    				xtype : "numberfield",
    				name : "enScore",
    				fieldLabel : "英语"
    			} ]
    		});
    
    		// 新增窗体
    		var addWindow = Ext.create("Ext.window.Window", {
    			title : "新增学生成绩",
    			closeAction : "hide",//设置该属性新增窗体关闭的时候是隐藏
    			width : 300,
    			height : 300,
    			items : addPanel,
    			layout : "fit",
    			bbar : {
    				xtype : "toolbar",
    				items : [ {
    					xtype : "button",
    					text : "保存",
    					listeners : {
    						"click" : function(btn) {
    							var form = addPanel.getForm();
    							var stuNoVal = form.findField("stuNo").getValue();
    							var stuNameVal = form.findField("stuName").getValue();
    							var stuClassVal = form.findField("stuClass").getValue();
    							var chScoreVal = form.findField("chScore").getValue();
    							var maScoreVal = form.findField("maScore").getValue();
    							var enScoreVal = form.findField("enScore").getValue();
    							//Ext.Msg.alert("新增的数据", "{" + stuNo + ":" + stuName + ":" + stuClass + ":" + chScore + ":"
    							//		+ maScore + ":" + enScore + "}");
    							var store = myGrid.getStore();
    							store.insert(0, {
    								stuNo : stuNoVal,
    								stuName : stuNameVal,
    								stuClass : stuClassVal,
    								chScore : chScoreVal,
    								maScore : maScoreVal,
    								enScore : enScoreVal
    							});
    						}
    					}
    				}, {
    					xtype : "button",
    					text : "取消",
    					listeners : {
    						"click" : function(btn) {
    							btn.ownerCt.ownerCt.close();
    						}
    					}
    				} ]
    			}
    		});
    
    		// 窗体
    		var window = Ext.create("Ext.window.Window", {
    			title : "学生成绩表",
    			width : 600,
    			height : 400,
    			items : myGrid,
    			layout : "fit",
    			tbar : {
    				xtype : "toolbar",
    				items : [ {
    					xtype : "button",
    					text : "新增",
    					listeners : {
    						"click" : function(btn) {
    							addPanel.getForm().reset();//新增前清空表格内容
    							addWindow.show();
    						}
    					}
    				}, {
    					xtype : "button",
    					text : "删除",
    					listeners : {
    						"click" : function(btn) {
    							var records = myGrid.getSelectionModel().getSelection();
    							myGrid.getStore().remove(records);
    						}
    					}
    				} ]
    			}
    		});
    		window.show();
    	});
    </script>
    
    </head>
    
    <body>
    	添加,删除表格记录(弹窗体,适用于表字段比較多)
    	<br>
    </body>
    </html>
    

    2.行编辑器(新增。改动)

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <title>My JSP "index.jsp" starting page</title>
    
    <link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
    <script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
    <script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
    
    <script type="text/javascript">
    	Ext.onReady(function() {
    		// 自己定义数据模型
    		var myModel = Ext.define("studentInfo", {
    			extend : "Ext.data.Model",
    			fields : [ {
    				type : "string",
    				name : "stuNo"
    			}, {
    				type : "string",
    				name : "stuName"
    			}, {
    				type : "string",
    				name : "stuClass"
    			}, {
    				type : "number",
    				name : "chScore"
    			}, {
    				type : "number",
    				name : "maScore"
    			}, {
    				type : "number",
    				name : "enScore"
    			} ]
    		});
    		// 本地数据
    		var myData = [ [ "No1", "wangzs1", "1年级", 80, 67, 49 ], [ "No2", "wangzs2", "2年级", 65, 57, 79 ],
    				[ "No3", "wangzs3", "3年级", 45, 77, 59 ], [ "No4", "wangzs4", "4年级", 99, 27, 19 ],
    				[ "No5", "wangzs5", "5年级", 23, 97, 99 ], [ "No6", "wangzs6", "6年级", 34, 67, 99 ] ];
    		// 数据存储
    		var myStore = Ext.create("Ext.data.Store", {
    			model : "studentInfo",
    			data : myData
    		});
    
    		// 表格
    		var myGrid = new Ext.grid.Panel({
    			columns : [ {
    				xtype : "rownumberer",
    				text : "行号"
    			}, {
    				text : "学号",
    				dataIndex : "stuNo",
    				editor : {//用行编辑器插件须要配置该属性
    					xtype : "textfield"
    				}
    			}, {
    				text : "姓名",
    				dataIndex : "stuName",
    				editor : {
    					xtype : "textfield"
    				}
    			}, {
    				text : "班级",
    				dataIndex : "stuClass",
    				editor : {
    					xtype : "textfield"
    				}
    			}, {
    				text : "语文",
    				dataIndex : "chScore",
    				editor : {
    					xtype : "numberfield"
    				}
    			}, {
    				text : "数学",
    				dataIndex : "maScore",
    				editor : {
    					xtype : "numberfield"
    				}
    			}, {
    				text : "英语",
    				dataIndex : "enScore",
    				editor : {
    					xtype : "numberfield"
    				}
    			} ],
    			store : myStore,
    			selModel : {
    				selType : "checkboxmodel"//复选框
    			},
    			multiSelect : true,//支持多选
    			plugins : [ {
    				ptype : "rowediting",//行编辑器插件,点击2次编辑
    				clicksToEdit : 2
    			} ]
    		});
    
    		// 新增panel
    		var addPanel = Ext.create("Ext.form.Panel", {
    			items : [ {
    				xtype : "textfield",
    				name : "stuNo",
    				fieldLabel : "学号"
    			}, {
    				xtype : "textfield",
    				name : "stuName",
    				fieldLabel : "姓名"
    			}, {
    				xtype : "textfield",
    				name : "stuClass",
    				fieldLabel : "班级"
    			}, {
    				xtype : "numberfield",
    				name : "chScore",
    				fieldLabel : "语文"
    			}, {
    				xtype : "numberfield",
    				name : "maScore",
    				fieldLabel : "数学"
    			}, {
    				xtype : "numberfield",
    				name : "enScore",
    				fieldLabel : "英语"
    			} ]
    		});
    
    		// 新增窗体
    		var addWindow = Ext.create("Ext.window.Window", {
    			title : "新增学生成绩",
    			closeAction : "hide",//设置该属性新增窗体关闭的时候是隐藏
    			width : 300,
    			height : 300,
    			items : addPanel,
    			layout : "fit",
    			bbar : {
    				xtype : "toolbar",
    				items : [ {
    					xtype : "button",
    					text : "保存",
    					listeners : {
    						"click" : function(btn) {
    							var form = addPanel.getForm();
    							var stuNoVal = form.findField("stuNo").getValue();
    							var stuNameVal = form.findField("stuName").getValue();
    							var stuClassVal = form.findField("stuClass").getValue();
    							var chScoreVal = form.findField("chScore").getValue();
    							var maScoreVal = form.findField("maScore").getValue();
    							var enScoreVal = form.findField("enScore").getValue();
    							//Ext.Msg.alert("新增的数据", "{" + stuNo + ":" + stuName + ":" + stuClass + ":" + chScore + ":"
    							//		+ maScore + ":" + enScore + "}");
    							var store = myGrid.getStore();
    							store.insert(0, {
    								stuNo : stuNoVal,
    								stuName : stuNameVal,
    								stuClass : stuClassVal,
    								chScore : chScoreVal,
    								maScore : maScoreVal,
    								enScore : enScoreVal
    							});
    							btn.ownerCt.ownerCt.close();
    						}
    					}
    				}, {
    					xtype : "button",
    					text : "取消",
    					listeners : {
    						"click" : function(btn) {
    							btn.ownerCt.ownerCt.close();
    						}
    					}
    				} ]
    			}
    		});
    
    		// 窗体
    		var window = Ext.create("Ext.window.Window", {
    			title : "学生成绩表",
    			width : 600,
    			height : 400,
    			items : myGrid,
    			layout : "fit",
    			tbar : {
    				xtype : "toolbar",
    				items : [ {
    					xtype : "button",
    					text : "新窗体新增",
    					listeners : {
    						"click" : function(btn) {
    							addPanel.getForm().reset();//新增前清空表格内容
    							addWindow.show();
    						}
    					}
    				}, {
    					xtype : "button",
    					text : "行编辑器新增",
    					listeners : {
    						"click" : function(btn) {
    							myGrid.getStore().insert(0, {});
    							var rowEdit = myGrid.plugins[0];
    							rowEdit.cancelEdit();
    							rowEdit.startEdit(0, 0);
    						}
    					}
    				}, {
    					xtype : "button",
    					text : "删除",
    					listeners : {
    						"click" : function(btn) {
    							var records = myGrid.getSelectionModel().getSelection();
    							myGrid.getStore().remove(records);
    						}
    					}
    				} ]
    			}
    		});
    		window.show();
    	});
    </script>
    
    </head>
    
    <body>
    	添加。删除表格记录(行编辑器,适合改动字段少)
    	<br>
    </body>
    </html>
    


    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    eclipse中,把java函数代码折叠/展开 介绍【转】
    苹果开发者账号注册&真机调试
    Objective-C编码规范:26个方面解决iOS开发问题
    iTunes获取下载的安装包
    Mac AppStore下载文件的获取
    Mac 切换Windows 使用虚拟机, 不推荐双系统
    Xcode使用版本
    如何提高代码质量
    ARC的内存管理
    Objective-C 类的继承、方法的重写和重载
  • 原文地址:https://www.cnblogs.com/hrhguanli/p/4737540.html
Copyright © 2011-2022 走看看