ExtJS4學習筆記

原創 huangzebiao007 2020-02-21 09:46

一、下載地址

http://download.csdn.net/detail/huangzebiao007/6812229

http://download.csdn.net/detail/huangzebiao007/6812251

二、第一個小例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			Ext.create('Ext.window.Window', {
				title: 'Hello',
				height: 200,
				width: 400,
				buttons:[{text:"確定"},{text:"取消"}] 
			}).show();
			
		});
	</script>
</head>


<body>
</body>
</html>


Ext.onReady 可能是你接觸的第一個也可能是在每個頁面都要使用的方法。這個方法會在DOM 加載全部完畢後，保證頁面內的所有元素能被Script 引用之後調用。

三、組件的渲染和事件的觸發

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			Ext.create('Ext.Button', {
				text: 'Click me',
				renderTo: "but",//Ext.getBody(),
				handler: function() {
					alert('You clicked the button!');
				}
			});			
		});	
	</script>
</head>
<body>
<div id="but"></div>
</body>
</html>
使用renderTo可以將組件渲染到節點下，事件的觸發可以在hander中處理

對某個事物源添加事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			Ext.get("but").on("click",handleButton,this,{delay:2000});		
		});	
		
		function handleButton(){
			alert("處理事件");
		}
	</script>
</head>
<body>
<input type="button" id="but" value="click me" />
</body>
</html>

四、常用佈局

1、Border佈局，把容器分成東西南北中幾大區域，容器中的元素可以通過region屬性來指定子元素放置在容器中的什麼位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			Ext.create('Ext.panel.Panel', {
				width: 500,
				height: 300,
				title: 'Border Layout',
				layout: 'border',
				items: [{
					title: 'South Region is resizable',
					region: 'south',     // position for region
					xtype: 'panel',
					height: 100,
					split: true,         // enable resizing
					margins: '0 5 5 5'
				},{
					// xtype: 'panel' implied by default
					title: 'West Region is collapsible',
					region:'west',
					xtype: 'panel',
					margins: '5 0 0 5',
					width: 200,
					collapsible: true,   // make collapsible
					id: 'west-region-container',
					layout: 'fit'
				},{
					title: 'Center Region',
					region: 'center',     // center region is required, no width/height specified
					xtype: 'panel',
					layout: 'fit',
					margins: '5 5 0 0'
				}],
				renderTo: Ext.getBody()
			});
		});	

	</script>
</head>
<body>
</body>
</html>

2、Column佈局，把子元素按列排放，通過columnWidth及width屬性來指定子元素的所佔的列寬度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			// 所有列都以百分數配置 -- 他們總和必須爲1
			Ext.create('Ext.panel.Panel', {
				title: 'Column Layout - Percentage Only',
				width: 350,
				height: 250,
				layout:'column',
				items: [{
					title: 'Column 1',
					columnWidth: 0.25
				},{
					title: 'Column 2',
					columnWidth: 0.55
				},{
					title: 'Column 3',
					columnWidth: 0.20
				}],
				renderTo: Ext.getBody()
			});
			
			// 參數 width 與 columnWidth 混用 -- 所有columnWidth值之和必須爲1.
			// 第一列會佔用寬度120px, 而後兩列會填滿容器剩下的寬度.
			
			Ext.create('Ext.Panel', {
				title: 'Column Layout - Mixed',
				width: 350,
				height: 250,
				layout:'column',
				items: [{
					title: 'Column 1',
					width: 120
				},{
					title: 'Column 2',
					columnWidth: 0.7
				},{
					title: 'Column 3',
					columnWidth: 0.3
				}],
				renderTo: Ext.getBody()
			});
		});	

	</script>
</head>
<body>
</body>
</html>

3、Form佈局，容器中的元素包括標題及組件內容兩項值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			Ext.create('Ext.Panel', {
				width: 500,
				height: 300,
				title: "FormLayout Panel",
				layout: 'form',
				renderTo: Ext.getBody(),
				bodyPadding: 5,
				defaultType: 'textfield',
				items: [{
				   fieldLabel: 'First Name',
					name: 'first',
					allowBlank:false
				},{
					fieldLabel: 'Last Name',
					name: 'last'
				},{
					fieldLabel: 'Company',
					name: 'company'
				}, {
					fieldLabel: 'Email',
					name: 'email',
					vtype:'email'
				}, {
					fieldLabel: 'DOB',
					name: 'dob',
					xtype: 'datefield'
				}, {
					fieldLabel: 'Age',
					name: 'age',
					xtype: 'numberfield',
					minValue: 0,
					maxValue: 100
				}, {
					xtype: 'timefield',
					fieldLabel: 'Time',
					name: 'time',
					minValue: '8:00am',
					maxValue: '6:00pm'
				}]
			});
		});	

	</script>
</head>
<body>
</body>
</html>


4、Fit佈局，子元素填充整個容器區域。


五、ExtJs常用的組件和容器的介紹，extJs的學習本質上就是對這些組件的學習

1、面板Ext.panel.Panel（xtype:panel）

面板由以下幾個部分組成，一個頂部工具欄(tbar)、一個底部工具欄(bbar)、面板頭部(header)、面板尾部(bottom)、面板主區域(body)幾個部分組成

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			var panel1 = Ext.create('Ext.panel.Panel', {
				width:400,
				height:200,
				collapsible:true,//摺疊面板
				closable:true,//出現關閉面板的標誌，如果不設置closeAction,則默認是destroy,無法再show出來,如果是hide,則能再顯示出來
				closeAction:"hide",//默認是destroy
				title:"面板頭部header",
				html:'<h1>面板主區域</h1>',
				items:[{xtype:"button",text:"按鈕1"},{xtype:"button",text:"按鈕2"}],
				tbar:[{text:'頂部工具欄'}],
				bbar:[{text:'底部工具欄'}],
				buttons:[{text:"按鈕位於footer"}],
				renderTo: Ext.getBody()
				
			});		
			
			Ext.create('Ext.Button', {
				text: 'Click me',
				renderTo: "but",//Ext.getBody(),
				handler: function() {
					panel1.show();
				}
			});		
			
		});	

	</script>
</head>
<body>
<div id="but"></div>
</body>
</html>

一個更實際的用法是一個Panel被創建用於放置一些字段而不被渲染，但會作爲容器的一個組成部分而存在 

    <script type="text/javascript">
		Ext.onReady(function(){
			var filterPanel = Ext.create('Ext.panel.Panel', {
				bodyPadding: 5,  // 避免Panel中的子元素緊鄰邊框
				width: 300,
				title: 'Filters',
				items: [{
					xtype: 'datefield',
					fieldLabel: 'Start date'
				}, {
					xtype: 'datefield',
					fieldLabel: 'End date'
				}],
				renderTo: Ext.getBody()
			});
		});	

	</script>
值得注意的是Panel在渲染到頁面上需要配置其自身大小。在現實世界的情況，Panel通常被內置到一個指定的layoutt容 器中去顯示，大小和位置作爲這個容器的子組件。 

    <script type="text/javascript">
		Ext.onReady(function(){
			var resultsPanel = Ext.create('Ext.panel.Panel', {
				title: 'Results',
				width: 600,
				height: 400,
				renderTo: Ext.getBody(),
				layout: {
					type: 'vbox',       // 子元素垂直佈局
					align: 'stretch',    // 每個子元素寬度充滿子容器
					padding: 5
				},
				items: [{               // 指定一個grid子元素
					xtype: 'grid',
					columns: [{header: 'Column One'}],            // 只配置一列顯示，沒有數據
					store: Ext.create('Ext.data.ArrayStore', {}), // 設置一個沒有數據的store
					flex: 1                                       // 佔用容器的1/3高度 (在以 Box 爲佈局中)
				}, {
					xtype: 'splitter'   //一個分割器在兩個子組件之間
				}, {                    // Details 面板作爲一個配置進來的Panel (沒有用xtype指定，默認是 'panel').
					title: 'Details',
					bodyPadding: 5,
					items: [{
						fieldLabel: 'Data item',
						xtype: 'textfield'
					}], // 表單元素(文本域)
					flex: 2             // 佔用容器的2/3高度 (在以 Box 爲佈局中)
				}]
			});
		});	

	</script>

2、瀏覽器窗口Ext.container.Viewport(xtype:viewport)

Viewport渲染自身到網頁的documet body區域， 並自動將自己調整到適合瀏覽器窗口的大小，在窗口大小發生改變時自動適應大小。 一個頁面中只能創建一個Viewport.

簡單的後臺模板示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
	
		Ext.onReady(function(){
							 
			 var store = Ext.create('Ext.data.TreeStore', {
				root: {
					expanded: true,
					children: [
						{ text: "detention", leaf: true, id:"1"},
						{ text: "homework", expanded: true, children: [
							{ text: "book report", leaf: true, id:"2"},
							{ text: "alegrbra", leaf: true, id:"3"}
						] },
						{ text: "buy lottery", leaf: true, id:"4"}
					]
				}
			});
			 
			var treePanel1 = Ext.create('Ext.tree.Panel', {
				title: 'Simple Tree2',
				width: 150,
				store: store,
				rootVisible: true,
			});
			
			
			treePanel1.on('itemclick', function(view,record) {
   				 Ext.Msg.alert('信息提示',  record.data.id);
    		        });

			 
			Ext.create('Ext.container.Viewport', {
				layout: 'border',
				items: [{
					region: 'north',
					html: '<h1 class="x-panel-header">Page Title</h1>',
					height:50

				}, {
					region: 'west',
					collapsible: true,
					title: 'Navigation',
					items:[{xtype:"button",text:"click me",handler: function() {
						alert('You clicked the button!');
					}},{
						xtype:treePanel1
					}],				
					width: 150
					// 這裏通常可以使用 TreePanel 或者 AccordionLayout佈局的導航菜單
				}, {
					region: 'south',
					title: 'South Panel',
					collapsible: true,
					html: 'Information goes here',
					split: true,
					height: 100,
					minHeight: 100
				}, {
					region: 'east',
					title: 'East Panel',
					collapsible: true,
					split: true,
					width: 150
				}, {
					region: 'center',
					xtype: 'tabpanel', // TabPanel本身沒有title屬性
					activeTab: 1,      // 配置默認顯示的激活面板
					items: [{
						title: 'Default Tab',
						html: 'The first tab\'s content. Others may be added dynamically'
					},{
						title: 'Default Tab2',
						html: 'The second tab\'s content. Others may be added dynamically'
					},]
				}]
			});
		});	
	</script>
</head>
<body>
</body>
</html>

3、窗口Ext.window.Window(xtype:window)

一個指定的打算作爲一個應用程序窗口的面板，默認窗口是浮動的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			Ext.create('Ext.window.Window', {
				title: 'Hello',
				height: 200,
				width: 400,
				draggable : true,//是否可以拖動
				maximizable: true//最大化
			}).show();
		});	
	</script>
</head>
<body>
</body>
</html>

4、對話框Ext.MessageBox 別名 ‘Ext.Msg’ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		function alertDialog(){
			Ext.MessageBox.alert("友情提示","這是瀏覽器定義的信息提示框");
	　　}
	　　function confirmDialog(){
	　　　 　var ret=Ext.Msg.confirm("刪除確認","是否真的要刪除該記錄?",function(btuuon){
				alert(btuuon+"選擇結果:"+(btuuon=="yes"?"是":"否"));
			});
	　　}
	　　function inputDialog(){
			Ext.MessageBox.prompt("姓名輸入","請輸入你的姓名:",function(button,text){
				if(button=="ok"){
					alert(button+"你輸入的是:"+text);
				}else{
					alert(button+"你放棄了錄入!");
				}
			});	
		}
		Ext.onReady(function(){
			alertDialog();	
			//confirmDialog();
			//inputDialog();
		});	
	</script>
</head>
<body>
</body>
</html>

5、表格Ext.grid.Panel(xtype:gridpanel, grid)

Grid是在客戶端上顯示大量的表格數據的極佳方式。它本質上是一個超級統計表<table>， GridPanel使其更容易地進行獲取、排序和篩選大量的數據。

Grid是由兩個主要部分組成的 - 一個含有全部數據的store和一個要進行渲染列的集合。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			Ext.create('Ext.data.Store', {
				storeId:'simpsonsStore',
				fields:['name', 'email', 'phone'],
				data:{'items':[
					{ 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
					{ 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
					{ 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
					{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
				]},
				proxy: {
					type: 'memory',
					reader: {
						type: 'json',
						root: 'items'
					}
				}
			});
			
			Ext.create('Ext.grid.Panel', {
				title: 'Simpsons',
				store: Ext.data.StoreManager.lookup('simpsonsStore'),
				columns: [
					{
						header: 'Name',
						dataIndex: 'name',
						//sortable: true,//排序
						//hideable: false,//隱藏
						flex: 1,//佔用剩餘的寬度
						field: 'textfield'//在線編輯
					},
					{
						header: 'Email',
						dataIndex: 'email',
						flex: 1,
						//hidden: true//初始化時是隱藏
						renderer: function(value) {//改變單個單元格的渲染
							//var cls = 'my-class', text = 'Some text'; var s = Ext.String.format('<div class="{0}">{1}</div>', cls, text);
    						//s 現在是字符串: '<div class="my-class">Some text</div>'
            				return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
       					}
					},
					{
						header: 'Phone',
						dataIndex: 'phone',
						flex: 1,
						field: {
							xtype: 'textfield',
							allowBlank: false//非空
						}
						//width: 100//固定寬度
					}
				],
				
				//以下兩個屬性配置好後才能在線編輯 cellmodel是列編輯器，rowmodel是行編輯器
				//rowmodel當我們單擊每個行的行， 編輯器將會出現，並使我們能夠編輯每個我們有指定編輯器的列。
				//cellmodel則只能一個一個點擊
				//selType: 'cellmodel',
				//plugins: [
				//	Ext.create('Ext.grid.plugin.CellEditing', {
				//		clicksToEdit: 1
				//	})
				//],
				selType: 'rowmodel',
				plugins: [
					Ext.create('Ext.grid.plugin.RowEditing', {
						clicksToEdit: 1
					})
				],
				height: 200,
				width: 400,
				renderTo: Ext.getBody()
			});
		});	

	</script>
</head>
<body>
</body>
</html>

分組 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			var store = Ext.create('Ext.data.Store', {
				storeId:'employeeStore',
				fields:['name', 'seniority', 'department'],
				groupField: 'department',
				data: {'employees':[
					{ "name": "Michael Scott",  "seniority": 7, "department": "Management" },
					{ "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
					{ "name": "Jim Halpert",    "seniority": 3, "department": "Sales" },
					{ "name": "Kevin Malone",   "seniority": 4, "department": "Accounting" },
					{ "name": "Angela Martin",  "seniority": 5, "department": "Accounting" }
				]},
				proxy: {
					type: 'memory',
					reader: {
						type: 'json',
						root: 'employees'
					}
				}
			});
			
			Ext.create('Ext.grid.Panel', {
				title: 'Employees',
				store: store,
				columns: [
					{ header: 'Name',     dataIndex: 'name' },
					{ header: 'Seniority', dataIndex: 'seniority' }
				],
				features: [{ftype:'grouping'}],
				width: 200,
				height: 275,
				renderTo: Ext.getBody()
			});
		});	

	</script>
</head>
<body>
</body>
</html>


6、表單Ext.form.Panel（xtype:form）

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // 將會通過 AJAX 請求提交到此URL
    url: 'save-form.jsp',

    // 表單域 Fields 將被豎直排列, 佔滿整個寬度
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],

    // 重置 和 保存 按鈕.
    buttons: [{
        text: '重置',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: '保存',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                       Ext.Msg.alert('保存成功', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('操作失敗', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});

save-form.jsp下面的內容

{success:true}


































huangzebiao007



發佈了73 篇原創文章 · 獲贊 3 · 訪問量 8萬+





私信

關注

















發表評論














所有評論



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







相關文章








Struts2正則表達式校驗






原文地址：http://woxiangbo.iteye.com/blog/463397
下default.xml文件，然後在xwork源代碼中（需單獨下載）找到相應的處理類，param即該類的屬性 
intege:"^-?[1-9]\\d






 紫竹

2020-07-08 06:36:14









從零開始搭建企業管理系統（一）：技術選型






從零開始搭建企業管理系統（一）：技術選型前言項目描述開發工具後端技術選型前端技術選型開發工具插件開發規範前端開發規範後端開發規範
前言
今天是2020年07月07日，一個特別的高考日，早上上班，看到安徽黃山歙縣因暴雨，考生無法到達






 shixiaomingye

2020-07-08 05:01:22









JDBC核心技術之（二）事物






6.jdbc事物
什麼是事物：
事物就是邏輯上的一組操作，要麼成功，要麼失敗！（比如轉賬 A 給 B 轉賬，A轉出去了，B沒收到，那麼就不應該算成功，而是應該全部失敗.）
事物的特性：
 原子性：意思是不可以分割
一致性：






 likeaijiaqi

2020-07-07 13:32:55









iText產生PDF






通過iText可以動態創建PDF文件，並對創建的文件進行各種設置。在itext中的文本內容基本可以分爲Chunk、Phrase、Anchor、Paragraph、Chapter、Section等幾種類型。
Chunk：一段字符串，好比文本






 义明

2020-07-07 10:28:55









jQuery實現全選和全不選






<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成複選框的全選和全不選</title>
<script type="text/java






 义明

2020-07-07 10:28:55









idea中添加web項目並配置tomcat






1
添加項目後，   modules裏面是沒有的，需要自己手動添加
  
tomcat配置






 流氓小猴子

2020-07-06 10:26:42









納稅服務投訴受理模塊中投訴與回覆中的級聯查詢等細節






1、投訴和投訴回覆實體及hbm配置文件
Complain.java
package cn.buaa.nsfw.complain.entity;
import java.sql.Timestamp;
import java.util.H






 幸福是什么感觉呢

2020-07-06 04:02:08









ajax中Json對象的使用（利用struts框架或者單獨使用）






1、先看看不使用Struts框架的情況下json對象的傳值（主要區別在action，jsp頁面和javascript沒變化）
a、導入相關jar
commons-beanutils-1.8.0.jar
ezmorph-1.0.6.jar






 幸福是什么感觉呢

2020-07-06 04:02:08









spring和mybatis的整合配置（包括springmvc）






1）創建一個spring-mybaits-oracle這麼一個javaweb或java工程
2）導入spring，mybatis，c3p0，orac






 幸福是什么感觉呢

2020-07-06 04:02:08









JSON 廣度學習






前言
近期的學習與大作業中，發現了Json的重要性，藉此機會記錄下來。
什麼是Json？
Json 是一種輕量級的數據交換的格式類型，是JavaScript對象表示法，應用廣泛。對於後端對象來說，Json 就是一個字符串，比如：






 卖萌鸡尾酒

2020-07-06 01:59:40









關於PO,POJO,VO






PO：persistant object持久對象
最形象的理解就是一個PO就是數據庫中的一條記錄。好處是可以把一條記錄作爲一個對象處理，可以方便的轉爲其它對象。
POJO = pure old java object or plai






 末日的回想

2020-07-05 19:05:43









JS實現分頁功能






JS實現分頁功能
參考鏈接：https://blog.csdn.net/chengtanyong4777/article/details/79711334






 风之沙城

2020-07-05 15:03:50









談談你對深拷貝和淺拷貝的理解-Java






一、區別
1. 深拷貝中既要拷貝基本數據類型也要拷貝引用類型的數據，也就是說拷貝一份完全一樣的對象。
  2. 淺拷貝中之拷貝基本數據類型，引用類型的數據只是拷貝了原來的引用，並沒有把引用的數據也拷貝。
 
二、方式
1. 深拷






 向伟888

2020-07-05 05:07:27









消滅Java代碼的“壞味道”






1.讓代碼性能更高
1.1.需要 Map 的主鍵和取值時，應該迭代 entrySet()
當循環中只需要 Map 的主鍵時，迭代 keySet() 是正確的。但是，當需要主鍵和取值時，迭代 entrySet() 纔是更高效的做法，比先迭代






 失落夏天

2020-07-05 02:14:38









在myeclipse裏面的快捷鍵






當在myeclipse裏面按自己設置的快捷鍵比如：alt+/ 智能提示沒有的時候可以進入“windows-->preferences-->java-






 scjingying

2020-07-04 12:03:24