【开发】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');