easyui的学习笔记--------dialog的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_15061629/article/details/61413615

dialog的使用

为了方便以后的使用记录一下easyui的使用：

功能：点击链接，弹出一个dialog的框

建议：将其中的页面和js分离开，尽量通过js控制页面中的展示的信息和样式等，降低页面的简洁性；

<a href="#" class="easyui-linkbutton"  onclick="openDiaLog()">弹出</a>
		<div id="dia">
			<table id="dg"></table>
		</div>
		<script type="text/javascript">
			var dg;
			function openDiaLog()
			{
				dg = $('#dg').datagrid({
					method:'post',
					url:'',
					fit:true,//将其中的
					fitColumns:true,
					borad:false,
					striped:true,
					pagination:true,
					rownumbers:true,
					pageNumber:1,
					remoteSort:true,
					pageSize:10,
					pageList:[10,20,30,50],
					singleSelect:true,
					idField:'id',
					onLoadSuccess:function(data){//返回成功的数据，后台
						console.log(data);
					},
					columns:[[
						{field:'itemid',title:'Item ID',width:80,hidden:true},
						{field:'itemid',title:'Item ID',width:80,sortable:true},
						{field:'productid',title:'Product ID',width:80,sortable:true},
					    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
						{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
						{field:'attr1',title:'Attribute',width:100,sortable:true},
						{field:'status',title:'Status',width:60,sortable:true}
					    ]],
					/*enableHeaderClickMenu : true,//此属性开启表头列名称右侧那个箭头形状的鼠标左键点击菜单
				    enableHeaderContextMenu : true,//此属性开启表头列名称右键点击菜单
				    enableRowContextMenu : false,*/
				    onClickRow:function(){    //单击进行操作的方法
				      var row = $('#dg').datagrid('getSelected');//获取选中行的数据
				      if (!row){
				         return;//为防止意外情况可以选择加上此判断
				      }
				    },
				    onDblClickRow:function(){
				    	var row = $('#dg').datagrid('getSelected');
				    	$.messager.alert("提示",row,"info");
				    }
					});
				$('#dia').dialog({
			        title: '弹出窗口',
			        width: 800,
			        height: 400,
			        closed: false,
			        cache: false,
			        href: '',
			        modal: true,
			        toolbar:[{
			        	text:'help',
			        	iconCls:'icon-help',
			        	handler:function(){
			        		$.messager.alert("提示","help","info");
			        	}
			        },{
			        	text:'save',
			        	iconCls:'icon-save',
			        	handler:function(){
			        		$.messager.alert("提示","保存按钮","info");
			        	}
			        }],
			        buttons:[{ //为窗口添加按钮
						text:'Save',
						handler:function(){
							$.messager.alert("提示","save保存","info");
						}
					},{
						text:'Close',
						handler:function(){$.messager.alert("提示","save关闭","info");}
					}]
					});
			}
		</script>