ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

关于JQEasy-ui在IE低版本下二次加载的问题

2019-07-31 09:00:52  阅读:170  来源: 互联网

标签:function title 低版本 width ui JQEasy var true OEE


原文链接:http://www.cnblogs.com/ckblogs/p/3803459.html

   之前项目中才用了Easy-ui,但是在同时使用tree和grid的效果时,因为页面有俩个URL,分别为Ajax树去后台取数据和Grid取数据,在IE9以上以及其他浏览器里都没有问题,在Ie低版本时会出现先加载表格,然后一闪而过加载树渲染页面,造成页面只有tree数据而没有表格grid数据。网上答案说是因为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>&nbsp;&nbsp;&nbsp;";
                                 return str;
                             }
                         }
                ]],
                onHeaderContextMenu: function (e, field) {

                },
                onl oadSuccess: 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>

 

转载于:https://www.cnblogs.com/ckblogs/p/3803459.html

标签:function,title,低版本,width,ui,JQEasy,var,true,OEE
来源: https://blog.csdn.net/weixin_30614587/article/details/97882531

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有