easyui的学习笔记--------dialog的使用
2017-03-11 09:59
260 查看
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>
相关文章推荐
- UI学习笔记---EasyUI panel插件使用---03
- Silverlight学习笔记五( 在Silverlight 2.0/3.0/4.0 中使用OpenFileDialog浏览本地图片)
- EasyUI学习笔记(二)——学习使用EasyUI之Dialog
- EasyUI 学习使用笔记
- Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用
- Qt 学习笔记--------------------使用纯代码写dialog 与 UI文件
- C#学习笔记(二十一):使用文件基础
- C# 学习笔记 -- 第二天 使用注释提高代码可读性
- PHP学习笔记(3)----phpmyadmin的安装与使用[原创]
- JbuilderX使用Junit学习笔记
- C#学习笔记(十六):使用打开保存文件对话框
- .Net学习笔记 - Web页中使用WinForm
- 学习笔记,VB.NET使用DirectSound9 (1) 简单播放
- 学习笔记之引用的使用
- Chap 4 学习笔记-使用C#存储变量数据
- C#中使用委托的学习笔记
- C# 学习笔记 -- 第三天 申明和使用数据
- Servlet学习笔记(四)-----使用Servlet处理用户注册和登陆
- [2004-8-4]VB.Net学习笔记,使用ADO.Net对象访问数据库,将结果写入ListView
- 学习笔记,VB.NET使用DirectSound9 (1) 简单播放