easyui两个控件学习

来源：互联网发布：曲阜党政网络问政平台编辑：程序博客网时间：2024/05/01 22:12

在编写网页管理工具的时候，可以使用easyui来帮助来布局。其中还有很多的比较好玩的插件。基本上能满足开发服务器管理后台。

下载

下载地址

引入

在自己的html模板前面添加下面的几句话

    <!-- easyui -->    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.5/themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.5/themes/icon.css">    <script type="text/javascript" src="/static/jquery-easyui-1.5/jquery.min.js">    </script>    <script type="text/javascript" src="/static/jquery-easyui-1.5/jquery.easyui.min.js">    </script>

基本布局

参考
这个布局是将窗口分为顶，左，中，右，底。

    <div class="easyui-layout" style="width:700px;height:350px;">        <div data-options="region:'north'" style="height:50px"></div>        <div data-options="region:'south',split:true" style="height:50px;"></div>        <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">            <table class="easyui-datagrid"                    data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">                <thead>                    <tr>                        <th data-options="field:'itemid'" width="80">Item ID</th>                        <th data-options="field:'productid'" width="100">Product ID</th>                        <th data-options="field:'listprice',align:'right'" width="80">List Price</th>                        <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>                        <th data-options="field:'attr1'" width="150">Attribute</th>                        <th data-options="field:'status',align:'center'" width="60">Status</th>                    </tr>                </thead>            </table>        </div>    </div>

手风琴

参考
这个控件像最早的QQ的好友界面。这个功能用于做后台管理菜单蛮好用的。

        <div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">            <ul class="easyui-tree">                <li>                    <span>Foods</span>                    <ul>                        <li>                            <span>Fruits</span>                            <ul>                                <li>apple</li>                                <li>orange</li>                            </ul>                        </li>                        <li>                            <span>Vegetables</span>                            <ul>                                <li>tomato</li>                                <li>carrot</li>                                <li>cabbage</li>                                <li>potato</li>                                <li>lettuce</li>                            </ul>                        </li>                    </ul>                </li>            </ul>        </div>

全部组件

参考文档

0 0