EasyUI的面板和Ajax的结合使用

标签：easyui   ajax   

学习这一点的时候，让我感到很惊讶，因为我在丝毫没有看到ajax影子的情况下的的确确的使用着ajax，这必然是极好的。

面板的属性，方法和行为相对比较多，在这里就不做太多的累赘，这里只说一下关于一些关于被面板封装的Ajax操作。

$(function(){
	$("#box").panel({
		title: '搜面板',
		width: 500,
		height: 500,
		iconCls: 'icon-search',
		left: 300,
		top: 150,
		cla: 'a',
		headerCls: 'b',
		bodyCls: 'c',
		// fit: true,
		// border: false,
		// noheader: true,
		collapsible: true,//可折叠按钮
		minimizable: true,//最小化按钮
		maximizable: true,//最大化按钮
		closable: true,//关闭按钮
		tools: [{	//自定义方式
			iconCls: 'icon-help',
			handler: function (){
				alert("help");
			},
		},{
		}],
		tools: [{	//自定义方式
			iconCls: 'icon-reload',
			handler: function (){
				$("#box").panel('refresh');
			},
		},{
		}],
		// collapsed: true,
		href: 'content.php',
		loadingMessage: '加载中，请稍等。。。',
		extractor: function(data){
			return data.substring(0,7);
		},
		// onBeforeLoad: function(){
		// 	alert("远程加载之前触发！");
		// },
		// onLoad: function(){
		// 	alert("远程加载之后触发！");
		// },
		// onBeforeOpen: function(){
		// 	alert("打开之前触发！");
		// },
		// onOpen: function(){ 
		// 	alert("打开之后触发！");
		// },
		// onBeforeClose: function(){
		// 	alert("关闭之前触发！");
		// },
		// onClose: function(){ 
		// 	alert("关闭之后触发！");
		// },
		// onBeforeDestroy: function(){
		// 	alert("销毁之前触发！");
		// },
		// onDestroy: function(){ 
		// 	alert("销毁之后触发！");
		// },
		// onBeforeCollapse: function(){
		// 	alert("折叠之前触发！");
		// },
		// onCollapse: function(){ 
		// 	alert("折叠之后触发！");
		// },
		


	});

	 $("#box").panel('panel').css('position','absolute');
	 // $("#box").panel('destroy');
});

EasyUI的面板和Ajax的结合使用

标签：easyui   ajax   

原文地址：http://blog.csdn.net/mycodedream/article/details/45010615