JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
网上答案说是因为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>
相关推荐
-
Jquery插件 easyUI属性汇总
此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里. 属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window 生成一个window窗口样式. 属性如下: 1)modal:是否生成模态窗口.true[是] false[否] 2)shadow:是否显示窗口阴影.true[显示] false[不显示] 2.div easyui-panel
-
Jquery EasyUI的添加，修改，删除，查询等基本操作介绍
初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例.写了一些基本的增删改查功能,算是对该控件的基本入门.后续有时间继续深入学习. 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1.列表展示 2.新增页面 3.修改页面 把jquery easyui下载好之后,一般引用下页几
-
jQuery EasyUI API 中文文档 - Form表单
Form 表单 用法 复制代码 代码如下: <form id="ff" method="post"> ... </form> 使 form 成为 ajax 提交的 form . 复制代码 代码如下: $('#ff').form({ url:..., onSubmit: function(){ // 做某些检查 // 返回 false 来阻止提交 }, success:function(data){ alert(data) } }); // 提
-
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
扩展自 $.fn.datebox.defaults.用 $.fn.datetimebox.defaults 重写了 defaults. 依赖 datebox timespinner 用法 复制代码 代码如下: <input id="dt" type="text"></input> 复制代码 代码如下: $('#dt').datetimebox({ showSeconds:false }); 特性 其特性扩展自 datebox,下列是为 dat
-
jquery easyui 结合jsp简单展现table数据示例
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu
-
JQuery EasyUI 日期控件如何控制日期选择区间
复制代码 代码如下: <tr><th>发售起始日期</th> <td><input type="text" id="usLineTime" name="usLineTime" size="20" class='easyui-validatebox Wdate' onFocus="WdatePicker({el:'usLineTime',dateFmt:'yyyy-
-
jquery easyui中treegrid用法的简单实例
项目需求如下图,在服务端返回的json数据中,要经过JS处理,添加复选框,并且复选框需响应JS操作.在easyui 的treegrid中,没有找到现成的插件,自己需要修改整理,代码如下 复制代码 代码如下: <table class="easyui-treegrid" style="width:700px;height:250px" url='control_node_json?group_id=$info[id]&access_node=$_REQ
-
初试jQuery EasyUI 使用介绍
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,window等等. OK,下面就开始我们的初探之旅.jQuery Ea
-
JQuery EasyUI 对话框的使用方法
下面看一下EasyUI的对话框效果图 js代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Open_Dialog() { $('#mydialog').show(); $('#mydialog').dialog({ collapsible: true, minimizable: true, maximizable: true, toolbar: [
-
jQuery EasyUI API 中文文档 - Tree树使用介绍
用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节点.下面是一个示例: 复制代码 代码如下: <ul id="tt"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> &
-
jQuery EasyUI API 中文文档 - ValidateBox验证框
用 $.fn.validatebox.defaults 重写了 defaults. 用法 复制代码 代码如下: <input id="vv" required="true" validType="email"> 复制代码 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email
-
jquery easyui 对于开始时间小于结束时间的判断示例
对于开始时间小于结束时间的判断可以参考,jquery easyui里的ValidateBox进行判断 好吧!直接上代码 复制代码 代码如下: 查看内容:按时间: <input class="easyui-datetimebox" style="width: 180px" id="start2" value="${startTime}"> <span class="newfont06">
-
jQuery easyui datagrid动态查询数据实例讲解
该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码 复制代码 代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu
-
jquery EasyUI的formatter格式化函数代码
要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数: value: 对应字段的当前列的值 record: 当前行的记录数据 复制代码 代码如下: $('#tt').datagrid({ title:'Formatting Columns', width:550, height:250, url:'datagrid_data.json', columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'p
-
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults,用 $.fn.combogrid.defaults 重写了 defaults . 依赖 combo datagrid 用法 复制代码 代码如下: <select id="cc" name="dept" style="width:250px;"></select> 复制代码 代码如下: <input id="cc
-
jQuery EasyUI API 中文文档 - Panel面板
用$.fn.panel.defaults重写defaults.用法示例 创建Panel 1. 经由标记创建Panel 从标记创建Panel更容易.把 'easyui-panel' 类添加到<div/>标记. 复制代码 代码如下: <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;b
-
jquery easyui滚动条部分设置介绍
在使用dialog插件时,默认是屏幕居中的,但是当页面出现滚动条时,dialog并没有随着滚动条往下滚动,这时就需要用户滑动滚动条来定位dialog,这不人性化,在说出解决方案前先来普及一下jquery关于定位的几个方法 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(docume
-
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'
-
jQuery EasyUI API 中文文档 - ComboBox组合框
扩展自 $.fn.combo.defaults. 用 $.fn.combobox.defaults 重写了 defaults. 依赖 combo 用法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option>
-
jQuery EasyUI 的EasyLoader功能介绍
EasyLoader是可以动态加载脚本和CSS文件,也可以动态加载EasyUI已有组件 需要引用EasyLoader.js文件,注意:这里就不需要引用jquery.easyui.min.js文件了. 比如需要加载linkbutton组件,则可以用下面的两种方式来加载: 第一种通过设置class来实现: <a href="#" class="easyui-linkbutton" onclick="load1()">加载日历</a&
-
jQuery EasyUI API 中文文档 - DataGrid数据表格
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'