【EasyUI】EasyUI右下角窗口+datagrid

EasyUI右下角窗口+datagrid

1. 定义窗口位置（其他位置可自定义）
2. 窗口内容content
3. modal模式
4. onOpen事件
5. 渲染datagrid
6. 类似的也可以调整为其他展示信息。

$(function(){
	showWin();
	function showWin(){
		//定义窗口高宽
		var windowWidth=400;
		var windowHeight=300;
		var win = $("<div id='showWin'></div>").window({
			title : "右下角窗口",
			width : windowWidth,
			height : windowHeight,
			left:document.documentElement.clientWidth-windowWidth,	//窗口距离左
			top:document.documentElement.clientHeight-windowHeight,	//窗口距离上
			content:"<table id='datagrid'></table>",				//datagrid的table标签
			modal:false,											//模式化窗口；可查看window其他属性，比如改变大小、可拖拽等
		    onOpen:function(){										//打开面板后触发响应；可查看panel其他事件
		    	showDataGrid();										//打开后渲染内部的table标签
		    },
			onClose : function() {
				win.window('destroy');
			}
		});
	}
	
	//渲染窗口datagrid
	function showDataGrid(){
		$("#datagrid").datagrid({
			url : URL.datagrid,
			onDblClickRow : function(index,row) {
			},
			rownumbers:true,										//显示首列的序号，
			columns : [[ 
			   {field : "a", title : "a", align : "left",   halign : "center", width : 100},
			   {field : "b", title : "b", align : "center", halign : "center", width : 100}
		    ]]
		});
	}
});