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

dialog的使用

为了方便以后的使用记录一下easyui的使用:
功能:点击链接,弹出一个dialog的框
建议:将其中的页面和js分离开,尽量通过js控制页面中的展示的信息和样式等,降低页面的简洁性;
<a href="#" class="easyui-linkbutton"  οnclick="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>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值