• (二)EasyUI 使用——常用组件


    1. EasyUI常用组件的基本用法

    1.1 layout布局

              

    <!-- 布局面板  大小自适应父容器 -->
         <div data-options="fit:true" id="cc" class="easyui-layout" style="600px;height:400px;">   
            <!-- 区域面板 -->
            <div data-options="region:'north',title:'北',split:false,collapsible:true" style="height:100px;"></div>   
            <div data-options="region:'south',title:'南',split:false,collapsible:true" style="height:100px;"></div>   
            <div data-options="region:'east',title:'东',split:false,collapsible:false,minWidth:150,maxWidth:150" style="100px;"></div>   
            <div data-options="region:'west',title:'西',split:false,collapsible:false,minWidth:150,maxWidth:150" style="100px;"></div>   
            <div data-options="region:'center',title:'中',iconCls:'icon-reload',collapsible:false" style="padding:5px;background:#eee;"></div>   
         </div>

    Js实现页面小功能

    <script type="text/javascript">
            //浏览器加载web页面时触发
            $(function() {
                //将北边面板折叠,字符串双引单引均可
                $('#cc').layout('collapse', 'north');
                //休息3秒
                window.setTimeout(function() {
                    //将南边面板折叠,字符串双引单引均可
                    $('#cc').layout('collapse', 'south');
                }, "3000");
            });
    </script>

    实现页面嵌套

    <body class="easyui-layout">
        <!---->
        <div data-options="region:'north'" style="height:150px"></div>
        <!---->
        <div data-options="region:'center'">
            <!-- 将中拆分边西和中二部份 -->
            <!-- center里增加新的嵌套时,需要将新的嵌套内容包含在新的div里
                声明class为easyui-layout     fit为true
                <div class="easyui-layout" data-options="fit:true">
                </div>
             -->
            <div class="easyui-layout" data-options="fit:true">
                <!-- 西 -->
                <div data-options="region:'west'" style="200px">西部</div>
                <!---->
                <div data-options="region:'center'">
                    <div class="easyui-layout" data-options="fit:true">
                        <!-- center里的div要求必须有一个设置宽或高,否则显示不出 -->
                        <div data-options="region:'north'" style="height:200px">中北部</div>
                        <div data-options="region:'center'"></div>
                    </div>
                </div>
            </div>
    </body>

              

     1.2 accordion 分类 

              

    <!-- 容器 -->
        <div data-options="border:true,animate:true,multiple:false,selected:-1"
            id="aa" class="easyui-accordion" style="300px;height:500px;">
    
            <!-- 面板 -->
            <div title="Title1" data-options="iconCls:'icon-save'"
                style="overflow:auto;padding:10px;">内容1</div>
            <div title="Title2" data-options="iconCls:'icon-reload'"
                style="padding:10px;">内容2</div>
            <div title="Title3"
                data-options="iconCls:'icon-reload',collapsible:true">内容3</div>

    </div>

    几点属性:

    增加一个4号面板并。。。。。

    <script type="text/javascript">
            $(function() {
                //增加一个面板
                $("#aa").accordion("add", {
                    "title" : "Title4",
                    "content" : "内容4",
                    "selected" : false,
                    "iconCls" : "icon-search"
                });
    
                //休息3秒
                window.setTimeout(function() {
                  //删除4号面板
                 $("#aa").accordion("remove", 3);
                  //取消选择1号面板
                 $("#aa").accordion("unselect", 0);
                }, "3000");
            });
        </script>

    1.3 linkbutton 按钮 

                                           

        <a id="btn-add" class="easyui-linkbutton"
            data-options="iconCls:'icon-add'"> 增加 </a>
        <a id="btn-find" class="easyui-linkbutton"
            data-options="iconCls:'icon-search'"> 查询 </a>
        <a id="btn-update" class="easyui-linkbutton"
            data-options="iconCls:'icon-edit'"> 修改 </a>
        <a id="btn-delete" class="easyui-linkbutton"
            data-options="iconCls:'icon-remove'"> 删除 </a>
    
        <script type="text/javascript">
            /*
            $("#btn-add").click(function(){
                //将该按失效
                $("#btn-add").linkbutton("disable");
            });
            $("#btn-add").dblclick(function(){
                //将该按失效
                $("#btn-add").linkbutton("disable");
            });
             */
    
            //参数一:字符串类型的事件,多个事件之间通过空格分隔,事件名称符合jquery事件名写法
            //参数二:处理函数
            $("#btn-add").bind("click dblclick", function() {
                //将该按失效
                $("#btn-add").linkbutton("disable");
            });
        </script>

    1.4 tabs 选项卡

                     

        <!-- 容器面板 -->
        <div id="tt" class="easyui-tabs" style="500px;height:250px;"
            data-options="plain:false,border:true,tools:[{
                        iconCls:'icon-add',
                        handler:function(){
                            alert('添加')
                        }
                },{
                        iconCls:'icon-remove',
                        handler:function(){
                            alert('删除')
                        }
                }],selected:-1">
    
            <!-- 选项卡面板 -->
            <div title="Tab1" data-options="closable:true" style="padding:20px">
                tab1</div>
            <div title="Tab2" data-options="closable:true"
                style="overflow:auto;padding:20px;">tab2</div>
            <div title="Tab3" data-options="iconCls:'icon-reload',closable:true"
                style="padding:20px;">tab3</div>
    
        </div>

    页面加载时增加一个tab4(属性用 Json 格式)

    <script type="text/javascript">
                $(document).ready(function(){
                    $("#tt").tabs("add",{
                        "title":"Tab4",
                        "content":"tab4",
                        "selected":false,
                        "closable":true
                    });
                });
            </script>

     1.5 pagination(分页)

                  

    <!-- 
            total:记录总数100
            pageSize:每页显示多少条记录5
            pageNumber:当前页号1
            pageList:[5,10,15]表示可供选择中每页显示多少条记录,
                              注意:pageSize的值必须是pageList数组值之一
         -->    
        <div 
            id="pp" 
            class="easyui-pagination" 
            data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10,15],showPageList:true,showRefresh:false,afterPageText:'页'" 
            style="background:#efefef;border:1px solid #ccc;400px">
        </div>

                    

    该功能实现

    <script type="text/javascript">
            $("#pp").pagination({
                //pageNumber当前页号,例如1 
                //pageSize获取多少条记录,例如:5
                //以上二个参数,需要谁,就接收谁,不一定二个都同时出现,参数名可以任意
                "onSelectPage":function(pageNumber,pageSize){
                    alert(pageNumber + ":" + pageSize);
                }
            });
        </script>

    实现中文显示可通过引入 easyui-lang-zh_CN.js 文件

     

     

  • 相关阅读:
    【C++17】std::optional

    【GDB 】GDB基本命令
    【二叉树系列 | 01】二叉树遍历
    【coredump | 01】coredump的阐述
    【C++ Template | 06】std::enable_if和SFINAE
    std::dclval 使用教程
    系统设计实践(03)- Instagram社交服务
    系统设计实践(02)- 文本存储服务
    系统设计实践(01)
  • 原文地址:https://www.cnblogs.com/zjfjava/p/6837196.html
Copyright © 2020-2023  润新知