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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
webpack入门+react环境配置
Feb 08 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
教你用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实现websocket实时消息推送
2018/03/30 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python编写的最短路径算法
2015/03/25 Python
详解Python中的多线程编程
2015/04/09 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
医学专业毕业生个人的求职信
2013/12/04 职场文书
旷课检讨书2000字
2014/01/14 职场文书
开学典礼主持词
2014/03/19 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
三八妇女节主持词
2015/07/04 职场文书
生日寿星公答谢词
2015/09/29 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Python图像处理之图像拼接
2021/04/28 Python
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS