EasyUI框架

来源：互联网发布：date函数的使用方法php 编辑：程序博客网时间：2024/06/09 23:29

使用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>

阅读全文

0 0