发布于 2017-01-21 03:14:48 | 146 次阅读 | 评论: 0 | 来源: 网友投递
EasyUI jQuery UI插件
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
网上答案说是因为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>