使用EasyUI框架时，需要导入3个包在项目js文件夹之中。

在项目之中，每次需先引入相关文件：

<!--引入jquery-->

    <script src="../js/jquery.min.js" charset="utf-8"></script>

    <!--引入easyui-->

    <script src="../js/jquery.easyui.min.js" charset="utf-8"></script>

    <!--引入样式-->

    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>

    <!--引入图标样式-->

    <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>

    <!--导入语言包-->

    <script src="../js/easyui-lang-zh_CN.js"></script>

将这些文件导入项目之中后，即可使用EasyUI框架。

EasyUI中jar包文件目录

plugins:插件包，若只想使用其中的某个功能，可单独导入某一个包。

locale：语言架包 语言版本控制。

themes：样式。

Panel练习实践

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <title>layout</title>

    <!--引入jquery-->

    <script src="../js/jquery.min.js" charset="utf-8"></script>

    <!--引入easyui-->

    <script src="../js/jquery.easyui.min.js" charset="utf-8"></script>

    <!--引入样式-->

    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>

    <!--引入图标样式-->

    <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>

    <!--导入语言包-->

    <script src="../js/easyui-lang-zh_CN.js"></script>

</head>

<body>

<table id="t">

</table>

</body>

<script type="text/javascript">

    $(function(){

        $("#t").datagrid({

            columns:[[

                {

                    title:'编号',

                    field:'id',

                    width:100,

                },{

                    title:'学生姓名',

                    field:'name',

                    width:200,

                },{

                    title:'成绩',

                    field:'score',

                    width:100,

                }

            ]],

            width:400,

            url:'data.json',

            method:'get',

            pagination:true

        })

    })

</script>

</html>

datagrid练习实践

<head>

    <meta charset="UTF-8">

    <title></title>

    <title>layout</title>

    <!--引入jquery-->

    <script src="../js/jquery.min.js" charset="utf-8"></script>

    <!--引入easyui-->

    <script src="../js/jquery.easyui.min.js" charset="utf-8"></script>

    <!--引入样式-->

    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>

    <!--引入图标样式-->

    <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>

    <!--导入语言包-->

    <script src="../js/easyui-lang-zh_CN.js"></script>

</head>

<body>

<table id="t">

</table>

</body>

<script type="text/javascript">

    $(function(){

        $("#t").datagrid({

            columns:[[

                {

                    title:'编号',

                    field:'id',

                    width:100,

                },{

                    title:'学生姓名',

                    field:'name',

                    width:200,

                },{

                    title:'成绩',

                    field:'score',

                    width:100,

                }

            ]],

            width:400,

            url:'data.json',

            method:'get',

            pagination:true

        })

    })

</script>

</html>

progressbar进度条

<body>

    <div id="pro">

    </div>

    <p id="p">

    </p>

</body>

<script type="text/javascript">

    $("#pro").progressbar({

        width:400,

        height:60,

        value:0,

        text:'{value}%',

        onChange:function(n,o) {

            $("#p").html('新值是：'+n+',旧值是'+o)

        }

    });

    /*方法设置时需要单独设置*/

    setInterval(function(){

        $("#pro").progressbar('setValue',$("#pro").progressbar('getValue')+1);

    },50);

</script>

pagination分页控件

<body>

    <!--使用html实现-->

    <!--data-options：用于设置属性-->

    <!--<div class="easyui-pagination" data-options="total:200,pageSize:10" style="background-color: grey">-->

    <!---->

    <div id="page">

    </div>

    </div>

</body>

<script type="text/javascript">

    $("#page").pagination()({

        total:100,

        pageSize:5,

        pageList:[5,10,15,20,25]

    });

</script>

layout

<body class="easyui-layout">

<div style="background-image: url(../img1/timg.jpg); height: 200px; width: 1620px; background-size: 200 1620;">

</div>

<div data-options="region:'north',title:'North Title',split:true" style="height:200px;"></div>

<div data-options="region:'west',title:'West',split:true" style="width:200px;"></div>

<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</body>

<script type="text/javascript">

    $(function(){

        var west=$("body").layout('panel','west');

        var content=$('<div id="lanmn"></div>');

        content.tree({

            url:'../tree/tree.json',

            method:'get'

        })

        west.panel({

            content:content

        })

        var north=$("body").layout('panel','north');

        north.panel({

            content:'<div style="background-image: url(../img1/timg.jpg);  background-size: 200 1620;height: 140px; width: 1260px;"></div>'

        })

    })

</script>

tree

<body>

    <ul id="tree">

        <li>

            <span>目录1</span>

            <ul>

                <li>1</li>

                <li>2</li>

                <li>3</li>

            </ul>

        </li>

        <li>b</li>

        <li>c</li>

    </ul>

</body>

<script type="text/javascript">

    $("#tree").tree()

</script>

动态tree

<body>

    <ul id="tree">

    </ul>

    <input type="button" id="b" value="刷新"/>

</body>

    <script>

        $("#tree").tree({

            url:'tree.json',

            lines:true,

            dnd:true

        });

        $("#b").click(function(){

            $("#tree").tree('loadData',[{

                "id": 2,

                "text": "Node 2",

                "state": "closed"}]

            );

        })

    </script>

EasyUI框架的更多相关文章

  1. easyui框架对tab的限制提示

    使用easyui框架如果页面打开太多可能导致页面加载缓慢的问题,下面我们看看代码怎么写: var $tab = $('#tabs'); var tabCount = $tab.tabs('tabs') ...

  2. 【JavaScript】EasyUI框架的Dialog控件根据浏览器分辨率自动调节宽高

    序: 如果单独一个或几个Dialog控件修改成根据浏览器可视界面自动调整高.宽很容易仅仅是一个量变的过程,但如果大量页面都引入了Dialog控件,修改起来是一个很消耗体力的工作.所以接到任务后第一想法 ...

  3. 对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识

    对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识   初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相 ...

  4. hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结

    最近刚开始接触hibernate+spring+mvc+Easyui框架,也是刚开通了博客,希望能记录一下自己实践出来的东西,让其他人少走弯路. 转让正题,以个人浅薄的认识hibernate对于开发人 ...

  5. JQuery EasyUI框架学习

    前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...

  6. Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架

    Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架 初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相关资料,了解了框 ...

  7. easyui框架--基础篇（一）-->数据表格datagrid（php与mysql交互）

      前  言  php  easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...

  8. 基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目

    项目中我做修改用户个人资料的时候,有一个需求是帮助人员的帮助类型如图下所示: 当初想如果是asp.net控件的话应该很简单实现,如果不是基于easyUI框架那就太简单了,现在是受框架的限制与是前端ht ...

  9. 快速开发框架，及库存管理系统，基于easyui框架和C#语言MVC、EntityFrameWork、T4模板技术。

    快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC.EntityFrameWork.T4模板技术. 产品界面如下图所示: 源码结构: 开放全部源码,如有需要请联系,QQ:1107141 ...

  10. 基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）

    http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...

随机推荐

  1. 线程上下文类加载器（Context ClassLoader）

    1.线程上下文类加载器是从jdk1.2开始引入的,类Thread中的getContextClassLoader()与setContextClassLoader(ClassLoader c1),分别用来 ...

  2. 记录一次 Nginx 配置 proxy_pass 后 返回404问题

    一. Nginx 配置 proxy_pass 后 返回404问题 故障解决和定位 1.1. 问题 在一次生产涉及多次转发的配置中, 需求是下面的图: 在配置好了 proxy_pass 之后,请求 ww ...

  3. 注意力论文解读(1) | Non-local Neural Network | CVPR2018 | 已复现

    文章转自微信公众号:[机器学习炼丹术] 参考目录: 目录 0 概述 1 主要内容 1.1 Non local的优势 1.2 pytorch复现 1.3 代码解读 1.4 论文解读 2 总结 论文名称: ...

  4. [从源码学设计]蚂蚁金服SOFARegistry 之 服务注册和操作日志

    [从源码学设计]蚂蚁金服SOFARegistry之服务注册和操作日志 目录 [从源码学设计]蚂蚁金服SOFARegistry之服务注册和操作日志 0x00 摘要 0x01 整体业务流程 1.1 服务注 ...

  5. 在.NET Core中使用Channel（三）

    到目前为止,我们一直在使用所谓的"Unbounded"通道.你会注意到,当我们创建通道时,我们这样做: var myChannel = Channel.CreateUnbounde ...

  6. Java高并发与多线程（一）-----概念

    其实之前一直想专门写一篇,单独说一说Java的多线程与高并发,但是一直以来,都没有想到能够用什么比较有趣的表现形式去表达出来,而且网上充斥着很多类似的博客,有好的又不好的,有简介的有繁琐的,所以也一直 ...

  7. ssh信任 sftp用法 scp用法【转】

    为了进行批量关机工作,前提要配置好ssh的双机信任. A机192.168.1.241 B机192.168.1.212 在A机上获取一个pub密钥,即为公共密钥. 执行这个命令后:ssh-keygen  ...

  8. leetcode1637-两点之间不包括任何点的最宽垂直面积

    题目 给你 n 个二维平面上的点 points ,其中 points[i] = [xi, yi] ,请你返回两点之间内部不包含任何点的 最宽垂直面积 的宽度. 垂直面积 的定义是固定宽度,而 y 轴上 ...

  9. 输入5V，输出5V限流芯片，4A限流，短路保护

    USB限流芯片,5V输入,输出5V电压,限流值可以通过外围电阻进行调节,PWCHIP产品中可在限流范围0.4A-4.8A,并具有过压关闭保护功能. 过压关闭保护: 如芯片:PW1555,USB我们一半 ...

  10. win32 修改Edit控件文本颜色与背景色

    #define WM_CTLCOLORMSGBOX 0x0132 #define WM_CTLCOLOREDIT 0x0133 //编辑控件Edit #define WM_CTLCOLORLISTBO ...