精华内容
下载资源
问答
  • easyui框架

    2018-04-17 16:39:18
    easyui框架easyui框架easyui框架easyui框架easyui框架easyui框架easyui框架
  • easyUI框架

    2018-02-04 06:45:57
    。net,easyUI框架,功能十分强大,包含数据库,MVC三层结构,适合做基础框架
  • Easyui框架

    2018-07-14 20:34:05
    这是我自己空闲时间搭建的一个Easyui后台前端框架,希望它可以对大家有帮助。
  • EasyUI框架

    千次阅读 2017-09-20 21:38:09
    使用EasyUI框架时,需要导入3个包在项目js文件夹之中。 在项目之中,每次需先引入相关文件: <!--引入jquery--> <script src="../js/jquery.min.js" charset="utf-8&...

    使用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>
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,346
精华内容 2,138
关键字:

easyui框架