Python_Django 使用easuUI的Layout(布局)和Tree（树）的使用

1.EasyUI 的介绍：

EasyUI -- Layout（布局）将布局容器分成了5个区域，分别是：east（东）、west（西）、south（南）、north（北）和center（中）。center（中）区域是必须的，其他边缘区域都是可选的。每个边缘区域都可以通过拖拽的方式改变大小，也可以点击折叠按钮将面板折叠起来。EasyUI 的布局是很灵活的，可以根据用户的需求，使用不同的嵌套，构建复杂的布局。

第二章创建布局的几种方法

1.为<div/>标签增加名为'easyui-layout'的类ID。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</div>

2. 使用完整页面创建布局

<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>

Tree（树）

使用$.fn.tree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

使用案例

树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。

<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>

树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

<ul id="tt"></ul>

使用loadFilter函数处理来自Web Services的JSON数据。

$('#tt').tree({    
    url: ...,    
    loadFilter: function(data){    
        if (data.d){    
            return data.d;    
        } else {    
            return data;    
        }    
    }    
});

树控件数据格式化

每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

一些案例：

Python中json的代码：

treeDict = [
        {
            "id": 1,
            "text": "Folder1",
            "iconCls": "icon-save",
            "children": [{
                "text": "File1",
                "checked": "true"
            }]
            },{
                "id": 1,
                "text": "Folder1",
                "iconCls": "icon-save",
                "children": [{
                    "text": "File1",
                    "checked": "true"
            }]
            }
        ]

    return HttpResponse(json.dumps(treeDict),"application/json")

页面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="easyui/themes/icon.css">
    <link type="text/css" rel="stylesheet" href="easyui/themes/default/easyui.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
        <h1 style="text-align: center">MIMI商品管理系统</h1>
    </div>
    <div data-options="region:'west',title:'商品分类',split:true" style="width:300px;">
        <ul id="categoryTree">

        </ul>
    </div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
 <script type="text/javascript">
        $(function () {
            //create tree
            $('#categoryTree').tree({
                url:'/goods/categoryTree'
            });
  </script>
</body>
</html>