Django_使用easyui

最新推荐文章于 2024-05-19 09:44:39 发布

yaomu219

最新推荐文章于 2024-05-19 09:44:39 发布

阅读量449

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/yaomu219/article/details/78563942

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

效果
这里写图片描述

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

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

<ul id ="tt" class="easyui-tree" ></ul>

            $('#tt').tree({
                url: '/goods/treeTest',
            });

views:

@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')

工具按钮

            $('body').layout('panel','west').panel({
                tools:[
                    {
                        iconCls:"icon-reload",
                        handler:function(){
                            $('#tt').tree('reload');
                        }
                    },{
                        iconCls:"icon-add",
                        handler:function () {
                            $('#category-form-dialog').dialog('open')
                        }
                    }
                ]
            })

dialog

<div id="category-form-dialog"></div>

$('#category-form-dialog').dialog({
                title:"商品类别列表",
                width:400,
                height:200,
                closed:true,
                modal:true,
                buttons:[
                    {
                        iconCls:'icon-add',
                        handler:function () {
                            alert('add!')
                        }
                    }
                ]
            })

yaomu219

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Django_使用easyui

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

扫一扫