添加按钮
点击添加出现一个对话框,对话框上是一个表单。
添加对话窗体
在页面的表格下添加一个面书写一个div,其中是一个对话框。为了完成自己需要的一些效果,可以为该对话框添加有一些相关属性,如果在本控件中不能找到,可以去其父进程找。为了在打开页面时不显示该对话框、不包含关闭按钮、包含折叠按钮、弹出后背后不能编辑。需要配置以下几个属性,这些属性都是window中的。
closable boolean 定义是否显示关闭按钮。
collapsible boolean 定义是否显示折叠按钮。
closed boolean 定义是否在初始化组件时关闭(隐藏)窗口
modal boolean 定义窗口是否带有遮罩效果。
属性也可以自己配,不写在自己定义的装多个属性的data-options里。
<div id="addDialog" class="easyui-dialog"
style="width: 600px; height: 600px" title="添加用户信息"
data-options="closable:false,collapsible:true,modal:true,closed:true">
</div>
当点击添加按钮时弹出该对话框,为添加按钮设置一个点击事件,点击将对话框的closed属性值改为false。
为对话框中添加几个自己定义的按钮,主要是配置对话框的buttons属性,属性配置方法如下:
buttons array,selector 对话窗口底部的按钮,每个按钮的属性都跟链接按钮一样。
1) an array, each button options is same as linkbutton.
2) a selector that indicating the button bar.
按钮可以定义在一个<div>的标签内:
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',buttons:'#bb',modal:true">
Dialog Content.
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton">Save</a>
<a href="#" class="easyui-linkbutton">Close</a>
</div>
该对话框按钮也可以通过数组定义:
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',modal:true,
buttons:[{
text:'Save',
handler:function(){...}
},{
text:'Close',
handler:function(){...}
}]">
Dialog Content.
</div>
网页中给添加按钮添加的内容。
$("#addBut").click(function() {
$("#addDialog").dialog({
closed : false,
buttons : [ {
text : '保存',
iconCls : 'icon-save',
handler : function() {
}
}, {
text : '重置',
iconCls : 'icon-redo',
handler : function() {
}
}, {
text : '关闭',
iconCls : 'icon-cancel',
handler : function() {
}
} ]
})
})
表单控件
在对话框的div中添加表单,表单中包含一个表格,该表格用来书写里面的布局(4行4列),除了性别用的是可装载组合框 ,其它属相都是一个表单验证控件。根据表单的大小调整对话框的大小。
<form action="" id="form1" method="post">
<table>
<tr>
<td>用户编号</td>
<td>