EasyUI框架

阅读原文时间：2023年07月08日阅读：1

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

手机扫一扫

移动阅读更方便

你可能感兴趣的文章