EasyUI版本:V1.4
JQuery版本:V1.11.1
一、对话框
定义对话框:
<div id="test_dialog" class="easyui-dialog" closed="true" buttons="#test_dialog_buttons"></div>
<div id="test_dialog_buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" οnclick="javascript:$('#test_dialog').dialog('close')" style="width: 90px;">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#test_dialog').dialog('close')" style="width: 90px;">Cancel</a>
</div>
打开对话框:
function openTestDialog() {
$("#test_dialog").dialog({
title: "Test Dialog",
width: 300,
height: 200,
modal: true
});
$("#test_dialog").dialog("open");
}
显示效果:
很明显,使用这种方式打开对话框是不正确的,应该修改为使用另外一种方式打开。
首先,修改对话框定义:增加对话框width,height,modal属性定义。
<div id="test_dialog" class="easyui-dialog" <span style="color:#FF0000;">style="width: 300px;height: 200px;" data-options="modal:true"</span> closed="true" buttons="#test_dialog_buttons"></div>
其次,修改打开对话框的方式:
function openTestDialog() {
$("#test_dialog").dialog("open").dialog("setTitle", "Test Dialog");
}
修改后的显示效果:
二、表格
定义表格:
<table id="test_table" class="easyui-datagrid" url="/agency.do?action=list" toolbar="#test_table_toolbar" pagination="true" fitColumns="true">
<thead>
<tr>
<th data-options="field:'no',width:50">Test1</th>
<th data-options="field:'name',width:50">Test2</th>
<th data-options="field:'phone',width:50">Test3</th>
<th data-options="field:'address',width:50">Test4</th>
<th data-options="field:'sale_number',width:50">Test5</th>
<th data-options="field:'stock_number',width:50">Test6</th>
<th data-options="field:'operation',width:50">Test7</th>
</tr>
</thead>
</table>
<div id="test_table_toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="openTestDialog()">测试</a>
</div>
显示效果:
为了使表格列按比例填充满表格,应该修改表格列定义:分别明确指定field和width属性。
<table id="test_table" class="easyui-datagrid" url="/agency.do?action=list" toolbar="#test_table_toolbar" pagination="true" fitColumns="true">
<thead>
<tr>
<th <span style="color:#FF0000;">field="no" width="50"</span>>Test1</th>
<th field="name" width="50">Test2</th>
<th field="phone" width="50">Test3</th>
<th field="address" width="50">Test4</th>
<th field="sale_number" width="50">Test5</th>
<th field="stock_number" width="50">Test6</th>
<th field="operation" width="50">Test7</th>
</tr>
</thead>
</table>
<div id="test_table_toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="openTestDialog()">测试</a>
</div>
修改表格列定义之后的显示效果:
三、菜单
关于菜单组件的显示,必须明确定义宽度和高度,否则在IE下显示不正常。
ep:
<div id="mm" class="easyui-menu" style="width: 120px;">
<div style="<span style="color:#FF0000;">width: 120px;height: 25px;</span>">New</div>
<div style="width: 120px;height: 25px;">
<span>Open</span>
<div style="width: 150px;height: 80px;">
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div style="width: 120px;height: 25px;" data-options="iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div style="width: 120px;height: 25px;">Exit</div>
</div>
四、关于IE下兼容性问题处理的思考
在使用某个前端UI框架时,必须要考虑到对IE浏览器的兼容性,否则用户体验会大打折扣。
另外,在写自定义JavaScript代码时,也必须要尽量避免使用一些在IE上不能执行的API,且必须注意代码格式的规范性,有可能多一个符号在FireFox和Chrome下执行没有问题,但是在IE下执行时就会报错。
参考:
1. 解决EasyUI在IE下渲染慢的问题:http://www.cnblogs.com/kkwoo/p/3994694.html
2. EasyUI tab组件扩展鼠标双击事件的处理:http://www.easyui.info/archives/869.html