ExtJs 表格的實現

原創 sjf0115 2020-07-05 15:59 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <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="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			var sm = new Ext.grid.CheckboxSelectionModel();
			var cm = new Ext.grid.ColumnModel([
				new Ext.grid.RowNumberer(),//自動顯示行號
				sm,//複選框
				{hearder:'編號',dataIndex:'id',sortable:true},//每一行對應表格的一列
				{header:'姓名',dataIndex:'name'},
				{header:'性別',dataIndex:'sex',renderer:rendererSex},
				{header:'描述',dataIndex:'descn'},
				{header:'生日',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}//日期類型需要特別注意
			]);
			function rendererSex(value){
				if(value == 'male'){
					return "<span style = 'color:red;font-weight:bold'>男</span>";
				}
				else{
					return "<span style = 'color:green;font-weight:bold'>女</span>";
				}
			}
			var data = [['1','小斯','male','descn','1990-01-15T03:34:18'],
						['2','卡卡','female','descn','1990-01-15T03:34:18'],
						['3','c羅','male','descn','1990-01-15T03:34:18'],
						['4','梅西','female','descn','1990-01-15T03:34:18'],
						['5','比利亞','male','descn','1990-01-15T03:34:18']
						];
			//var cm = new Ext.grid.ColumModel(...) 負責創建表格的列信息
			//header:首部顯示文本
			//dataIndex:列對應的記錄集字段
			//sortable:是否可排序
			//renderer:渲染函數
			//format列格式化信息
			/*數據存儲器Store*/
			var store = new Ext.data.Store({
				proxy:new Ext.data.MemoryProxy(data),
				reader:new Ext.data.ArrayReader({},[
					{name:'id'},
					{name:'name'},
					{name:'sex'},
					{name:'descn'},
					{name:'date',type:'date',dateformat:'Y-m-dTH:i:s'}//顯示日期類型數據，同時還需要在cm裏進行配置
				]),
				sortInfo:{field:"name",direction:"ASC"}//設置默認排序方式
			}
			);

			store.load();

			var grid = new Ext.grid.GridPanel({
				renderTo:'grid',//指示表格渲染到什麼地方去
				store:store,//數據存儲器
				cm:cm,//列定義信息
				sm:sm,//複選框
				autoHeight:true,
			});
			}
		);
	</script>
</head>
<body>
	<div id = "grid">
	</div>
</body>
</html>





動態改變表格中數據

動態改變表格中數據，只要更新store就可以了。
//監聽事件
  	reportFaultDealStateCbox.on("select",function(comboBox)
  	{
  	    var Id = comboBox.getValue();
  	    var myReportFaultUrl= "/Web/Manage/DeskTop/JSON/OnlineReportFault/GetReportFault.aspx";
  	    MyReportedFaultWinStore.proxy.setUrl(myReportFaultUrl);  
        MyReportedFaultWinStore.load({ params: { start: 0,limit:10,act:"DealStateOfPublishUser",DealStateId:Id}});
  	});

在這我們監聽下拉框來更新表格中的數據。

屬性表格

//屬性表格
var grid = new Ext.grid.PropertyGrid(
	{
		title:'屬性表格',
		autoHeight:true,
		width:300,
		renderTo:'grid',
		source:{
			"名字":"小斯",
			"性別":"男",
			"年齡":"23",
			"學校":"山東科技大學",
			"住址":"山東淄博"
		}
	}
);
可以直接編輯右邊的單元格，左邊的單元格不可編輯。
在有些時候，只用來顯示數據，需關閉編輯功能。我們通過事件監聽器來實現。
grid.on("beforeedit",function(e){
	e.cancel = true;
	return false;
});




可編輯表格：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <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="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			//列定義信息
			var cm = new Ext.grid.ColumnModel([
				{
					hearder:'編號',
					dataIndex:'id',
					editor:new Ext.grid.GridEditor(
								new Ext.form.TextField(
									{allowBlank:false}//不允許在TextField中輸入空值
								)
							)
				},
				{
					header:'姓名',
					dataIndex:'name',
					editor:new Ext.grid.GridEditor(
								new Ext.form.TextField(
									{allowBlank:false}//不允許在TextField中輸入空值
								)
							)
				},
				{
					header:'描述',
					dataIndex:'descn',
					editor:new Ext.grid.GridEditor(
								new Ext.form.TextField(
									{allowBlank:false}//不允許在TextField中輸入空值
								)
							)
				},
			]);
			//數據
			var data = [['1','小斯','descn'],
						['2','卡卡','descn'],
						['3','c羅','descn'],
						['4','梅西','descn'],
						['5','比利亞','descn'],
						['6','卡卡','descn'],
						['7','c羅','descn'],
						['8','梅西','descn'],
						['9','比利亞','descn'],
						['10','卡卡','descn'],
						];
			/*數據存儲器Store*/
			var store = new Ext.data.Store({
				proxy:new Ext.data.MemoryProxy(data),
				reader:new Ext.data.ArrayReader({},[
					{name:'id'},
					{name:'name'},
					{name:'descn'},
				]),
			}
			);
			var grid = new Ext.grid.EditorGridPanel({
				renderTo:'grid',//指示表格渲染到什麼地方去
				store:store,//數據存儲器
				cm:cm,//列定義信息
				autoHeight:true,
			});
			
			store.load();
			}
		);
	</script>
</head>
<body>
	<div id = "grid">
	</div>
</body>
</html>





限制輸入數據的類型：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <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="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
		//放到grid裏顯示的原始數據
		var data = [
			[29,1,new Date(),true],
			[26,0,new Date(),false],
			[21,0,new Date(),true],
			[24,1,new Date(),false],
		];
		//性別數據
		var sexData = [
			['0','男'],
			['1','女'],
		];
		//列定義信息
		var cm = new Ext.grid.ColumnModel(
			[
				//第一列  NumberField
				{	
					header:'年齡',
					dataIndex:'age',
					editor:new Ext.grid.GridEditor(
						new Ext.form.NumberField(
							{
								allowBlank:false,//表示不能空
								allowNegative:false,//非負數
								maxValue:150//最大值
							}
						)//NumberField
					)//editor
				},//第一列
				//第二列  ComboBox
				{	
					header:'性別',
					dataIndex:'sex',
					editor:new Ext.grid.GridEditor(
						new Ext.form.ComboBox(
							{
								store:new Ext.data.SimpleStore(
									{
										fields:['value','text'],
										data:sexData
									}
								),
								emptyText:'請選擇',
								mode:'local',
								triggerAction:'all',
								valueField:'value',
								displayField:'text',
								readonly:true
							}
						)//ComboBox
					),//editor
					renderer:function(value){
						return sexData[value][1];
					}
				},//第二列
				//第三列
				{
					header:'生日',
					dataIndex:'birthday',
					editor:new Ext.grid.GridEditor(
						new Ext.form.DateField(
							{
								format:'Y-m-d',//日期格式
								minValue:'2007-12-29',
								disabledDays:[0,6],
								disabledDaysText:'只能選擇工作日'
							}
						)//DateField
					),//edidor
					renderer:function(value){
						return value.format("Y-m-d");
					}
				},//第三列
				{
					header:'婚否',
					dataIndex:'marry',
					editor:new Ext.grid.GridEditor(
						new Ext.form.Checkbox(
							{
								allowBlank:false
							}
						)//Checkbox
					),//edidor
					renderer:function(value){
						//Ext.Msg.alert(value);
						return value ? '是':'否';
					}
				}
			]
		);
		//數據存儲器
		var store = new Ext.data.Store(
			{  
				proxy:new Ext.data.MemoryProxy(data),  
				reader:new Ext.data.ArrayReader({},
					[  
						{name:'age'},  
						{name:'sex'},  
						{name:'birthday'},  
						{name:'marry'},
					]
				),            
			}  
		);  
		 //加載數據
		store.load();  
		//表格
		var grid = new Ext.grid.EditorGridPanel(
			{  
				renderTo:'grid',//指示表格渲染到什麼地方去  
				store:store,//數據存儲器  
				cm:cm,//列定義信息  
				autoHeight:true,  
			}
		);  
	}
);
	</script>
</head>
<body>
	<div id = "grid">
	</div>
</body>
</html>








拖放改變表格的大小：

在以上代碼中添加一下代碼：


Resizable必須放在renderer之後。

var rs = new Ext.Resizable('grid',//第一個參數是'grid'，也就是說我們改變大小的區域是在<div id = 'grid'>這個元素上起作用。
			{
				warp:true,//
				minHeight:100,
				pinned:true,//控制可拖動區域的顯示狀態
				handles:'s'//s - south EXT用東西南北上下左右設置可拖放的方向
			}
		);
		//監聽事件
		rs.on('resize',grid.syncSize,grid);


在同一個表格裏拖放

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <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="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
		//放到grid裏顯示的原始數據
		var data = [
			[29,1,new Date(),true],
			[26,0,new Date(),false],
			[21,0,new Date(),true],
			[24,1,new Date(),false],
		];
		//列定義信息
		var cm = new Ext.grid.ColumnModel(
			[
				//第一列  NumberField
				{	
					header:'年齡',
					dataIndex:'age',
				},//第一列
				//第二列  ComboBox
				{	
					header:'性別',
					dataIndex:'sex',
				},//第二列
				//第三列
				{
					header:'生日',
					dataIndex:'birthday',
				},//第三列
				{
					header:'婚否',
					dataIndex:'marry',
				}
			]
		);
		//數據存儲器
		var store = new Ext.data.Store(
			{  
				proxy:new Ext.data.MemoryProxy(data),  
				reader:new Ext.data.ArrayReader({},
					[  
						{name:'age'},  
						{name:'sex'},  
						{name:'birthday'},  
						{name:'marry'},
					]
				),            
			}  
		);  
		 //加載數據
		store.load();  
		//表格
		var grid = new Ext.grid.GridPanel(
			{  
				renderTo:'grid',//指示表格渲染到什麼地方去  
				store:store,//數據存儲器  
				cm:cm,//列定義信息  
				autoHeight:true, 
				enableDragDrop:true,//支持拖放
			}
		); 
		var dropTarget = new Ext.dd.DropTarget(
			grid.container,
			{
				ddGroup:'GridDD',//表格裏默認爲'GridDD'
				copy:false,//決定拖放以後是執行剪切操作還是複製操作
				//處理拖放事件
				notifyDrop:function(dd,e,data){
					//選中多少行
					var rows = data.selections;
					//拖動到第幾行
					var index = dd.getDragData(e).rowIndex;
					if(typeof(index) == "undefined"){
						return;
					}
					//修改store,把剛剛選中的數據拖放到想放的位置
					for(i = 0;i < rows.length;i++){
						var rowData = rows[i];
						//先刪除再添加
						if(!this.copy){
							store.remove(rowData);
						}
						store.insert(index,rowData);
					}
				}
			}
		);
	}
);
	</script>
</head>
<body>
	<div id = "grid">
	</div>
</body>
</html>






不同表格 之間的拖放

不同表格之間的拖放和同一表格內拖放幾乎一樣。注意不同點。


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <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="../examples.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
		//放到grid裏顯示的原始數據
		var data1 = [
			[29,'男','1990-01-11',true],
			[26,'女','1990-01-12',false],
			[21,'男','1990-01-13',true],
			[24,'女','1990-01-14',false],
		];
		var data2 = [
			[15,'男','1990-01-15',true],
			[15,'男','1990-01-16',false],
			[27,'女','1990-01-17',true],
			[28,'女','1990-01-18',false],
		];
		//列定義信息
		var cm = new Ext.grid.ColumnModel(
			[
				//第一列  NumberField
				{	
					header:'年齡',
					dataIndex:'age',
				},//第一列
				//第二列  ComboBox
				{	
					header:'性別',
					dataIndex:'sex',
				},//第二列
				//第三列
				{
					header:'生日',
					dataIndex:'birthday',
				},//第三列
				{
					header:'婚否',
					dataIndex:'marry',
				}
			]
		);
		//數據存儲器
		var store1 = new Ext.data.Store(
			{  
				proxy:new Ext.data.MemoryProxy(data1),  
				reader:new Ext.data.ArrayReader({},
					[  
						{name:'age'},  
						{name:'sex'},  
						{name:'birthday'},  
						{name:'marry'},
					]
				),            
			}  
		);  
		
		var store2 = new Ext.data.Store(
			{  
				proxy:new Ext.data.MemoryProxy(data2),  
				reader:new Ext.data.ArrayReader({},
					[  
						{name:'age'},  
						{name:'sex'},  
						{name:'birthday'},  
						{name:'marry'},
					]
				),            
			}  
		);  
		 //加載數據
		store1.load();
		store2.load();		
		//表格
		var grid1 = new Ext.grid.GridPanel(
			{  
				renderTo:'grid1',//指示表格渲染到什麼地方去  
				store:store1,//數據存儲器  
				cm:cm,//列定義信息  
				autoHeight:true, 
				enableDragDrop:true,//支持拖放
			}
		); 
		var grid2 = new Ext.grid.GridPanel(
			{  
				renderTo:'grid2',//指示表格渲染到什麼地方去  
				store:store2,//數據存儲器  
				cm:cm,//列定義信息  
				autoHeight:true, 
				enableDragDrop:true,//支持拖放
			}
		); 
		var dropTarget1 = new Ext.dd.DropTarget(
			grid1.view.mainBody,
			{
				ddGroup:'GridDD',//表格裏默認爲'GridDD'
				copy:false,//決定拖放以後是執行剪切操作還是複製操作
				//處理拖放事件
				notifyDrop:function(dd,e,data){
					//選中多少行
					var rows = data.selections;
					//拖動到第幾行
					var index = dd.getDragData(e).rowIndex;
					if(typeof(index) == "undefined"){
						return;
					}
					//修改store,把剛剛選中的數據拖放到想放的位置
					for(i = 0;i < rows.length;i++){
						var rowData = rows[i];
						//先刪除再添加
						if(!this.copy){
							store2.remove(rowData);
						}
						store1.insert(index,rowData);
					}
				}
			}
		);
		
		var dropTarget2 = new Ext.dd.DropTarget(
			grid2.view.mainBody,
			{
				ddGroup:'GridDD',//表格裏默認爲'GridDD'
				copy:false,//決定拖放以後是執行剪切操作還是複製操作
				//處理拖放事件
				notifyDrop:function(dd,e,data){
					//選中多少行
					var rows = data.selections;
					//拖動到第幾行
					var index = dd.getDragData(e).rowIndex;
					if(typeof(index) == "undefined"){
						return;
					}
					//修改store,把剛剛選中的數據拖放到想放的位置
					for(i = 0;i < rows.length;i++){
						var rowData = rows[i];
						//先刪除再添加
						if(!this.copy){
							store1.remove(rowData);
						}
						store2.insert(index,rowData);
					}
				}
			}
		);
	}
);
	</script>
</head>
<body>
	<div id = "grid1">
	</div>
	<br>
	<p>第二個表格</p>
	<div id = "grid2">
	</div>
</body>
</html>








發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

WebBrowser中Javascript和Winform代碼之間實現雙向通信

sjf0115 2018-08-29 07:49:11

css 圖片切換模版

sjf0115 2018-08-29 07:49:10