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>
转载请注明原文地址: https://ju.6miu.com/read-26492.html
