Easyui dialog
Posted NarcisoForHer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Easyui dialog相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="styleSheet" type="text/css" href="js/easyUI/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="js/easyUI/icon.css"> <link rel="stylesheet" type="text/css" href="js/easyUI/demo.css"> <script type="text/javascript" src="js/easyUI/jquery.min.js"></script> <script type="text/javascript" src="js/easyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/easyUI/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="js/test.js"></script> </head> <body> <h2>Basic Dialog</h2> <p>Click below button to open or close dialog.</p> <div style="margin:20px 0;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#dlg‘).dialog(‘open‘)">Open</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#dlg‘).dialog(‘close‘)">Close</a> </div> <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:‘icon-save‘" style="width:400px;height:200px;padding:10px"> <table> <tr> <td><span>修改内容：</span></td> <td><input class="easyui-textbox" id="content" style="height:25px"/></td> </tr> </table> </div> <table id="tab" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,collapsible:true,url:‘datagrid_data1.json‘,method:‘get‘"> <thead> <tr> <th data-options="field:‘id‘,width:80">Item ID</th> <th data-options="field:‘productid‘,width:100">Product</th> <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th> <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th> <th data-options="field:‘attr1‘,width:250">Attribute</th> <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>1234</td> <td>1234</td> <td>1234</td> <td>1234</td> <td>1234</td> <td>1234</td> </tr> </tbody> </table> </body> </html>
$(document).ready(function() {
$(‘#dlg‘).dialog({
left:"450px",
top:"200px",
title: ‘修改信息‘,
inline:false,
closed:true,
width: 300,
height: 250,
cache: false,
buttons:"#footer",
shadow:false,
modal: true,
buttons: [{
text: ‘保存‘,
iconCls: ‘icon-save‘,
handler: function () {
var row = $("#tab").datagrid("getSelected");
var id = row.id;
var content = $("#content").val();
$.ajax({
type:"post",
url: "Handler.ashx?id="+id+"&content=" + content,
success: function (data) {
if (data == "ok") {
$.messager.alert("系统提示", "数据修改成功！");
$(‘#dlg‘).dialog(‘close‘);
} else {
$.messager.alert("系统提示", "数据修改失败！");
return false;
}
}
})
}
}, {
text: ‘关闭‘,
iconCls: ‘icon-cut‘,
handler: function () {
$(‘#dlg‘).dialog(‘close‘);
$("#content").val(‘‘);
}
}]
});
});
以上是关于Easyui dialog的主要内容，如果未能解决你的问题，请参考以下文章
easyui内的弹窗dialog不会随滚动条拖动而居中 这个怎么解决