分類  >  Web前端 >

普普通通表格範例

tags:    時間:2013-12-10 20:29:51
普通表格範例

主要演示以下功能:
     包含複選框列、行號列
     自定義單元格的渲染
     定製表格視圖
     各種選擇模式:單元格、行、複選框

 

範例源碼:

var datas = [[1,"張三",24,"Y",new Date(1986,06,09)], [2,"李四",30,"N",new Date(1980,09,13)], [3,"王五",28,"Y",new Date(1982,01,10)]];   			 var person = Ext.data.Record.create([ 	{name: "personId", mapping: 0}, 	{name: "personName", mapping: 1}, 	{name: "personAge", mapping: 2}, 	{name: "personGender", mapping: 3}, 	{name: "personBirth", mapping: 4} ]);  //複選框選擇模式 var checkboxSM = new Ext.grid.CheckboxSelectionModel({ 	checkOnly: true, 	singleSelect: false });  var grid = new Ext.grid.GridPanel({ 	id: "grid1", 	title: "GridPanel實例", 	renderTo: "div1", 	width: 500, 	height: 300, 	//frame: true, 	tbar: [ 		{ 			text: "取得所選單元格", 			iconCls: "search", 			handler: function(){ 				/* 				//單元格選擇模式:new Ext.grid.CellSelectionModel() 				var cell = grid.getSelectionModel().getSelectedCell(); 				if(cell!=null) alert(cell[1]); 				*/ 				 				/* 				//行選擇模式:new Ext.grid.RowSelectionModel() 				var msg = ""; 				grid.getSelectionModel().each(function(record){ 					msg += record.get("personName") + "\n"; 				}); 				if(msg!="") alert(msg); 				*/ 			} 		} 	], 	 	store: new Ext.data.Store({ 		reader: new Ext.data.ArrayReader({id:0}, person), 		data: datas 	}), 	columns: [ 		checkboxSM, 		new Ext.grid.RowNumberer({header:"<font color=red>行號</font>", width:35}), 		{id:"personId", header:"編號", width:50, dataIndex:"personId"}, 		{id:"personName", header:"姓名", width:70, dataIndex:"personName"}, 		{id:"personAge", header:"年齡", width:45, dataIndex:"personAge", renderer:formatAge}, 		{id:"personGender", header:"性別", width:45, dataIndex:"personGender", renderer:formatGender}, 		{id:"personBirth", header:"出生日期", width:120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")} 	], 	//autoExpandColumn: "personBirth", 	stripeRows: true, 	//sm: new Ext.grid.CellSelectionModel() 	//sm: new Ext.grid.RowSelectionModel() 	sm: checkboxSM, 	viewConfig: { //表格視圖配置對象 		enableRowBody: true, 		sortAscText: "升序", 		sortDescText: "降序", 		columnsText: "列表欄位", 		getRowClass: function(record, index, rowParams, store){ 			rowParams.body = "<div style='padding:2px;'>" + record.get("personName") + "</div>"; 			rowParams.bodyStyle = "height:30;background-color:#FFFFCC;"; 		} 	} });  //自定義單元格渲染函數 function formatAge(value, metadata){ 	if(value>=30){ 		metadata.attr = 'style="background-color:#CCFFFF"'; 	} 	return value; }  function formatGender(value){ 	return value=="Y" ? "男" : "<font color=red>女</font>"; }

 

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網