easyUI 界面的功能介绍

最新推荐文章于 2024-06-21 23:54:00 发布

佳佳乐2503

最新推荐文章于 2024-06-21 23:54:00 发布

阅读量804

点赞数

分类专栏：前端技术文章标签： easyUI

本文链接：https://blog.csdn.net/qq_33355858/article/details/80228345

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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);
            }
        });
    }

});