Django使用EasyUI_django如何使用easyui-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38449792/article/details/78564013

本文介绍了如何在Django项目中使用EasyUI进行布局设计。通过设置$.fn.layout.defaults调整默认配置，实现北、南、东、西和中间五个区域的灵活布局。布局可以嵌套，方便构建复杂的页面结构。同时，文章还提及了EasyUI的树控件，包括其基本使用、数据格式和动态获取数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

布局
使用$.fn.layout.defaults重写默认值对象。
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:200px;">
    <ul id ="tt" class="easyui-tree" ></ul>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
<div id="category-form-dialog">
    <form action="">
            name:<input class="easyui-validatebox" type="text" id="name" data-options="required:true" /><br>
            parent:<input id="cc" class="easyui-combotree" style="width:200px;"   >
        </select>
    </form>
</div>
</body>

创建布局的几种方法:

<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>

使用完整页面创建布局:

<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>

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

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

<ul id ="tt" class="easyui-tree" ></ul>
#jsp代码
    $('#tt').tree({
                url: '/goods/treeTest',
            });

动态获取树：

@csrf_exempt
def treeTest(request):

    try:
        id = int(request.POST['id'])
        treeDict = []
        data = Category.objects.filter(parent=Category.objects.get(pk=id))
        for en in data:
            d = {}
            d['id'] = en.id
            d['text'] = en.name
            d['state'] = 'closed'
            treeDict.append(d)
    except:
        data = Category.objects.filter(parent=None)
        treeDict = []
        for en in data:
            d = {}
            d['id'] = en.id
            d['text'] = en.name
            d['state'] = 'closed'
            treeDict.append(d)
    return HttpResponse(json.dumps(treeDict), 'treeTest')

树控件数据格式化
每个节点都具备以下属性：

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")