easyUI使用dailog实现弹出框带表单功能

时间:2021-01-11 07:20:29

本文为博主原创,未经允许不得转载:

示例如下:

需要注意的地方在id为win的div中需要有:closed="true"这个属性,这个属性为控制dailogn对话框显示与隐藏的属性。

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="datagrid-detailview.js"></script>
</head>
<body> <a id="name_add_but" href="#" data-options="iconCls:'icon-add'" class="my_but"
style="vertical-align: middle;">新增</a> <div id="win" class="easyui-dialog" title="提示" style="width: 400px; padding: 10px 20px; height: 410px;"
closed="true" buttons="#dlg-buttons">
<form id="fm" name="frm" method="post" style="margin-top: 20px; margin-left: 20px;">
<div class="fitem">
<label>文件名称:</label>
<textarea id="input1" name="fileName" data-options="multiline:true" style="width: 260px;height:90px;"></textarea>
</div>
<div id="dlg-buttons" style="display: block">
<a id="confirm" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="submitForm()" style="width: 90px">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#win').dialog('close')" style="width: 90px">取消</a>
</div>
</form>
</div>
<script>
$('#name_add_but').linkbutton({
onClick: function () {
addFile();
}
});
$('#input1').textbox({
prompt: "请输入文件名称,多个文件请换行输入",
});
function addFile(){
$('#win').dialog({
title: '新增',
width: 450,
height: 240,
top:150,
closed: false,//显示对话框
cache: false,
modal: true
});
}
function submitForm(){
$('#win').dialog({
closed: true, // 隱藏列表
});
alert("添加成功");
}
</script>
</body>

实现效果:

easyUI使用dailog实现弹出框带表单功能

点击提交按钮出现:

easyUI使用dailog实现弹出框带表单功能