Of Stack

Jqeasy ui in IE9 below version of the second load problem analysis and handling methods

  • 2020-03-30 03:27:22
  • OfStack

The online answer is that the easy-ui should delete the class style at a lower version, and write the url in javascript, because if there is a url in the class, there is also a url in the javascript, which will cause the page to refresh twice. However, after testing, I failed to solve my problem. After repeated testing, I finally found the problem. 


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

Since style is written on the page, the style in the style can be deleted to solve the problem, now attached is the complete ajax dynamic tree and Grid table code. 


<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
    });
  });
  //Initialization table
  function initTable() {

   $('#tt').datagrid({
    url: '/OEE/Details',
    title: 'OEE',
    width: 700,
    height: 360,
    fitColumns: true,
    idField: 'Fid',
    loadMsg: ' Loading device information ...',
    pagination: true,
    singleSelect: false,
    pageSize: 10,
    pageNumber: 1,
    pageList: [10, 20, 30],
    queryParams: {//The parameter to be passed in
     NodeResult: NodeText,
     SelectTime: $('#SelectTime').datebox('getValue')
    },
    columns: [[//{EID, ETypeName, ThenTypeInfoTID, EtypeNum}
      {field: 'Num', title: ' Equipment serial number ', width: 80, align: "center" },
      { field: 'Name', title: ' Device name ', width: 80, align: "center" },
      { field: 'EarlyTimeOEE', title: ' The early OEE', width: 80, align: "center" },
      { field: 'MiddleTimeOEE', title: ' Afternoon class OEE', width: 80, align: "center" },
      { field: 'LaterTimeOEE', title: ' This night, OEE', width: 80, align: "center" },
       {
        field: 'DelFlag', title: ' operation ', width: 80, align: 'center',
        formatter: function (value, row, index) {
         var str = "<a Fid='" + row.Fid + "' class='SelectInfo' href='javascript:void(0)'> The detail </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: " Display detailed information ",
    collapsible: true,
    minimizable: true,
    maximizable: true,
    resizable: true,
    buttons: [{
     id: 'btnSelect',
     text: ' determine ',
     iconCls: 'icon-add',
     handler: function () {
      $("#SelectForm").dialog("close");
     }
    }]
   });
  }

  //Bind the click event for the search query
  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">
     Enquiry time: <input class="easyui-datebox" name="SelectTime" id="SelectTime" />
    <a id="linkButtonSearch" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">
      The query </a>
   </div>
   <table id="tt" style="width: 700px;" title=" The 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>

Related articles: