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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
js实现自定义路由
Feb 04 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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
10 个经典PHP函数
2013/10/17 PHP
php数组键名技巧小结
2015/02/17 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
详解JS函数重载
2014/12/04 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python单例模式的两种实现方法
2017/08/14 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
C和C++经典笔试题附答案解析
2014/08/18 面试题
校园自助餐厅的创业计划书
2013/12/26 职场文书
网络管理专业求职信
2014/03/15 职场文书
学校国庆节活动总结
2015/03/23 职场文书
结婚典礼致辞
2015/07/28 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis