select多选 ztree多选

最新推荐文章于 2021-06-04 06:16:41 发布
最新推荐文章于 2021-06-04 06:16:41 发布
阅读量756 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： ajax 文章标签： csrf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/github_37213295/article/details/90601139
本文介绍了在Ztree中进行多选和单选操作的方法，包括选择值的获取与设置、初始化选择状态、点击发送请求、获取所有子节点及清空选中值的实现。通过设置checked参数，可以实现节点的全选和全取消选中。提供了代码示例以供参考。

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

  • 安全 
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>

 

js

//保存成功后清空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);
          

        }
    })

 

Select 下拉树 Ztree
03-17
select实现下拉树形菜单结构
select2ztree.zip
09-23
2. 初始化Select2：使用Select2的配置选项，设置其为多选模式，并禁用原生的搜索功能，因为我们将在ZTree中实现搜索。 3. 创建ZTree：将ZTree的节点数据作为JSON对象传递给ZTree初始化方法，配置相应的参数，如显示...
zTree实现多选树
牛栏山矿泉水
05-18 668
zTree实现多选树 1、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;多选树&lt;/title&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;
Ztree多选
lovely960823的博客
10-22 1197
记录一下Ztree的实现 效果图 上代码 <link rel="stylesheet" href="/static/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script src="/static/ztree/js/jquery.ztree.core.js"></script> <s...
html ztree选中状态,ztree-select.html
weixin_33739480的博客
06-04 422
//选择事件function S_NodeCheck(e, treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj(treeId),nodes = zTree.getCheckedNodes(true);var ids = '', names = '';for (var i = 0; i < nodes.length; i++) {ids ...
ztree的select设置，完笔
weixin_43328357的博客
07-03 2821
bootastrapTable的配置参观作者的其他文章。 BootStrapTable的基础配置 先上图，是你想要的继续看 [外链图片转存失败(img-r7tUBV5L-1562138166231)(htteeps://img-blog.csdnimg.cn/20190703151456841.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5na...
zTree实现多选下拉框
08-14
2. **下拉框的实现**：在HTML中，我们可以使用`<select>`元素创建一个下拉框，但zTree本身并不直接支持下拉效果。为了达到下拉框的效果，通常会结合其他库如jQuery UI的`dialog`或自定义CSS样式来模拟。当点击下拉...
bootstrap-select2-ztree.zip
05-20
在“select2-ztree”项目中，Select2 被用来创建一个可搜索、可多选的下拉框，用户可以通过这个下拉框来选择需要的项。 ZTree 是一个基于jQuery的树形插件，它支持数据动态加载、拖拽、节点编辑等多种功能。在与...
layui下拉多选,下拉选择多选
最新发布
09-13
本话题主要关注的是Layui中的一个关键组件——下拉多选框（Multiple Select）。下面将详细阐述如何在Layui框架下实现下拉多选功能，并探讨其相关的知识点。 1. Layui的基本概念 Layui 是一套采用自身模块规范编写...
jQuery+bootstrap+ztree多选下拉树
08-14
事先声明下（代码非常杂乱，并未写成插件，方法都是非常low的方法），这个是模拟bootstrap的插件select-picker插件完成的多选下拉树，类似picker中，这个也可以输入进行查询，因为项目特殊需要，里面都是直接id命名死并使用的，如果你的项目也有这种特殊需求，可以拿来看看，只筛选到最后一个级别，（不过作用和风格都和bootstrap类似）自己看着下载吧
基于ztree开发的下拉树控件ztree-select
05-10
基于最新版本ztree而开发的下拉树插件，还拥有搜索功能
ztree-select下拉框
06-19
基于ztree树的下拉选择框，每次展开都会重新生成下拉树结构，可根据属性绑定数据源，加载出树结构也会相对应的勾选上，相对于修改时就会是个选好的手法。
结合ztree的下拉框树形结构数据多选，单选
07-12
结合ztree制作的下拉框，数据多级显示，通过配置实现多选或单选，数据可以是固定数据或ajax动态加载
Ztree jquery 下拉数 下拉列表（多选）
11-19
Ztree jquery 下拉数 下拉列表（多选） 适用 方便，提高开发效率
jQuery插件zTree实现的多选树效果示例
10-20
主要介绍了jQuery插件zTree实现的多选树效果,结合实例形式分析了jQuery树形插件zTree实现多选树效果的具体操作步骤与相关注意事项,需要的朋友可以参考下
ztree树插件- 树形多选结构展示
chang@博客
08-20 2243
1、首先导入Bootstrap js、样式 <link rel="stylesheet" href="../../static/common/ztree/css/metroStyle/metroStyle.css" /> <script src="/static/common/ztree/js/jquery.ztree.all.min.js"></script>...
ztree shift多选
bdy9600的专栏
03-22 944
callback : { onClick : onClickHandle }//回调函数中写 /* 点击事件 */ function onClickHandle(event, treeId, treeNode) {      var preClickedNode = window.preClickedNode;  //获得最后一次点击的节点          wi
select+ztree自定义下拉框集成ztree
热门推荐
qq_36608921的博客
05-22 1万+
效果图： 一、需要引入文件有：jquery.js、zTree/2.6/zTreeStyle.css、zTree/2.6/jquery.ztree-2.6.min.js        注意引入先后顺序要先引入jquery.js； 二、html代码： &lt;input type="text" name="department_name" id="department_name" value...
zTree ctrl 多选功能
公子七
09-29 1541
原来有人在网上写了ztree的功能实现，思路是正确的，不过写的不对奥，尤其是对树进行拖拽后，zTree的tId是按顺序生成的，拖拽之后shift就不好用了，自己重新写了一个。使用全局变量preClickedNode！ callback : { //回调函数 onCheck: zTreeOnCheck }//处理shift键多节点勾选
zTree创建可多选的下拉框控件教程
#### 五、zTree多选下拉框的应用场景 1. **数据管理**：在需要对大量数据进行分组管理，比如权限管理、菜单管理等。 2. **表单提交**：在表单中使用多选下拉框，让用户可以选择多个项目提交。 3. **查询筛选**：在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值