`
leon1509
  • 浏览: 535749 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

可编辑的表格(vifir)

阅读更多
jsp:
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>可编辑的表格</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<style type="text/css">
				.x-grid-record-red table{   
				    color: #FF0000;   
				}
				.allow-float {clear:none!important;} /* 允许该元素浮动 */  
				.all-field {
			        float:left;
			        padding:0 0 0 10px;
		    	}
		</style>
		<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
		<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../../ext-all.js"></script>
		<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
		<script>
		/****begin****/
Ext.grid.CheckColumn = function(config) {
	Ext.apply(this, config);
	if (!this.id) {
		this.id = Ext.id();
	}
	this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype = {
	init : function(grid) {
		this.grid = grid;
		this.grid.on('render', function() {
			var view = this.grid.getView();
			view.mainBody.on('mousedown', this.onMouseDown, this);
		}, this);
	},

	onMouseDown : function(e, t) {
		if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
			e.stopEvent();
			var index = this.grid.getView().findRowIndex(t);
			var record = this.grid.store.getAt(index);
			record.set(this.dataIndex, !record.data[this.dataIndex]);
		}
	},

	renderer : function(v, p, record) {
		p.css += ' x-grid3-check-col-td';
		return '<div class="x-grid3-check-col' + (v ? '-on' : '')
				+ ' x-grid3-cc-' + this.id + '">&#160;</div>';
	}
};
/****end****/
		
function showUrl(value)
{
return "<a href='#'>"+value+"</a>";
}

Ext.onReady(function() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';   
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 
		
	var tpl = '<tpl for="."><div class="x-combo-list-item" ext:qtitle="值" ext:qtip="{name}">{name}</div></tpl>'; 
	
	var data = [
	
					[1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com','1900-5-6',66,'0',true],
					[2, 'jfox', 'huihoo', 'www.huihoo.org','2009-5-6',11,'1',false],
					[3, 'jdon', 'jdon', 'www.jdon.com','2009-5-6',22,'1',false],
					[4, 'springside', 'springside', 'www.springside.org.cn','1992-5-6',33,'0',false],
					[5, 'aaa', 'springside', 'www.easyjf.com','1999-5-6',45,'1',false],
					[6, 'bbb', 'springside', 'www.easyjf.com','1992-5-6',55,'0',false],
					[7, 'cccc', 'springside', 'www.easyjf.com','1992-5-6',66,'1',true],
					[8, 'ddd', 'yahoo', 'www.easyjf.com','1992-5-6',77,'0',false],
					[9, 'eee', 'ddddddddddddddd', 'www.springside.org.cn','1992-5-6',1230,'0',false],
					[10, 'fff', 'fdfsdafsdfs', 'www.yahoo.com.cn','1992-5-6',32,'0',false],
					[11, 'gggg', 'this is pen', 'www.yahoo.com.cn','1992-5-6',45,'0',true],
					[12, 'hhhh', 'springside', 'www.baidu.com','1992-5-6',56,'1',false],
					[13, 'as', 'springside', 'www.baidu.com','1992-5-6',756,'0',true],
					[14, 'you', 'how are you', 'www.baidu.com','1992-5-6',4455,'1',false],
					[15, 'hom', 'springside', 'www.springside.org.cn','1992-5-6',98,'0',false],
					[16, 'fff', 'springside', 'www.yahoo.com.cn','1992-5-6',676,'1',true],
					[17, 'gggg', 'springside', 'www.yahoo.com.cn','1992-5-6',555,'0',false],
					[18, 'fff', 'springside', 'www.yahoo.com.cn','1992-5-6',890,'1',false],
					[19, 'gggg', 'springside', 'www.yahoo.com.cn','1992-5-6',1200,'1',true],
					[20, 'fff', 'springside', 'www.jdon.com','1992-5-6',1566,'1',false],
					[21, 'gggg', 'springside', 'www.jdon.com','1992-5-6',333,'0',true],
					[22, 'gggg', 'springside', 'www.jdon.com','1255-5-6',333,'1',false],
					[23, 'vvvvv', 'tttttt', 'www.jdon.com','1992-5-6',333,'0',false],
					[24, 'sex', 'springside', 'www.jdon.com','2111-5-6',333,'1',true],
					[25, 'zhangsan', 'springside', 'www.jdon.com','1988-5-6',333,'0',true]
			
				];
		
		/**	
	var store = new Ext.data.SimpleStore({
		data : data,
		fields : ["id", "name", "organization", "homepage",{
			name : "beginDate",
			type : "date",
			dateFormat : "Y-n-j"
		}]
	});
	**/
	
	var sexData=[['女','1'],['男','0']];
	
	var sexComStore = new Ext.data.SimpleStore({
             fields: ['name', 'value'],
             data : sexData,
           	 sortInfo:{field:'name', direction:'ASC'} //指定排序字段
             
     });
	var sm=new Ext.grid.CheckboxSelectionModel();
	
	var reader = new Ext.data.ArrayReader({},[
       {name: 'id'},
       {name: 'name',type: 'string'},
       {name: 'organization'},
       {name: 'homepage'},
       {name: 'beginDate', type: 'date', dateFormat: 'Y-n-j'},
       {name: 'price', type: 'float'},
       {name: 'itemrslt'},
       {name: 'married',type: 'bool'}
    ]);
    
    var store = new Ext.data.GroupingStore({
            reader: reader,
            data: data,
            sortInfo:{field: 'price', direction: "ASC"},
            groupField:'homepage'
    });
	
	 // 自定义的字段
     var checkColumn = new Ext.grid.CheckColumn({
        header: "婚否?",
        dataIndex: 'married',
        width: 55
     });
	
	
	var colM = new Ext.grid.ColumnModel([
	new Ext.grid.RowNumberer(),
	sm,
	{
		header : "ID",
		dataIndex : "id",
		sortable : true
	},
	{
		header : "项目名称",
		dataIndex : "name",
		editor : new Ext.form.TextField(),
		sortable : true
	}, {
		header : "开发团队",
		dataIndex : "organization",
		editor : new Ext.form.TextField(),
		//hidden:true,/*隐藏列*/
		sortable : true
	}, {
		header : "开始日期",
		dataIndex : "beginDate",		
		renderer : Ext.util.Format.dateRenderer('Y年m月d日'),
		editor : new Ext.form.DateField({
			format : 'Y年m月d日'
		}),
		sortable : true
	}, {
		header : "网址",
		dataIndex : "homepage",
		editor : new Ext.form.TextField(),
		renderer : showUrl
	}, {
		header : "金额",
		dataIndex : "price",
		editor : new Ext.form.NumberField({
				 	allowNegative: false, // 不允许为负数
				 	decimalPrecision: 1, // 默认的小数点位数
				 	allowNegative: false, // 不允许为负数
				 	maxValue: 100000 // 最大值为10万 		
		}),
		css:'text-align:right;',
		renderer : Ext.util.Format.usMoney 
	},
	{
		header : "性别",
		dataIndex : 'itemrslt',
		css : 'text-align: center;',
		horizontal:true, 
		renderer: rend,
		editor : new Ext.grid.GridEditor( new Ext.form.ComboBox({ 
         displayField: 'name', 
         valueField: 'value', 
         typeAhead: true,         
         triggerAction: 'all', 
         style: 'width:30px', 
         width:100, 
         tpl :tpl, 
         hiddenName:'sex', 
         mode: 'local',
         autoLoader:true, 
         selectOnFocus:true, 
         //lazyRender :true, 
         store: sexComStore 
		}))
		
	},
	 checkColumn // 自定义的婚否列
	]);
	colM.defaultSortable = true; 	
		
	function rend(value) {
        if (value == '0') { 
            return "男"; 
        } else {
            return "女"; 
        }
    }
	//Ext.util.Format.dateRenderer('m/d/Y')
	
	// 创建数据源的记录,代表一个员工
	var Employee = Ext.data.Record.create([
	{
		name : 'id',
		type : 'int'
	},
	{
		name : 'name',
		type : 'string'
	}, 
	{name: 'organization'},
	{name: 'homepage'},		
	{
		name : 'beginDate',
		mapping : 'birth',
		type : 'date',
		dateFormat : 'm/d/Y'
	}, // 日期自动转换
	 {
		name : 'price',
		type : 'float'
	},
	{name: 'itemrslt'},
	 {
		name : 'married',
		type : 'bool'
	}]);
	
	var ptb=new Ext.PagingToolbar({ 
			pageSize: 10, 
			store: store,
			displayInfo: true,
			height: 30,
			width: 800,
			items : ['     ', new Ext.form.ComboBox({
			width : 50,	
			store : new Ext.data.SimpleStore({
				fields : ['Label', 'Value'],
				displayField : 'Label',
				valueField : 'Value',
				data : [[10, 10], [15, 15], [20, 20], [30, 30], [40, 40],[50, 50],
						[60, 60],[70, 70], [80, 80], [100, 100]]
				}),
					
			typeAhead : true,
			mode : 'local',
			value : '20',
			listWidth: 50, /** 行宽	**/	
			triggerAction : 'all',
			selectOnFocus : true,
			listeners : {
				change : {
					fn : function(box, newValue, oldValue) {						
						
					}
				},
				select : {
					fn : function(combo, value) {					
						
					}
				}
			}
			})],
			displayMsg: '显示第 {0} 条到 {1} 条记录,  共 {2} 条', 
			emptyMsg: '没有记录' 
		});
	
	var grid = new Ext.grid.EditorGridPanel({
		//renderTo : "hello",
		title : "中国Java开源产品及团队",
		
		width : 800,
		frame: true,		
		cm : colM,
		sm: sm,
		store : store,		
		autoExpandColumn : 2, //默认自动扩展宽度的字段 
		clicksToEdit: 1, //属性定义点击几次进行编辑 clicksToEdit:1,//单击一次编辑
		loadMask: true, 
		loadMask:{msg:'正在加载数据......'},
    	bodyStyle:'width:100%',
		stripeRows:true, 
		autoHeight: true,
		plugins: checkColumn,
		viewConfig:{forceFit:true}, 
		view: new Ext.grid.GroupingView({ 
            forceFit:true, 
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})',
            getRowClass: function(record,rowIndex,rowParams,store){// 数据显示红色
	                    		if(record.data.price>200){
										return 'x-grid-record-red';   
								 }else{
										return '';
								 }
							}
        }), 
		bbar: ptb,		
		tbar: [{ /** 顶部的工具栏 tools bar**/
                    text: '增加新员工',
                    handler : function(){
                        var p = new Employee({
                        	id: '',
                            name: '输入员工姓名',
                            organization: '',
                            homepage: '',
                            beginDate: (new Date()).clearTime(),
                            price: 0,
                            itemrslt: '0',
                            married: false
                        });                        
                        grid.stopEditing();
                        store.insert(0, p);
                        grid.startEditing(0, 0);                        
                    }
                }],
       
		listeners : {
			'celldblclick' : function() {
				
				//return false;  //返回false将双击不能变成可编辑状态
			},
			'cellcontextmenu' : function(g, r, c, e) {
				e.stopEvent();
				var menu = new Ext.menu.Menu({
					items : [{
						text : '编辑',
						handler : function() {
							g.startEditing(r, c);
						}
					}]
				});
				menu.showAt(e.getXY());
			}
		}
	});
	
	//store.load();
	
	grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
		var selectionModel = grid.getSelectionModel(); //资源Grid表中取出选中行
		var record = selectionModel.getSelected(); //取出对应记录
	});

	//grid.addListener('cellclick', cellclick);
	function cellclick(grid, rowIndex, columnIndex, e) {
	    var record = grid.getStore().getAt(rowIndex);   //Get the Record
	    var fieldName = grid.getColumnModel().getDataIndex(columnIndex);  //Get field name
	    var data = record.get(fieldName);
	    Ext.MessageBox.alert('提示','当前选中的数据是'+data);
	}		
	

	
	var win = new Ext.Window({
		title : '可编辑表格',
		modal : true,
		width : 900,
		autoScroll : true,
		closable : true,
		// resizable:true,
		items : [grid],
		x:200,
		y:5,
		buttons : [
			new Ext.Button({   
                text:"保存",
                minWidth:100,   
                id:"mybutton",
                //点击事件   
                listeners:{  
                    "click":function(){
                    	
                    	var m = store.getModifiedRecords();
						if (m.length == 0) {
							alert("没有更新的数据");
							return false;
						}
                    	var sSend = "["
						for (var i = 0, len = m.length; i < len; i++) {//married
							sSend = sSend + "{id:'" + m[i].data['id'] + "', married:'"+ m[i].data['married']+"'homepage:'"+ m[i].data['homepage']+ "',name:'"+m[i].data['name']+"',price:'"+m[i].data['price']+"', beginDate:'"+ m[i].data['beginDate'] +"'}";
							if (i < len - 1)
								sSend = sSend + ","
						}
						sSend = sSend + "]";
						sSend = Ext.util.JSON.encode(sSend);
						  
						alert(sSend);            
						//win.hide();
						win.close();
                    }
                }  
        })
		]
	})
	win.show();
	
});
</script>
	</head>
	<body>

<%--		<div id="hello"></div>--%>
	</body>
</html>



将代码放到extjs/examples目录中,注意引用文件的路径。

效果:


  • 大小: 33.4 KB
分享到:
评论

相关推荐

    Vifir.Core.dll下载

    Vifir.Core.dll下载,Vifir.Core.dll下载

    Vifir-开源

    1. 软件的安装包或可执行文件,用于在各种操作系统上运行Vifir。 2. 源代码文件,供开发人员阅读和修改。 3. 文档和用户指南,解释如何使用Vifir及其功能。 4. 数据库或地图资源,包括最新的NOAA VFR航图。 5. 更新...

    很好的EXTJS例子

    EXTJS 2.0是EXTJS的一个早期版本,虽然现在最新的版本已经发展到7.x,但这个2.0版本依然有价值,因为它包含了EXTJS的基础元素,如Grids(表格)、Forms(表单)、Panels(面板)以及Trees(树形结构)等。...

    ExtJs单用户Blog系统后台源码

    系统后台使用.Net平台,语言为C#,技术构架为NHibernate+Spring.Net+Vifir实现,支持多种数据库,采用三层结构,数据访问层DAO、业务逻辑层及表示层完全分离。DAO层使用的泛型DAO,只需要一个DAO接口即可,不需要写...

    ExtJS在.NET中的应用实例

    7. **解决方案文件(Vifir.Web.sln)**:这是一个Visual Studio的解决方案文件,包含了项目的所有配置和引用信息,开发者可以通过打开这个文件来加载和编辑整个.NET项目。 8. **源码必读.txt**:可能包含了对源码的...

    Ext简介及应用案例 ppt

    它基于Ajax技术,提供丰富的用户界面组件和高度可定制的界面元素。Ext的核心特点包括遵循W3C标准,拥有庞大的组件模型,允许开发者创建复杂且功能丰富的Web应用程序。此外,它还提供了丰富的UI控件,如窗口、树形...

    基于.Net平台的extjs单用户Blog系统

    系统后台使用.Net平台,语言为C#,技术构架为NHibernate+Spring.Net+Vifir实现,支持多种数据库,采用三层结构,数据访问层DAO、业务逻辑层及表示层完全分离。DAO层使用的泛型DAO,只需要一个DAO接口即可,不需要写...

    基于.Net平台的extjs单用户Blog系统简介 

    系统后台使用.Net平台,语言为C#,技术构架为NHibernate+Spring.Net+Vifir实现,支持多种数据库,采用三层结构,数据访问层DAO、业务逻辑层及表示层完全分离。DAO层使用的泛型DAO,只需要一个DAO接口即可,不需要写...

    Extjs Blog

    系统后台使用.Net平台,语言为C#,技术构架为NHibernate+Spring.Net+Vifir实现,支持多种数据库,采用三层结构,数据访问层DAO、业务逻辑层及表示层完全分离。DAO层使用的泛型DAO,只需要一个DAO接口即可,不需要写...

    Ext开发视频教程---ppt

    2. 应用于vifir在线客服和技术咨询场景。 **七、www.vifir.com后台管理系统** 1. 包括新闻发布、论坛、博客、专业数据库和客户服务等多个子系统。 **八、vifir.com技术构架** 1. 后台采用EJS(EasyJWeb+JPA+Spring...

    extblog博客程序

    系统后台使用.Net平台,语言为C#,技术构架为NHibernate+Spring.Net+Vifir实现,支持多种数据库,采用三层结构,数据访问层DAO、业务逻辑层及表示层完全分离。DAO层使用的泛型DAO,只需要一个DAO接口即可,不需要写...

    EXTJS介绍与开发指南

    3. 界面元素丰富且可定制,可以实现美观且功能齐全的Web应用。 4. 强大的工具封装,简化了许多复杂的前端任务。 5. 开源许可(GPL),允许自由使用和修改,促进社区共享和改进。 EXTJS的使用并不复杂,例如,创建一...

    ext js 培训资料

    2. **后台管理系统**:如vifir.com,使用EXT JS构建了新闻发布、论坛、博客和专业数据库等多个系统。 3. **蓝源OA系统**:采用EXT JS作为前端UI,结合EJS、JPA和Spring2.5构建,包括日志管理、信息中心等功能。 **...

Global site tag (gtag.js) - Google Analytics