select多选 ztree多选

关注

原创最新推荐文章于 2026-05-23 17:13:16 发布 865 阅读 AI 写同款· GEO 优化 ›

搜索条件带树形下拉框（ztree实现）查询条件中带有树形下拉框，使用ztree实现。（有人关注，极大的激发了我的创作激情）。1.准备ztree相关的js，css等。（可以去我的资源中下载）2.编写代码<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="conte... 阅读详情

安全

traditional:true,  //加上此项可以传数组

$.ajax({
                type : "POST",
                url  : "/system_get_subject_user/",
                data : {
                    "subjectId": curId,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                dataType : 'json',
                cache : false,
                success : function(result){
                    console.log(result)
    }
})

或者

# 传输父子数据
@csrf_exempt
def system_get_subject_user(request):
    result = {}
    flag = '1'
    fathlist = []
    sub_list = []
    # 获取到要取值的数据id
    subjectId = request.POST.get('subjectId')
    result['sublist'] = sublist
    result['fathlist'] = fathlist
    print(result)
    result = json.dumps(result)
    return HttpResponse(result, content_type="application/json")

select选择，多选值的获取和设置

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select name="Role" id="role" multiple="multiple" >
		<option value="1">你</option>
		<option value="2">我</option>
		<option value="3">他</option>
	</select>
	<button>保存</button>
</body>
</html>
<script src="jquery-1.12.1.min.js"></script>

//保存成功后清空select
$('#role').val("").trigger('change');
$("#role").trigger("liszt:updated");

//设置多选初始值
	var arr=[1,3]
    $('#role').val(arr).trigger('change');

	//获取多选值的val
	$('button').on('click',function(){
		var o=document.getElementById('role').getElementsByTagName('option');
		            var all="";
		            console.log(o[1]);
		            for(var i=0;i<o.length;i++){
		                if(o[i].selected){
		                    all+=o[i].value+",";
		                }
		            }
		all = all.substr(0, all.length - 1);
		console.log(all)
	})



 $.ajax({
        type: "GET",
        url: "/dept_role_info/",
        data: {},
        dataType: 'json',
        cache: false,
        success: function (result) {
            //角色多选
            var role = result.role_list;
            var Rolestr = '';
            $('#Role').empty()
            role.forEach(function (v, i, a) {
                Rolestr += '<option value="' + a[i].id + '">' + a[i].Name + '</option>'
            })
            $('#Role').append(Rolestr)
            $("#Role").trigger("liszt:updated") //动态加载select选项，更新
           
        }
    });

ztree多选获取，设置初始选择

//设置初始选中
t = $.fn.zTree.init(t, setting, zNodes);
var menuIds = [1,200];
			for(var i = 0; i < menuIds.length; i++) {
				var node = t.getNodeByParam("id", menuIds[i]);
				if(node != null) {
					t.checkNode(node, true)
				}
			}

//获取选中的树节点
var treeObj = $.fn.zTree.getZTreeObj("manageDept"),
            nodes = treeObj.getCheckedNodes(true),
            Dept = [];
        for (var i = 0; i < nodes.length; i++) {
            Dept.push(nodes[i].id);
            //最后一级子部门的id
            if(!nodes[i].isParent){
                Dept+=nodes[i].id+','
            }
        }

ztree单选获取，设置初始

 var DeptModifysetting = {
        check: {
            enable: true,
            chkStyle: "radio",  //单选框
            radioType: "all"   //对所有节点设置单选
        },
        view: {
            dblClickExpand: true,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            onClick: zTreeOnClick
        }

    };
    var DeptModifyt = $("#deptModifyTree");
    DeptModifyt = $.fn.zTree.init(DeptModifyt, DeptModifysetting, zNodes);

//设置初始
var DeptModifyt = $("#deptModifyTree");
        DeptModifyt = $.fn.zTree.init(DeptModifyt, DeptModifysetting, zNodes);
        var node = DeptModifyt.getNodeByParam("id", curPId);
        if (node != null) {
            DeptModifyt.checkNode(node, true)
        }

//获取
var DeptModifyt = $.fn.zTree.getZTreeObj("deptModifyTree");
        var DeptPDept = DeptModifyt.getCheckedNodes();
        console.log(DeptPDept)
        if (DeptPDept.length != 0) {
            var DeptPDeptId = DeptPDept[0].id
        } else {
            $("#modify_dept_modal .alert-error").html("<button class='close' data-dismiss='alert'></button>{{ text.empty_pdept }}");
            $("#modify_dept_modal .alert-error").show();
            return;
        }
        var peram = {"DeptID": DeptID, "DeptName": DeptName, "DeptPDept": DeptPDeptId}

html



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <link rel="stylesheet" href="/static/zTree/css/metroStyle/metroStyle.css">
</head>
<body>
	<ul id="deptModifyTree" class="ztree" style="width:200px; overflow:auto;"></ul>
</body>
</html>
<script src="/static/zTree/js/jquery.ztree.core.js"></script>

<script src="/static/zTree/js/jquery.ztree.excheck.js"></script>

<script src="/static/zTree/js/jquery.ztree.exedit.js"></script>

ztree单选：点击发送请求

var setting = {
      
        check: {
            enable: true,
            chkStyle: "radio",  //单选框
            radioType: "all"   //对所有节点设置单选
        },
        view: {
            showIcon: false,
            dblClickExpand: true,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
       callback: {
            onClick:function (e,treeId,treeNode,clickFlag) {     //用于捕捉勾选时触发
              
                alert('点击')
            },
			onCheck:function(){
				alert('选择')
			},
			 beforeCheck:function(){
			 	alert('选择后')
			 }
        }

    };

    var zNodes = [
            { name:"父节点1 - 展开", 
                children: [
                    { name:"父节点11 - 折叠",
                        children: [
                            { name:"叶子节点111"},
                            { name:"叶子节点112"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点113"},
                            { name:"叶子节点114"}
                        ]},
                    { name:"父节点12 - 折叠",
                        children: [
                            { name:"叶子节点121"},
                            { name:"叶子节点122"},
                            { name:"叶子节点123"},
                            { name:"叶子节点124"}
                        ]},
                    { name:"父节点13 - 没有子节点", isParent:true}
                ]},
            { name:"父节点2 - 折叠",
                children: [
                    { name:"父节点21 - 展开", open:true,
                        children: [
                            { name:"叶子节点211"},
                            { name:"叶子节点212"},
                            { name:"叶子节点213"},
                            { name:"叶子节点213"},
                            { name:"叶子节点213"},
                            { name:"叶子节点213"},
                            { name:"叶子节点213"},
                            { name:"叶子节点213"},
                            { name:"叶子节点213"},
                            { name:"叶子节点213"},
                            { name:"叶子节点213"},
                            { name:"叶子节点213"},
                            { name:"叶子节点214"}
                        ]},
                    { name:"父节点22 - 折叠",
                        children: [
                            { name:"叶子节点221"},
                            { name:"叶子节点222"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点223"},
                            { name:"叶子节点224"}
                        ]},
                ]},
            { name:"父节点3 - 没有子节点", isParent:true},
             {name:"父节点4 - 展开"},
              {name:"父节点5 - 展开"}
 
        ];
 
    var t = $("#manageTree");
    t = $.fn.zTree.init(t, setting, zNodes);

<!DOCTYPE html>


<html lang="zh-cn"> 



<head>

    <meta charset="utf-8"/>

    <title>test</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>

    <meta content="" name="description"/>

    <meta content="" name="author"/>


    <link rel="stylesheet" href="zTree/css/metroStyle/metroStyle.css">

 
<style> 
div#rMenu {
    position: absolute;
    visibility: hidden;
    top: 0;
    text-align: left;
    padding: 4px;
}

div#rMenu a {
    padding: 3px 15px 3px 15px;
    background-color: #cad4e6;
    vertical-align: middle;
    display: block;
    opacity: 0.9;
}
</style>
</head>



<body class="page-header-fixed page-sidebar-fixed">


<div class="page-container">

 

    <div class="page-content">

        <!-- BEGIN PAGE CONTAINER-->

        <div class="container-fluid">

            <!-- BEGIN PAGE HEADER-->


            <!-- END PAGE HEADER-->

            <!-- BEGIN PAGE CONTENT-->

            <div class="row-fluid">

                <div class="span12"> 
                    <div class="row-fluid">

                        <div class="span4" id="jio">
                            <ul id="manageTree" class="ztree" style="width:800px; overflow:auto;"></ul>
                            
                        </div>


                    </div>
                </div>

                <!-- END EXAMPLE TABLE PORTLET-->

            </div>

        </div>

        <!-- END PAGE CONTENT -->

    </div>

    <!-- END PAGE CONTAINER-->

</div>
</div>
</body>
</html>
<script src="jquery-1.12.1.min.js" type="text/javascript"></script>

<script src="zTree/js/jquery.ztree.core.js"></script>

<script src="zTree/js/jquery.ztree.excheck.js"></script>

<script src="zTree/js/jquery.ztree.exedit.js"></script>

ztree获取所有的子节点

 var ChildId = '';
 ChildId = getAllChildrenNodes(treeNode, ChildId);
function getAllChildrenNodes(treeNode, result) {
        if (treeNode.isParent) {
            var childrenNodes = treeNode.children;
            if (childrenNodes) {
                for (var i = 0; i < childrenNodes.length; i++) {
                    result += childrenNodes[i].id + ',';
                    result = getAllChildrenNodes(childrenNodes[i], result);
                }
            }
        }
        return result;
    }

ztree清空所有选中值

参数说明：
checked = true 表示勾选全部节点
checked = false 表示全部节点取消勾选
代码示例如下：

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.checkAllNodes(false);

ztree设置

不选树

//部门不选树
    var settingUser = {
        check: {
            enable: false
        },
        view: {
            showIcon: false,
            showLine: true,
            dblClickExpand: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: 0
            }
        },
        callback: {
            onClick: zTreeOnClick
        }

    };

    function zTreeOnClick(event, treeId, treeNode) {
        console.log(treeNode.id)
        console.log(treeNode)
        var ChildId = '';
        ChildId = getAllChildrenNodes(treeNode, ChildId);
        //去掉最后一个字符，
        ChildId = ChildId.substring(0, ChildId.lastIndexOf(','));
        var ChildArr=ChildId.split(',')
        ChildArr.push(treeNode.id)
        
        console.log(ChildArr)
    }

    //获取选中节点的所有子节点
    function getAllChildrenNodes(treeNode, result) {
        if (treeNode.isParent) {
            var childrenNodes = treeNode.children;
            if (childrenNodes) {
                for (var i = 0; i < childrenNodes.length; i++) {
                    result += childrenNodes[i].id + ',';
                    result = getAllChildrenNodes(childrenNodes[i], result);
                }
            }
        }
        return result;
    }

单选树

//部门列表树
    var settingDept = {
        check: {
            enable: true,
            chkStyle: "radio",  //单选框
            radioType: "all"   //对所有节点设置单选
        },
        view: {
            dblClickExpand: true,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
			beforeCheck:zTreeOnClickRadio
        }

    };
 function zTreeOnClickRadio(event, treeId, treeNode) {
}

多选树

//部门多选树
    var settingCheckAll = {
        check: {
            enable: true
        },
        view: {
            showIcon: false,
            showLine: true,
            dblClickExpand: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: 0
            }
        }

    };

动态渲染ztree

    var tUser = $("#userTree");
    var tDept = $("#deptTree");
    var pDept = $("#pDeptTree");


  $.ajax({
        type: "GET",
        url: '/xxx/',
        data: {},
        dataType: 'json',
        cache: false,
        success: function (result) {
            console.log(result)
            var deptList=result.dept_list
            deptList.forEach(function(v,i,a){ 
                zNodesDept.push({
                    "id":a[i].id,
                    "pId":a[i].PDept,
                    "name":a[i].DeptName,
                    "open":0
                })
      
            })
            tUser = $.fn.zTree.init(tUser, settingUser, zNodesDept);
            tDept = $.fn.zTree.init(tDept, settingCheckAll, zNodesDept);
          

        }
    })

收录于