关于EasyUI对话框，表格和菜单组件在IE下的兼容性处理方法

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