---------------------------------------------------------------------------------------------------------------
[版权申明：本文系作者原创，转载请注明出处]
文章出处：http://blog.csdn.net/sdksdk0/article/details/51914553
作者：朱培 ID：sdksdk0
---------------------------------------------------------------------------------------------------------------

本文主要内容是介绍EasyUI的一些常用组件的使用，都是一些非常基础的知识，适合入门者学习，主要包括Base（基础）、Layout(布局）、菜单和按钮、表单、窗口、表格和树等的使用。要求完全掌握这些内容，学会查阅文档，了解开发基本思想。如果想进一步深入学习，可以直接去官网进行学习，查阅文档等http://www.jeasyui.com/。

一、简介

EasyUI是一种第三方组织开发的，开源的，功能强大的，基于jquery的插件库。主要可以用于web的后台前端。jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。这里介绍的都是一些基本组件，项目中需要将其装配起来，方可构建完整的web页面，EasyUI只是众多前端WEB组件之一。

作用：快速基于现成的组件创建自己的web页面。组件：指已经有第三方写好的，直接可以使用的功能界面，例如：form,layout,tree等。

二、开发步骤

1、先去官网下载相应的插件：

2、在myeclipse中新建一个web工程

3、在WebRoot目录下创建js和themes目录，导入官方文件

4、新建一个helloword.html的网页，并引入下列文件：

<link rel="stylesheet" href="themes/default/easyui.css" type="text/css" />

<link rel="stylesheet" href="themes/icon.css" type="text/css" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>

文件引入的顺序不要错，那么到目前为止，开发的准备工作就已经完成了。

三、Base组件的使用

3.1 Pagination（分页）

使用$.fn.pagination.defaults重写默认值对象

.分页组件是一个比较常用的组件之一，我们可以有两种使用方式，一种是直接在标签上面添加相应的属性，另一种是通过js进行操作。

静态方式创建如下：

<div

		id="pagination"

		class="easyui-pagination"

		data-options="total:2000,pageSize:10"

		style="background:#efefef;border:1px solid #ccc;"

	>

</div>

动态方式：

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 

<script>

	$("#pp").pagination({

		"total":100,   //表示总记录数

		"pageSize":10,  //每页显示多少条记录

		"pageNumber":2,   //当前页号

		"pageList":[10,20],  //

		"buttons":[

		{

			iconCls:'icon-add',

			handler:function(){alert('add')}

		},'-',{

			iconCls:'icon-save',

			handler:function(){alert('save')

			}

		}],

		"layout":['list','sep','first','prev','manual','next','last','links'],

		"showPageList":false,

	});

	$("#pp").pagination({

		"onSelectPage":function(pageNumber,b){

			alert(pageNumber);

			alert(b)

		}

	})

我这里是添加了一些事件和方法的，可以依据实际情况进行增加或删除或修改里面的小的部分组件。大大方便了我们的开发。

3.2 ProgressBar（进度条）

使用$.fn.progressbar.defaults重写默认值对象。

使用HTML标签或程序创建进度条组件。从标签创建更加简单，添加'easyui-progressbar'类ID到<div/>标签。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

使用Javascript创建进度条。

<div id="p"  style="width:400px;"  ></div><br />

<input id="startID" type="button"  value="开始"  style="width:100px;height:30px" />

	<script>

		$("#p").progressbar({

			width:1000,

			height:40,

			value:0

		});

		//获取1-9之间的随机数

		function getNum(){

			return Math.floor(Math.random()*9)+1;

		}

		/* for(var i=0;i<20;i++){

			var num=getNum();

			document.write(num+"<br />");

		} */

		var timeID=null;

		function update(){

			//获取随机值

			var num=getNum();

			//获取进度条当前值

			var value=$("#p").progressbar("getValue");

			if(value+num>100){

				//设置进度条当前值为100，且停止运行

				$("#p").progressbar("setValue",100);

				window.clearInterval(timeID);

				$("#startID").removeAttr("disabled");

			}else{

				$("#p").progressbar("setValue",(value+num))

			}

		}

		$("#startID").click(function(){

			timeID=window.setInterval("update()",500);

			//按钮失效

			$(this).attr("disabled","disabled");

		});

	</script>

四、Layout组件的使用

4.1 layout的使用

布局是最常用的组件了，官方提供的是拥有5个布局方向的：北、南、东、西、中.

基本的使用方式如下：

<div

	    	id="layoutID"

	    	class="easyui-layout"

	    	data-options="fit:true"

	    	style="width:800px;height:500px">

    	<!-- 上 -->

    	<div data-options="region:'north',title:'上',split:true,iconCls:'icon-edit',minHeight:'100',maxHeight:'200'" style="height:100px;"></div>   

	    <!-- 下 -->

	    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   

	   	<!-- 右 -->

	    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>

	   	<!-- 左 -->

	    <div data-options="region:'west',title:'West',split:true" style="width:200px;"></div>

	    <!-- 中 -->

	    <div data-options="region:'center',title:'center title' " style="padding:5px;background:#eee;"></div>   

    	</div>

我们可以为其添加js的属性：

<script>

    	$(function(){

    		$('#layoutID').layout('collapse','north');

    		//休息3秒

    		window.setTimeout(function(){

    			//将南边折叠

    			$('#layoutID').layout("collapse","south");

    			//将北边展开

    			$('#layoutID').layout('expand','north');

    			//将南边展开

    			window.setTimeout(function(){

    				$("#layoutID").layout("expand","south");

    			},3000);

    		},3000);

    	});

    	</script>

对于布局来说，当然也还是可以进行嵌套处理的，我们可以摘除掉我们不需要的部分，然后将需要的部分进行再次组装。

<div id="layoutID"  class="easyui-layout"  data-options="fit:true" >

    	 <div data-options="region:'north',border:false" style="height:100px"></div>   

    	 <div data-options="region:'center'">

    	 	<div  class="easyui-layout"  data-options="fit:true"  >

    	 		<div data-options="region:'west',border:false" style="width:180px"></div>

            	<div data-options="region:'center'">

            		<div class="easyui-layout"  data-options="fit:true">

            		    	 <div data-options="region:'north'" style="height:100px"></div>

    						 <div data-options="region:'south'" ></div>   

            		</div>

            	</div>

    	 	</div>

    	   </div>

    	</div>

效果如下：

4.2 面板的使用

第一种方式：通过标签直接创建。

<div

	    	id="panel"

	    	class="easyui-panel"

	    	title="我的第一个面板"

	    	data-options="iconCls:'icon-save',collapsible:'true',minimizable:true,maximizable:true"

	    	style="width:800px;height:300px;padding:15px"

    	>

    		easyui入门

    	</div>

第二种方式：

<div id="p" style="padding:10px;">

    <p>panel content.</p>

    <p>panel content.</p>

</div>

<script>

$('#p').panel({

  width:500,

  height:150,

  title: 'My Panel',

  tools: [{

    iconCls:'icon-add',

    handler:function(){alert('new')}

  },{

    iconCls:'icon-save',

    handler:function(){alert('save')}

  }]

});   

	<div id="p" style="padding:10px;">

		<p>panel content.</p>

		<p>panel content.</p>

	</div>

	$('#p').panel({

	  width:500,

	  height:150,

	  title: 'My Panel',

	  tools: [{

		iconCls:'icon-add',

		handler:function(){alert('new')}

	  },{

		iconCls:'icon-save',

		handler:function(){alert('save')}

	  }]

	});

 </script>

4.3 Accordion（分类）

使用$.fn.accordion.defaults重写默认值对象。

分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

<div

	id="adID"

	class="easyui-accordion"

	data-options="fit:false,border:true,multiple:false,selected:-1"

	style="width:300px;height:200px;"

	>

		<div title="北京" data-options="iconCls:'icon-save'"

			style="overflow:auto;padding:10px;">

			朝阳区

		</div>

		<div title="湖南" data-options="iconCls:'icon-reload'"

			style="padding:10px;">衡阳市

		</div>

		<div title="北京" data-options="iconCls:'icon-save'"

			style="overflow:auto;padding:10px;">

			<p>朝阳区</p>

		</div>

		<div title="湖南" data-options="iconCls:'icon-reload'"

			style="padding:10px;">

			<p>衡阳市</p>

			<p>长沙市</p>

		</div>

	</div>

	<script>

		$(function(){

		//增加一个面版

			$("#adID").accordion("add",{

				"title":"广东省",

				"iconCls":"icon-add",

				"content":"广州",

				"selected":false

			});

			window.setTimeout(function(){

				$("#adID").accordion("remove","北京");

				$("#adID").accordion("unselect",0);

			},3000);

		});

	</script>

4.4 Tabs（选项卡）

使用$.fn.tabs.defaults重写默认值对象。

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

<div

	id="tt"

	class="easyui-tabs"

	data-options="plain:false,fit:false,border:true,tools:[

		{

			iconCls:'icon-add',

			handler:function(){

				alert('添加')

			}

		},

		{

			iconCls:'icon-sava',

			handler:function(){

				alert('保存')

			}

		}

	],toolPosition:'right',tabPosition:'top',selected:2"

	style="width:500px;height:250px;"

	>

		<div title="Tab1" style="padding:20px;display:none;">tab1</div>

		<div title="Tab2" data-options="closable:true"

			style="overflow:auto;padding:20px;display:none;">tab2</div>

		<div title="Tab3" data-options="iconCls:'icon-reload',closable:true"

			style="padding:20px;display:none;">tab3</div>

	</div>

五、Menu 和Button组件的使用

LinkButton（按钮）

使用$.fn.linkbutton.defaults重写默认值对象。

按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

<a id="btn_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'sex',toggle:true,iconAlign:'right'">增加部门</a><br />

   <a id="btn_find" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',group:'sex',toggle:true"">查找部门</a><br />

    <a id="btn_update" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',group:'sex',toggle:true"">修改部门</a><br />

    <a id="btn_delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',group:'sex',toggle:true"">删除部门</a><br />

    <script>

    	$("a").click(function(){

    		//获取单击的按钮的标题

    		var title=$(this).text();

    		//去空格

    		title=$.trim(title);

    		alert(title);

    	});

    </script>

六、Form组件的使用

6.1 ValidateBox（验证框）

使用$.fn.validatebox.defaults重写默认值对象。

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

姓名:<input id="nameID"  /><br />

	邮箱:<input id="emailID"  /><br />

	密码:<input id="pwdID"  />

	<script>

		$("#nameID").validatebox({

			required:true,

			//validType:'length[1,6]'

			validType:['length[1,6]','chinese'],

			delay:200,

			tipPosition:'left'

		});

		//自定义规则，验证是否为汉字

		$.extend($.fn.validatebox.defaults.rules,{

			chinese:{

				//validator表示用户在文本框中输入的内容

				validator:function(value){

					var reg=/^[\u4e00-\u9fa5]/;

					if(reg.test(value)){

						return true;

					}

				},

				//如果不符合中文规则，

				message:'姓名必须是中文'

			}

		});

		$("#emailID").validatebox({

			required:true,

			validType: ['length[1,30]','email']

		});

		$("#pwdID").validatebox({

			required:true,

			validType: ['length[6,6]','pwdnum']

		});

			//自定义规则，验证是否为密码

		$.extend($.fn.validatebox.defaults.rules,{

			pwdnum:{

				//validator表示用户在文本框中输入的内容

				validator:function(value){

					var reg=/^[0-9]/;

					if(reg.test(value)){

						return true;

					}

				},

				//如果不符合中文规则，

				message:'密码必须为数字'

			}

		});

	</script>

对于表单验证，我们可以对其进行自定义规则。这个时候如果加上正则验证，就完全可以写出一个非常好的验证功能的了。在上面的这个属性中，还可以对提示框的位置进行改变，可以使用的属性是left和right。下面图片中显示的就是一个提示框在left的情况，一般情况下使用默认的right就可以了。

6.2 ComboBox（下拉列表框）

扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。

下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

静态方法创建：

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">

		    <option value="aa">aitem1</option>

		    <option>bitem2</option>

		    <option>bitem3</option>

		    <option>ditem4</option>

		    <option>eitem5</option>

		</select>

动态方法创建：

<input  id="cityID"  name="city"  value="1"/>

		<script>

			$("#cityID").combobox({

				url:"json/city.json",

				valueField:"id",

				textField:"name"

			});

			$(function(){

				$("#cityID").comcobox("setValue","长沙");

			});

		</script>

6.3 DateBox（日期输入框）

扩展自$.fn.combo.defaults。使用$.fn.datebox.defaults重写默认值对象。

日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

日期：

	<input id="dd" type="text"></input>  

		<script>

		$('#dd').datebox({

		    required:true

		});

		$("#dd").datebox({

			onSelect:function(mydate){

				var year=mydate.getFullYear();

				var month=mydate.getMonth()+1;

				var date=mydate.getDate();

				alert(year+"年"+month+"月"+date+"日");

			}

		});

		</script>

6.4 Slider（滑动条）

使用$.fn.slider.defaults重写默认值对象。

滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。

学生成绩:<span id="tip" ></span>

	<hr />

	<div  id="ss"  style="height:400px;width:400px">

	</div>

	<script>

		$("#ss").slider({

			mode:"h",

			min:0,

			max:100,

			rule:[0,'|',25,'|',50,'|',75,'|',100],

			showTip:true,

			value:60

		});

		$("#ss").slider({

			onChange:function(newValue){

				if(newValue==60){

					$("#tip").text("合格").css("color","yellow");

				}else if(newValue==70){

					$("#tip").text("中等").css("color","pink");

				}else if(newValue==80){

					$("#tip").text("良好").css("color","blue");

				}else if(newValue==90){

					$("#tip").text("优秀").css("color","green");

				}

			}

		})

	</script>

6.5 NumberSpinner（数字微调）

数字微调控件的创建是基于微调控件和数值输入框控件的。他可以转换输入的值，比如：数值、百分比、货币等。它也允许使用上/下微调按钮调整到用户的期望值。

	商品数量：

	<input id="ss" style="width:100px">  <br />  

 	你一共买了<span id="num">1</span>件商品

		<script>

		$('#ss').numberspinner({

		  value:1,

		    min:1,

		    max:100

		});  

		$('#ss').numberspinner({

			onSpinUp:function(){

				var value=$("#ss").numberspinner("getValue");

				//将当前值设置到span标签

				$("#num").text(value).css("color","red");

			},

			onSpinDown:function(){

				var value=$("#ss").numberspinner("getValue");

				//将当前值设置到span标签

				$("#num").text(value).css("color","red");

			}

		});    	

			//添加键盘事件

			$('#ss').keyup(function(event){

				//获取按键的unicode编码

				var myevent=event;

				var code=myevent.keyCode;

				if(code==13){

					var value=$(this).val();

					//将当前值设置到span标签

					$("#num").text(value).css("color","red");

				}

			});

		</script>

七、窗口组件的使用

7.1 Window（窗口）

扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

静态方法创建：

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"

        data-options="iconCls:'icon-save',modal:true">

    Window Content

	</div>

动态创建：

<input type="button"  value="打开窗口1"  id="open1"/>

	<input type="button"  value="打开窗口2"  id="open2"/>

	<div id="win1"></div>

	<div id="win2"></div>  

 <script>

 	$("#open1").click(function(){

 		 $('#win1').window({

		    width:600,

		    height:400,

		    modal:false ,

		    minimizable  :false,

		    maximizable:false,

		    title:"我的窗口"

		});

 	});

 	$("#open2").click(function(){

 		 $('#win2').window({

		    width:600,

		    height:400,

		    modal:false ,

		    minimizable  :false,

		    maximizable:false,

		    title:"我的窗口"

		});

 	});

 </script>

7.2 Dialog（对话框窗口）

该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

<input type="button"  value="打开对话框"  id="open1"/>

	<div id="win1"></div>  

 <script>

 $("#open1").click(function(){

 		 $('#win1').dialog({

		    width:400,

		    height:400,

		    modal:false ,

		    minimizable  :false,

		    maximizable:false,

		    title:"我的对话框",

		    toolbar:[

		    	{

				text:'编辑',

				iconCls:'icon-edit',

				handler:function(){alert('edit')}

			},{

				text:'帮助',

				iconCls:'icon-help',

				handler:function(){alert('help')}

			}

		    ],

		    buttons:[

		    {

				text:'保存',

				handler:function(){alert("保存");}

			},{

				text:'关闭',

				handler:function(){

					//关闭对话框

					$("#win1").dialog("close");

				}

			}

		    ],

		    href:"/EasyUi/form.html"

		});

 	});

 </script>

7.3 Messager（消息窗口）

消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

<input type="button"  value="确认框"  /><br />

	<input type="button"  value="警告框"  /><br />

	<input type="button"  value="输入框"  /><br />

	<input type="button"  value="显示框"  /><br />

	<script>

		$("input").click(function(){

			//定位button按钮，提供单击事件

			var tip=$(this).val();

			tip=$.trim(tip);

			if("警告框"==tip){

				$.messager.alert("警告框","警告处分","waring",function(){

					//alert("关闭");

				});

			}

			if("确认框"==tip){

			$.messager.confirm("确认框","你确认要删除么",function(value){

				alert(value);

			});

			}

			if("输入框"==tip){

			$.messager.prompt("输入框","请输入你的姓名",function(name){

				alert(name);

			});

			}

			if("显示框"==tip){

			$.messager.show({

				showType: "slide",

				showSpeed: 600,

				width:300,

				height:300,

				title:"显示框",

				timeout:5000,

				msg:'消息将在5秒后关闭。'

			}

			);

			}

		});

	</script>

八、表格和树组件的使用

使用$.fn.tree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

<ul id="treeID" class="easyui-tree">

	   <li>

			<span>第一章</span>

			<ul>

				<li>

					<span>第一节</span>

					<ul>

						<li>

							<span>第一条</span>

						</li>

						<li>

							<span>第二条</span>

						</li>

					</ul>

				</li>

				<li>

					<span>第二节</span>

				</li>

			</ul>

	   </li>

	   <li>

	   		<span>第二章</span>

	   </li>

	</ul>  

	<script type="text/javascript">

		$(function(){

			//收起所有的选项

			$("#treeID").tree("collapseAll");

		});

	</script>

我们还可以引入外部文件，使用json格式的文件来添加到这个tree中。

<ul id="treeID"></ul>

	<script type="text/javascript">

		$("#treeID").tree({

			url : "/EasyUi/json/pro.json"

		});

	</script>

json格式为：

[

  {

    "id":1,

    "text":"广东",

    "state":"closed",

    "children":[

	{

	   "id":11,

	   "text":"广州"	,

           "state":"closed",

           "children":[

	      {

		 "id":111,

    	         "text":"天河"

	      },

	      {

		 "id":112,

    	         "text":"越秀"

	      }

	   ]

	},

	{

	   "id":12,

	   "text":"深圳"

	}

    ]

  },

  {

    "id":2,

    "text":"湖南"

  }

]

总结：任何一门技术的学习，还是要有学会查阅文档的基本能力，要学会举一反三，我前面分享的内容也都是非常简单的一些例子，有的是从官方文档中进行改装，加入了我的一些东西，虽然说着些东西都是非常简单的内容，但是我们还是需要提高警惕，知识面还是要到位的。我深深的知道，比我牛的人很多，比我菜的人也很多，在这个行业中，唯有保持不断学习的态度，不断的吸收知识，才能让自己成长，不要总是去鄙视别人，有些看上去简单的东西实际操作起来还是有一些困难的，人无完人，希望和大家一起成长，共同进步！

源码地址：https://github.com/sdksdk0/EasyUI

EasyUI常用组件（基础）的更多相关文章

（二）EasyUI 使用——常用组件
1. EasyUI常用组件的基本用法 1.1 layout布局  <div data-options="fit:true&quo ...
JQuery EasyUI的常用组件
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...
java基础常用组件
几个常用组件: 在图形用户界面编程中,我们常常会提供用户登陆界面,比如登陆到会员管理系统,登陆到工资管理系统,仓库管理系统等,如下图我们就会用到: 1. 文本框(JTextField) 2. 密码框( ...
[转]easyui常用控件及样式API中文收藏
[转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读评论(0) 收藏举报分类: java ee(5) 目录(?)[+] CSS类定义: div easyu ...
Easyui部分组件讲解
Easyui部分组件讲解目录 1.... Accordion(可折叠标签)... 2 1.1 实例... 2 1.2 参数... 3 2.... DateBo ...
对easyui datagrid组件的一个小改进
#对easyui datagrid组件的一个小改进 ##问题在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...
Web移动端的常用组件库
normalize http://necolas.github.io/normalize.css/ 最受欢迎的css reset 保留有用的默认值,这个区别于其他的CSS resets 标准化大范围的 ...
Ext常用开发基础知识
Ext常用开发基础知识组件定义 //这种方法可以缓存所需要的组件调用起来比较方便(方法一 ) Ext.define('MySecurity.view.home.HomePanel', { //添加 ...
Linux最常用的基础命令
Linux最常用的基础命令个人总结计算机基础知识: 32bit和64bit系统的区别.系统运行机制 32bit=内存的最大寻址空间是2**32,也就是说最大只能使用4GB的内存64bit=内存的最大 ...

随机推荐

C#之不安全代码
MSDN:"尽管实际上对 C 或 C++ 中的每种指针类型构造,C# 都设置了与之对应的引用类型,但仍然会有一些场合需要访问指针类型.例如,当需要与基础操作系统进行交互.访问内存映射设备,或 ...
[LeetCode] Maximum Sum of 3 Non-Overlapping Subarrays 三个非重叠子数组的最大和
In a given array nums of positive integers, find three non-overlapping subarrays with maximum sum. E ...
[LeetCode] Degree of an Array 数组的度
Given a non-empty array of non-negative integers nums, the degree of this array is defined as the ma ...
直接插入排序算法:ArrayList实现和数组实现
直接插入排序算法思想: 排序区间R[1..n]: 在排序的过程中,整个排序区间被分为两个子区间: 有序区R[ 1 ... i-1 ]和无序区R[ i ... n ]: 共进行n-1趟排序,每趟排序都是 ...
详解vue移动端下拉刷新
看完这篇文章,相信大伙也一样可以,做出一个自己的刷新,加载的组件说这个功能之前,大家要先了解一下,要怎么触发滚动条事件. 一定要注意,所有滚动事件都必须要满足这个条件,横向滚动条也一样, 只要满足子 ...
[NOIp 2009]靶形数独
Description 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教,Z 博士拿出了他 ...
[Noi2016]区间
题目描述在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x,使得对于每一 ...
●洛谷P2606 [ZJOI2010]排列计数
题链: https://www.luogu.org/problemnew/show/P2606题解: 组合数(DP),Lucas定理首先应该容易看出,这个排列其实是一个小顶堆. 然后我们可以考虑dp ...
[bzoj4405][wc2016]挑战NPC
来自FallDream的博客,未经允许,请勿转载,谢谢. 小N最近在研究NP完全问题,小O看小N研究得热火朝天,便给他出了一道这样的题目: 有n个球,用整数1到n编号.还有m个筐子,用整数1到m编号. ...
Hash算法入门指南(聊点不一样的算法人生)
前言很多人到现在为止都总是问我算法该怎么学啊,数据结构好难啊怎么的,学习难度被莫名的夸大了,其实不然.对于一个学计算机相关专业的人都知道,数据结构是大学的一门必修课,数据结构与算法是基础,却常常容易 ...

EasyUI常用组件（基础）