JQEasy-ui在IE9以下版本中二次加載的問題分析及處理方法
更新時間:2014年06月23日 10:59:05 投稿:hebedich
之前項目中才用了Easy-ui,但是在同時使用tree和grid的效果時,因為頁面有倆個URL,分別為Ajax樹去后臺取數(shù)據(jù)和Grid取數(shù)據(jù),在IE9以上以及其他瀏覽器里都沒有問題,在Ie低版本時會出現(xiàn)先加載表格,然后一閃而過加載樹渲染頁面,造成頁面只有tree數(shù)據(jù)而沒有表格grid數(shù)據(jù)。
網(wǎng)上答案說是因為Easy-ui在低版本時應將class樣式刪去,而在javascript里寫url,因為class里有url的話javascript里也存在url,就會使頁面刷新倆次,但是測試后沒有解決我的問題,后來通過反復測試終于找到問題,
<ul id="eva" style=" font-size:25px; "> </ul>
因為在頁面寫了style,將style里的樣式刪去就可以解決問題了,現(xiàn)附上完整的ajax動態(tài)樹和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: {//要傳入的參數(shù) 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>
您可能感興趣的文章:
- JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
- jquery easyui 結(jié)合jsp簡單展現(xiàn)table數(shù)據(jù)示例
- jquery easyui 對于開始時間小于結(jié)束時間的判斷示例
- jquery easyui中treegrid用法的簡單實例
- Jquery EasyUI的添加,修改,刪除,查詢等基本操作介紹
- jquery easyui滾動條部分設置介紹
- jQuery easyui datagrid動態(tài)查詢數(shù)據(jù)實例講解
- jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
- jQuery EasyUI API 中文文檔 - Tree樹使用介紹
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery EasyUI API 中文文檔 DateTimeBox日期時間框
- jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
- jQuery EasyUI API 中文文檔 - ComboBox組合框
- jQuery EasyUI API 中文文檔 - ValidateBox驗證框
- jQuery EasyUI API 中文文檔 - Form表單
- jQuery EasyUI API 中文文檔 - Panel面板
- Jquery插件 easyUI屬性匯總
- jquery EasyUI的formatter格式化函數(shù)代碼
- JQuery EasyUI 對話框的使用方法
- jQuery EasyUI 的EasyLoader功能介紹
- 初試jQuery EasyUI 使用介紹
相關文章
ajax無刷新動態(tài)調(diào)用股票信息(改良版)
今日閑來無事,把上次寫的代碼稍微改了改。增加了動態(tài)追加和刪除股票信息的功能(代碼基于jquery運行:http://jquery.com/) 。由于對Ajax技術(shù)的認識還只是在初級階段,總覺得這么些有點別扭,希望大蝦能夠指點一二。2008-11-11js獲取通過ajax返回的map型的JSONArray的方法
下面是js獲取通過ajax返回的map型的JSONArray的詳細代碼,需要的朋友可以參考下2014-01-01