JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法


Posted in Javascript onJune 23, 2014

网上答案说是因为Easy-ui在低版本时应将class样式删去,而在javascript里写url,因为class里有url的话javascript里也存在url,就会使页面刷新俩次,但是测试后没有解决我的问题,后来通过反复测试终于找到问题,

<ul id="eva" style=" font-size:25px; ">
</ul>

因为在页面写了style,将style里的样式删去就可以解决问题了,现附上完整的ajax动态树和Grid表格代码。

<html>
<head>
 <title>Tree</title>
 <link href="../../Content/JQEasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
 <link href="../../Content/JQEasyUI/themes/icon.css" rel="stylesheet" />
 <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
 <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
 <script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
 <script src="../../Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
 <script type="text/javascript">
  var NodeText;
  var time;
  var treeeva;
  $(function () {
   initTable();
   $("#SelectForm").css("display", "none");
   bindSearcheClick();
    $('#eva').tree({
     url: '/OEE/GetTree',
     method: 'get',
     animate: true,
     checkbox: true
    });
  });
  //初始化表格
  function initTable() {

   $('#tt').datagrid({
    url: '/OEE/Details',
    title: 'OEE',
    width: 700,
    height: 360,
    fitColumns: true,
    idField: 'Fid',
    loadMsg: '正在加载设备的信息...',
    pagination: true,
    singleSelect: false,
    pageSize: 10,
    pageNumber: 1,
    pageList: [10, 20, 30],
    queryParams: {//要传入的参数
     NodeResult: NodeText,
     SelectTime: $('#SelectTime').datebox('getValue')
    },
    columns: [[//{EID, ETypeName, ThenTypeInfoTID, EtypeNum}
      {field: 'Num', title: '设备编号', width: 80, align: "center" },
      { field: 'Name', title: '设备名称', width: 80, align: "center" },
      { field: 'EarlyTimeOEE', title: '早班OEE', width: 80, align: "center" },
      { field: 'MiddleTimeOEE', title: '午班OEE', width: 80, align: "center" },
      { field: 'LaterTimeOEE', title: '晚班OEE', width: 80, align: "center" },
       {
        field: 'DelFlag', title: '操作', width: 80, align: 'center',
        formatter: function (value, row, index) {
         var str = "<a Fid='" + row.Fid + "' class='SelectInfo' href='javascript:void(0)'>明细</a>  ";
         return str;
        }
       }
    ]],
    onHeaderContextMenu: function (e, field) {

    },
    onLoadSuccess: function (data) {
     $(".SelectInfo").unbind("click");
     $(".SelectInfo").bind("click", function () {

      doSelect($(this).attr("Fid"), time);
      return false;
     });
    }
   });
  }
  function doSelect(Fid, Time) {
   var reg = new RegExp("-", "g");
   var strobj = Fid.toString();
   var newstr = strobj.replace(reg, "$");
   $('#SelectFrame').attr('src', '/OEE/GetSelectInfo/' + Fid + '/' + Time);
   $('#SelectForm').css('display', 'block');
   $('#SelectForm').dialog({
    width: 470,
    height: 470,
    modal: true,
    title: "显示明细信息",
    collapsible: true,
    minimizable: true,
    maximizable: true,
    resizable: true,
    buttons: [{
     id: 'btnSelect',
     text: '确定',
     iconCls: 'icon-add',
     handler: function () {
      $("#SelectForm").dialog("close");
     }
    }]
   });
  }

  //绑定搜索查询的 点击事件
  function bindSearcheClick() {
   //linkButtonSearch
   $("#linkButtonSearch").click(function () {
    var nodes = $('#eva').tree('getChecked');
    var s = '';
    for (var i = 0; i < nodes.length; i++) {
     if (s != '') s += ',';
     s += nodes[i].id;
    }
    NodeText = s;
    time = $('#SelectTime').datebox('getValue');

    initTable();
   });
  }
 </script>
</head>
<body>

 <div style="width: 1000px">
  <div style="width: 200px; float: left">
   <div style="margin: 23px 0;">
   </div>
   <div class="easyui-panel" style="padding: 5px; border-radius: 5px;">
    <ul id="eva" >
    </ul>
   </div>
  </div>
  <div id="Right">
   <div id="query">
    查询时间:<input class="easyui-datebox" name="SelectTime" id="SelectTime" />
    <a id="linkButtonSearch" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">
     查询</a>
   </div>
   <table id="tt" style="width: 700px;" title="标题" iconcls="icon-edit">
   </table>
   <div id="SelectForm">
    <iframe id="SelectFrame" src="javascript:void(0)" frameborder="0" width="100%" height="100%">
    </iframe>
   </div>
  </div>
 </div>
</body>
</html>
Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
js读取配置文件自写
Feb 11 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 #Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 #Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 #Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 #Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 #Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 #Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 #Javascript
You might like
php5 mysql分页实例代码
2008/04/10 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
jQuery的框架介绍
2016/05/11 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python中的代码编码格式转换问题
2015/06/10 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
生产部厂长助理职位说明书
2014/03/03 职场文书
建筑工地质量标语
2014/06/12 职场文书
售后客服个人自我评价
2014/09/14 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
Python加密技术之RSA加密解密的实现
2022/04/08 Python