index.html页面:
easyui 在项目中经常用到现在简单的介绍一下easyUI的实现原理
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:include="common">
<meta content="text/html;charset=UTF-8" />
<title>数据接入中心-系统</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height: 70px;overflow: hidden;padding: 0 10px;">
<div class="user-info">
<span class="item" id="public_change_info"><i class="fa fa-user"></i> <span data-lang="string_admin">管理员</span></span>
<span class="item" id="public_change_password"><i class="fa fa-user"></i> <span data-lang="string_editpwd">修改密码</span></span>
<a class="item" id="public_logout" href="javascript:void(0);"><i class="fa fa-sign-out"></i> <span data-lang="string_loginout">注销</span></a>
<a class="item" id="public_change_lan" href="javascript:void(0);"><i class="fa fa-sign-out"></i> <span data-lang="string_changelan">中英切换</span></a>
<input id='test' type="hidden" th:value="${memberId}"/>
<input id='memberId_hidden' type="hidden" th:value="${memberId}"/>
</div>
<h1 data-lang="string_title">数据接入中心-系统</h1>
</div>
<div title="菜单" data-options="region:'west',iconCls:'fa fa-list'" style="width: 200px" id="caidan">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div class="cls_menus" th:each="m : ${menus}" th:title="${m.name}" data-options="iconCls:'fa fa-cogs'">
<ul class="crm-menu">
<li class="li_btn" th:each=" r: ${m.childrens}" th:href="${r.path}" th:text="${r.name}" ></li>
</ul>
</div>
<!-- yjm添加 -->
<div class="cls_menus" data-options="iconCls:'fa fa-cogs'">
<ul class="crm-menu"> //页面左侧的菜单按钮
<li class="li_btn" href="/service/device">设备管理</li> //跳转到js页面service/device.js
<li class="li_btn" href="/service/deviceGroup">设备组管理</li>
<li class="li_btn" href="/service/deviceType">设备组管理</li>
<li class="li_btn" href="/service/data">数据检阅</li>
</ul>
</div>
<!-- yjm添加 --> </div></div><div data-options="region:'center',href:''" id="region-key" ><div class="easyui-tabs" style="height: 100%;" id="regin-innder" ></div></div></body><script>$(function(){/* $('#caidan .panel-title').each(function(index,item){$(item).attr("data-lang","string_mk"+index)});$(".easyui-accordion div ul li").each(function(index,item){var a = $(item).attr('href').split('/')$(item).attr('data-lang',"string_"+a[a.length-1])}); */})</script><script src="/js/changelan.js"></script><script src="/js/index.js" charset="utf-8"></script><script src="/js/jquery.i18n.properties-1.0.9.js"></script></html>
date.html页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="common">
<meta content="text/html;charset=UTF-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<link rel="stylesheet" href="/css/system/member.css" />
</head>
<script type="text/javascript" src="/js/service/data.js"></script>
<body style="height: 100%;">
<div class="easyui-layout">
<div id="data_search" data-options="region:'north',border:false" style="height: 85px; padding: 10px; overflow: hidden;">
<form id="data_search_form" class="searcher-form">
<div>//关键name必须与后端实体类的数据一致不然无法传值
<input name="name" class="easyui-textbox field" label="企业名称:" labelWidth="65" style="width:200px" />
<input name="macAddress" class="easyui-textbox field" label="MAC地址:" labelWidth="70" style="width:200px" />
<select name="sendStatus" class="easyui-combobox field" label="发送状态:" labelWidth="65" editable="false" style="width:200px" data-options="valueField:'value', textField:'label', panelHeight:'auto'">
//选择按钮
<option value="">全部</option>
<option value="1">未发送</option>
<option value="2">进入队列通道</option>
<option value="3">发送成功</option>
<option value="4">发送失败</option>
</select>
<a id="data_search_button" class="easyui-linkbutton searcher" data-options="iconCls:'fa fa-search'">检索</a>
</div>
<div style="margin-top:3px">
<input name="startTime" class="easyui-datebox field" label="起始时间:" labelWidth="65" style="width:200px" />
<input name="endTime" class="easyui-datebox field" label="结束时间:" labelWidth="65" style="width:200px" />
<input name="queueKey" class="easyui-textbox field" label="队列名称:" labelWidth="65" style="width:200px" />
<a id="data_reset_button" class="easyui-linkbutton reset" data-options="iconCls:'fa fa-repeat'">重置</a>
</div>
</form>
</div>
<div>
<table class="easyui-datagrid" style="" id="data_datagrid"></table>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".layout-panel").css("position", "static");
});
</script>
<script th:inline="javascript">
window.onload = function(){
var keys = [[${keys}]];
setKeys(keys);
}
</script>
</body>
</html>
data.js页面:
var toolbars = {
"data-get": "查阅具体数据"
};
var keys;
var setKeys = function (v) {
keys = v;
}
$(function () {
var datagrid_height = $(window).height() - $("#data_search").height() - 98;
$("#data_datagrid").parent().height(datagrid_height);
$("#data_datagrid").height(datagrid_height);
//
var grid_columns = [
[{
field: 'dataId', hidden: 'true'//重点:这个是在表单上不显示的,但是后面进行操作的时候需要根据id进行具体操作,不然后面是取不到id的
}, {
field: 'macAddress', title: 'MAC地址', width: 30, align: 'center'
}, {
field: 'queueName', title: '队列名称', width: 30, align: 'center'
}, {
field: 'createTime', title: '录入时间', width: 20, align: 'center', formatter: formatDatebox
}, {
field: 'receiveData', title: '数据', width: 30, align: 'center',
formatter: function (val, row) {
return authToolBar({
"data-get": '<a data-id="' + row.dataId + '" class="ctr" title="点击查看详细数据">' + row.receiveData + '</a>'
}).join("");
}
}, {
field: 'sendStatus', title: '发送状态', width: 15, align: 'center',
formatter: function (val) {
switch (val) {
case 1:
return "未发送";
break;
case 2:
return "进入队列通道";
break;
case 3:
return "发送成功";
break;
case 4:
return "发送失败";
break;
default:
return "";
}
}
}, {
field: 'gwip', title: '基站IP', width: 20, align: 'center'
}]
]
var grid_data = [];
var datagrid = {
columns: grid_columns,
idField: "id",
data: grid_data,
fit: true,
rownumbers: true,
fitColumns: true,
border: false,
pagination: true,
singleSelect: true,
pageSize: 10,
method: "POST",
pageList: [10, 15, 20],
loadMsg: "加载企业数据"
};
$('#data_datagrid').datagrid(datagrid);
$("#data_search_button").on("click", function () {
var params = $.serializeToJson($('#data_search_form').serializeArray());
$('#data_datagrid').datagrid({
url: "http://localhost:8085/data/page",
queryParams: params
});
});
$("#data_reset_button").on("click", function () {
$('#data_search_form').form('clear');
$('#data_datagrid').datagrid('options').queryParams = "";
});
/**
* 操作按钮绑定事件
*/
$("#data_datagrid").datagrid("getPanel")
.on('click', "a.ctr", function () { // 查看按钮事件
var dglog = this;
var dgId = this.dataset.id;
$.post(bindToken(fun_urls.data.get_receive_data_url), {//请求一个controller路径找到后端处理byid的方法
"dataId": dgId //在表单中获取id,继而具体进行这条数据的增删改查
}, function (data) {
if (data.code == "0") {
createGetDataForm.call(dglog, data.data);
} else {
$.messager.show({
msg: data.msg,
timeout: 1500
});
}
});
});
/**
* 创建窗口(查阅具体数据)
*/
function createGetDataForm(data) {
var dialog = $("<div/>", {
class: 'noflow'
}).dialog({
title: "查阅具体数据",
iconCls: 'fa fa-search',
height: 208,
width: 420,
href: '/data/view',//请求controller层的方法访问
modal: true,
onClose: function () {
$(this).dialog("destroy");
},
onLoad: function () {
// 窗口表单加载成功时执行
form = $("#data-form");
$(form).find("#receiveData").textbox("setValue", data.receiveData);
}
});
}
});