【开发】Dialog 对话框

提示：Dialog 继承自 Panel，有大量的方法在 Panel 中已被定义，可以复用。

Dialog API：http://www.jeasyui.net/plugins/181.html

PanelAPI：http://www.jeasyui.net/plugins/159.html

通常弹窗都会使用对话框，以此作为承载。

<div id="preAssignArea" class="easyui-dialog" title="分配任务" closed="true" style="width: 660px; height: 252px;"

data-options="iconCls:'icon-save',resizable:false,modal:true, buttons:'#preAssignAreaToolbar' ">

<!-- 表单放置区 -->

</div>

<div id="preAssignAreaToolbar">

<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok' ">确定</a>

<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel' "

onclick="javascript:$('#preAssignArea').dialog('close')">关闭</a></div>

表单每多一行，dialog的高度需要增加 27px。

以上示例的表单 HTML 呈现如下：

<form id="preAssignForm" method="post" novalidate="novalidate">

<table style="width: 100%">

<tr>

<td>

<table id="tblAdd1" class="view">

<tr>

<th>

<label for="BytesNum">字节数：</label>

</th>

<td colspan="3">

<input class="easyui-textbox" type="text" id="txtBytesNum" name="BytesNum" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

</tr>

<tr>

<th>

<label for="BeginPageNum">起始页码：</label>

</th>

<td>

<input class="easyui-textbox" type="text" id="txtBeginPageNum" name="BeginPageNum" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

<th>

<label for="EndPageNum">结束页码：</label>

</th>

<td>

<input class="easyui-textbox" type="text" id="txtEndPageNum" name="EndPageNum" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

</tr>

<tr>

<th>

<label for="BeginDate">开始时间：</label>

</th>

<td>

<input class="easyui-textbox" type="text" id="txtBeginDate" name="BeginDate" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

<th>

<label for="EndDate">结束时间：</label>

</th>

<td>

<input class="easyui-textbox" type="text" id="txtEndDate" name="EndDate" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

</tr>

<tr>

<th>

<label for="Notes">备注：</label>

</th>

<td colspan="3">

<input class="easyui-textbox" data-options="multiline:true"

style="width:452px; height:60px" id="txtNotes" name="Notes" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

</tr>

</table>

</td>

</tr>

</table>

</form>

常用属性设置：

$preAssignArea.dialog('setTitle', '分配任务'); //设置标题

$preAssignArea.dialog('open'); //打开

// 窗体关闭时所要做的事

$preAssignArea.dialog({

onClose: function () {

console.info("对话框关闭了");

}

});

$preAssignDialog.dialog('close'); //关闭

或者采用链式操作：

$maintainDialog

.dialog({

iconCls: 'icon-add',

title: '新增',

maintainState: MaintainStateEnum.Add

})

.dialog('open');

或者：

$maintainForm.form('load', result.Data);

$maintainDialog

.dialog({

iconCls: 'icon-edit',

title: '修改',

maintainState: MaintainStateEnum.Update

})

.dialog('open');