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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
vue实现文件上传功能
2018/08/13 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
用js实现放大镜效果
2020/10/28 Javascript
Python实现视频下载功能
2017/03/14 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
外企C语言笔试题
2013/11/10 面试题
自我鉴定书范文
2013/10/02 职场文书
毕业生造价工程师求职信
2013/10/17 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
python3操作redis实现List列表实例
2021/08/04 Python