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

来源：互联网发布：淘宝面膜代理编辑：程序博客网时间：2024/04/30 16:33

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>

0 0