Django使用EasyUI

来源：互联网发布：知乎live的入口编辑：程序博客网时间：2024/06/13 14:17

布局
使用$.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_exemptdef 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")

阅读全文

0 0