easyui datagrid分页 4、easyUI-七种布局（layout）-php教程-PHP中文网

首页

后端开发

php教程

easyui datagrid分页 4、easyUI-七种布局（layout）

PHP中文网

Mar 23, 2017 pm 05:30 PM

1、为网页创建边框布局

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

north 区域可以用来显示网站的标语。

south 区域可以用来显示版权以及一些说明。

west 区域可以用来显示导航菜单。

east 区域可以用来显示一些推广的项目。

center 区域可以用来显示主要的内容。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>为网页创建边框布局</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <style>
        .rtitle{
            font-size:18px;
            font-weight:bold;
            padding:5px 10px;
            background:#336699;
            color:#fff;        }    </style>
    <script>
        $(function(){
            showcontent(&#39;http://www.cnblogs.com/jianyeLee/p/5656968.html&#39;);
        });    </script>
    </script>
</head>
<body>
    <p class="easyui-layout" style="width:100%;height:100%;">
        <p region="north" border="false" class="rtitle">
            RSS 在线阅读        </p>
        <p region="west" split="true" title="博文栏目" style="width:150px;">
            <ul class="easyui-tree" lines="true" >
                <li>
                    <span>我的博文</span>
                    <ul>
                        <li>
                            <span>easyUI</span>
                            <ul>
                                <li><a href="javascript:void(0)" 
                                onclick="showcontent(&#39;http://www.cnblogs.com/jianyeLee/p/5656968.html&#39;)" 
                                target="bowen"><span>1、easyUI-创建 CRUD普通dataGrid（表格）</span></a></li>
                                <li><a href="javascript:void(0)" 
                                onclick="showcontent(&#39;http://www.cnblogs.com/jianyeLee/p/5657657.html&#39;)" 
                                target="bowen"><span>2、easyUI-创建 CRUD可编辑dataGrid（表格）</span></a></li>
                            </ul>
                        </li>
                        <li state="closed">
                            <span>Highcharts</span>
                            <ul>
                                <li>
                                    <span>折线图</span>
                                    <ul>
                                        <li><span>1-Highcharts环境介绍及配置</span></li>
                                        <li><span>2-Highcharts曲线图之折线图</span></li>
                                        <li><span>3-Highcharts曲线图之显示点值折线图</span></li>
                                        <li><span>4-Highcharts曲线图之时间轴折线图</span></li>
                                        <li><span>5-Highcharts曲线图之轴反转</span></li>
                                        <li><span>6-Highcharts曲线图之带标识</span></li>
                                        <li><span>7-Highcharts曲线图之分辨带</span></li>
                                        <li><span>8-Highcharts曲线图之对数直线图</span></li>
                                    </ul>
                               </li> 
                               <li>
                                    <span>3D图</span>
                                    <ul>
                                        <li><span>1-Highcharts 3D图之普通3D柱状图与带空值</span></li>
                                        <li><span>2-Highcharts 3D图之3D柱状图带可调试倾斜角度</span></li>
                                        <li><span>3-Highcharts 3D图之3D柱状图分组叠堆3D图</span></li>
                                        <li><span>4-Highcharts 3D图之3D普通饼图</span></li>
                                        <li><span>5-Highcharts 3D图之3D双饼图</span></li>
                                    </ul>
                               </li> 
                            </ul>
                        </li>
                    </ul>
                    
                </li>
            </ul>
        </p>
        <p id="content" region="center" title="在线阅读" style="padding:5px;">
            <iframe id="bowen" name="bowen"  style="border: none;width: 100%;height: 100%;"></iframe>
        </p>
    </p>
</body>
<html>

/*
 * layout布局 */function showcontent(url){
    $(&#39;#bowen&#39;).attr(&#39;src&#39;,url);
}

2、在面板中创建复杂布局

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>在面板中创建复杂布局</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <style>
        .p-search{
            background:#fafafa;
            padding:5px;
            border:1px solid #ccc;
            border-bottom:0;
            overflow:hidden;
        }        .p-search input{
            width:300px;
            border:1px solid #ccc;
            background: #fff url(&#39;../../../img/search.png&#39;) no-repeat right top;        }        .p-right{
            text-align:center;
            border:1px solid #ccc;
            border-left:0;
            width:150px;
            background:#fafafa;
            padding-top:10px;
        }    </style>
</head>
<body>
    <p class="easyui-panel" title="可收缩查询框" iconCls="icon-search" 
    collapsible="true" style="padding:5px;width:100%;height:600;">
        <p class="easyui-layout" fit="true">
            <p region="north" border="false" class="p-search">
                <label>查询:</label><input></input>
            </p>
            <p region="center" border="false">
                <p class="easyui-layout" fit="true">
                    <p region="east" border="false" class="p-right">
                        <img src="../../../img/msn.gif"/>
                    </p>
                    <p region="center" border="false" style="border:1px solid #ccc;">
                        <p class="easyui-layout" fit="true">
                            <p region="south" split="true" border="false" style="height:60px;">
                                <textarea style="border:0;width:100%;height:100%;resize:none">Hi,
                                I am easyui.</textarea>
                            </p>
                            <p region="center" border="false">
                            </p>
                        </p>
                    </p>
                </p>
            </p>
        </p>
    </p>
</body>
<html>

3、创建折叠面板

附上所有icon

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>创建折叠面板</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
</head>
<body>
    <p class="easyui-accordion" style="width: 400px;height: 1000px;">
        <p title="accordion1" iconCls="icon-ok" >
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>content1</p>
        </p>
        <p title="easyUI" selected="true" iconCls="icon-reload">
            <p>content2</p>
        </p>
        <p title="tree menu" iconCls="icon-cut">
            <ul class="easyui-tree" lines="true">
                <li>
                    <span>menu1</span>
                    <ul>
                        <li>
                            <span>sub menu1</span>
                            <ul>
                                <li>111</li>
                                <li>111</li>
                                <li>111</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>menu2</span>
                </li>
            </ul>
        </p>
        <p title="icon-blank"  iconCls="icon-blank">
            <p>icon-blank</p>
        </p>
        <p title="icon-add"  iconCls="icon-add">
            <p>icon-add</p>
        </p>
        
        <p title="icon-edit"  iconCls="icon-edit">
            <p>icon-edit</p>
        </p>
        
        <p title="icon-clear"  iconCls="icon-clear">
            <p>icon-clear</p>
        </p>
        
        <p title="icon-remove"  iconCls="icon-remove">
            <p>icon-remove</p>
        </p>
        <p title="icon-save"  iconCls="icon-save">
            <p>icon-save</p>
        </p>
        
        <p title="icon-cut" iconCls="icon-cut">
            <p>icon-cut</p>
        </p>
        <p title="icon-ok"  iconCls="icon-ok">
            <p>icon-ok</p>
        </p>
        <p title="icon-no" iconCls="icon-no">
            <p>icon-no</p>
        </p>
        <p title="icon-cancel"  iconCls="icon-cancel">
            <p>icon-cancel</p>
        </p>
        <p title="icon-reload"  iconCls="icon-reload">
            <p>icon-reload</p>
        </p>
        
        <p title="icon-search"  iconCls="icon-search">
            <p>icon-search</p>
        </p>
        
        <p title="icon-print"  iconCls="icon-print">
            <p>icon-print</p>
        </p>
        
        <p title="icon-help"  iconCls="icon-help">
            <p>icon-help</p>
        </p>
        
        <p title="icon-undo"  iconCls="icon-undo">
            <p>icon-undo</p>
        </p>
        
        <p title="icon-redo"  iconCls="icon-redo">
            <p>icon-redo</p>
        </p>
        
        <p title="icon-back"  iconCls="icon-back">
            <p>icon-back</p>
        </p>
        
        <p title="icon-sum"  iconCls="icon-sum">
            <p>icon-sum</p>
        </p>
        
        <p title="icon-tip"  iconCls="icon-tip">
            <p>icon-tip</p>
        </p>
        
        <p title="icon-filter"  iconCls="icon-filter">
            <p>icon-filter</p>
        </p>
        
        <p title="icon-man"  iconCls="icon-man">
            <p>icon-man</p>
        </p>
        
        <p title="icon-lock"  iconCls="icon-lock">
            <p>icon-lock</p>
        </p>
        
        <p title="icon-more"  iconCls="icon-more">
            <p>icon-more</p>
        </p>
        
        <p title="icon-mini-add"  iconCls="icon-mini-add">
            <p>icon-mini-add</p>
        </p>
        
        <p title="icon-mini-edit"  iconCls="icon-mini-edit">
            <p>icon-mini-edit</p>
        </p>
        
        <p title="icon-mini-refresh"  iconCls="icon-mini-refresh">
            <p>icon-mini-refresh</p>
        </p>
        
        <p title="icon-large-picture"  iconCls="icon-large-picture">
            <p>icon-large-picture</p>
        </p>
        
        <p title="icon-large-clipart"  iconCls="icon-large-clipart">
            <p>icon-large-clipart</p>
        </p>
        
        <p title="icon-large-shapes"  iconCls="icon-large-shapes">
            <p>icon-large-shapes</p>
        </p>
        
        <p title="icon-large-smartart"  iconCls="icon-large-smartart">
            <p>icon-large-smartart</p>
        </p>
        <p title="icon-large-chart"  iconCls="icon-large-chart">
            <p>icon-large-chart</p>
        </p>
    </p>
</body>
<html>

4、创建标签页（Tabs）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>创建标签页（Tabs）</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
</head>
<body>
    <p class="easyui-tabs" fit="false" style="width: 100%;height: 100%;" plain="false" >
        <p title="页签1">
            <p>width number 选项卡容器宽度。  </p>
            <p>height number 选项卡容器高度。 </p>
            <p>plain boolean 设置为true时，将不显示控制面板背景。 </p>
            <p>fit boolean 设置为true时，选项卡的大小将铺满它所在的容器。 </p>
            
        </p>
        <p title="页签2" selected="2">
            <p>selected number 初始化选中一个tab页。 </p>
        </p>
        <p title="页签3">
            <p>showHeader boolean 设置为true时，显示tab页标题。  </p>
        </p>
    </p>
</body>
<html>

5、动态添加标签页（Tabs）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>动态添加标签页（Tabs）</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <style>
        .rtitle{
            font-size:18px;
            font-weight:bold;
            padding:5px 5px;
            background:#336699;
            color:#fff;        }    </style>
</head>
<body>
    <p style="margin-bottom:10px" class="rtitle">
        <a href="#" class="easyui-linkbutton" onclick="addTab(&#39;bokeyuan&#39;,&#39;http://www.cnblogs.com/jianyeLee/p/5656968.html&#39;)">bokeyuan</a>
        <a href="#" class="easyui-linkbutton" onclick="addTab(&#39;jquery&#39;,&#39;http://jquery.com/&#39;)">jquery</a>
        <a href="#" class="easyui-linkbutton" onclick="addTab(&#39;easyui&#39;,&#39;http://jeasyui.com/&#39;)">easyui</a>
    </p>
    <p id="tt" class="easyui-tabs" style="width: 100%;height: 90%;" fit="false" pain="true">
        <p title="Home">
        </p>
    </p>
</body>
<html>

function addTab(title, url){    if ($(&#39;#tt&#39;).tabs(&#39;exists&#39;, title)){
        $(&#39;#tt&#39;).tabs(&#39;select&#39;, title);
    } else {        var content = &#39;<iframe scrolling="auto" frameborder="0"  
    src="&#39;+url+&#39;" style="width:100%;height:100%;"></iframe>&#39;;
        $(&#39;#tt&#39;).tabs(&#39;add&#39;,{
            title:title,
            content:content,
            closable:true
        });
    }
}

6、添加自动播放标签页（Tabs）

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>添加自动播放标签页（Tabs）</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <script>
        $(function(){            var index = 0;            var t = $(&#39;#tt&#39;);            var tabs = t.tabs(&#39;tabs&#39;);
            setInterval(function(){
                t.tabs(&#39;select&#39;, tabs[index].panel(&#39;options&#39;).title);
                index++;                if (index >= tabs.length){
                    index = 0;
                }
            }, 1000);
        });    </script></head><body>
    <p id="tt" class="easyui-tabs" style="width: 100%;height: 100%;" fit="false" pain="true">
        <p title="s1">
            <img src="../../../img/shirt1.gif" />
        </p>
        <p title="s2">
            <img src="../../../img/shirt2.gif" />
        </p>
        <p title="s3">
            <img src="../../../img/shirt3.gif" />
        </p>
        <p title="s4">
            <img src="../../../img/shirt4.gif" />
        </p>
        <p title="s5">
            <img src="../../../img/shirt5.gif" />
        </p>
    </p></body><html>

7、创建 XP 风格左侧面板

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>创建 XP 风格左侧面板</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <style>
        .demo{
            width:200px;height:auto;padding:10px;
        }
        .panel-body{
            background:#f0f0f0;
        }
        .panel-header{
            background:#fff url(&#39;../../../img/panel_header_bg.gif&#39;) no-repeat top right;
        }
        .panel-tool-collapse{
            background:url(&#39;../../../img/arrow_up.gif&#39;) no-repeat 0px -3px;
        }
        .panel-tool-expand{
            background:url(&#39;../../../img/arrow_down.gif&#39;) no-repeat 0px -3px;
        }
    </style></head><body>
    <p style="width:200px;height:auto;background:#7190E0;padding:5px;">
        <p class="easyui-panel demo" title="工具" collapsible="true">
            <p>content</p>
        </p>
        <br/>
        <p class="easyui-panel demo" title="文件夹" collapsible="true" collapsed="true">
            <p>content</p>
        </p>
        <br/>
        <p class="easyui-panel demo" title="地址" collapsible="true" collapsed="true">
            <p>content</p>
        </p>
        <br/>
        <p class="easyui-panel demo" title="详情" collapsible="true" collapsed="true">
            <p>content</p>
        </p>
    </p></body><html>

这些代码布局都不需要什么js，直接使用class即可；

以上就是easyui datagrid分页 4、easyUI-七种布局（layout）的内容，更多相关内容请关注PHP中文网（www.php.cn）！

初识通用数据库操作类前端easyui-datagrid，form（php），easyuidatagrid

jQuery EasyUI 教程-Panel（面板）

浅析jQuery EasyUI中的tree使用指南

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

您如何防止与会议有关的跨站点脚本（XSS）攻击？Apr 23, 2025 am 12:16 AM

要保护应用免受与会话相关的XSS攻击，需采取以下措施：1.设置HttpOnly和Secure标志保护会话cookie。2.对所有用户输入进行输出编码。3.实施内容安全策略(CSP)限制脚本来源。通过这些策略，可以有效防护会话相关的XSS攻击，确保用户数据安全。

您如何优化PHP会话性能？Apr 23, 2025 am 12:13 AM

优化PHP会话性能的方法包括：1.延迟会话启动，2.使用数据库存储会话，3.压缩会话数据，4.管理会话生命周期，5.实现会话共享。这些策略能显着提升应用在高并发环境下的效率。

什么是session.gc_maxlifetime配置设置？Apr 23, 2025 am 12:10 AM

thesession.gc_maxlifetimesettinginphpdeterminesthelifespanofsessiondata，setInSeconds.1）它'sconfiguredinphp.iniorviaini_set（）.2）abalanceIsiseededeedeedeedeedeedeedto to to avoidperformance andununununununexpectedLogOgouts.3）

您如何在PHP中配置会话名？Apr 23, 2025 am 12:08 AM

在PHP中，可以使用session_name()函数配置会话名称。具体步骤如下：1.使用session_name()函数设置会话名称，例如session_name("my_session")。2.在设置会话名称后，调用session_start()启动会话。配置会话名称可以避免多应用间的会话数据冲突，并增强安全性，但需注意会话名称的唯一性、安全性、长度和设置时机。

您应该多久再生一次会话ID？Apr 23, 2025 am 12:03 AM

会话ID应在登录时、敏感操作前和每30分钟定期重新生成。1.登录时重新生成会话ID可防会话固定攻击。2.敏感操作前重新生成提高安全性。3.定期重新生成降低长期利用风险，但需权衡用户体验。

如何在PHP中设置会话cookie参数？Apr 22, 2025 pm 05:33 PM

在PHP中设置会话cookie参数可以通过session_set_cookie_params()函数实现。1)使用该函数设置参数，如过期时间、路径、域名、安全标志等；2)调用session_start()使参数生效；3)根据需求动态调整参数，如用户登录状态；4)注意设置secure和httponly标志以提升安全性。