jQuery select + zTree 插件扩展

早晨阳光一般暖

已于 2022-07-01 00:10:02 修改

阅读量1.7k

点赞数

分类专栏： JQuery javascript 文章标签： javascript jquery

于 2020-08-07 09:00:58 首次发布

本文链接：https://blog.csdn.net/LZY_1993/article/details/107854344

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JQuery

2 篇文章 0 订阅

订阅专栏

1、效果

演示地址：TestSelectZTree

Select2 插件是我的最爱，但是实现多级分组的时候不够完美。所有样式略模仿select2来开发这个扩展插件

2、说明

使用方法说明：
    1.此插件基于jQuery编写，使用时需要先导入jQuery
    2.同时基于 zTree 的jquery.ztree.core.js和jquery.ztree.exhide.js
    3.使用
      $("#select")
       .selectZTree({"data": zNodes, width: 150, showSearch: true})
       .on("change", function (e, data) {
           console.log(e);
           console.log(data);
           console.log($(this).val());
       });
     $("#select").selectZTreeSet("id"); //设置选中值
     var item = $("#select").selectZTreeGet(); //获取选中值

 参数说明：
    cfg:{
        showSearch: 显示搜索,
        closeOnSelect: 控制选择后是否关闭下拉菜单，默认：true,
        selectLevel: 选择级别，-1、表示只有末节点可选(没有子节点的才能选中)，0、表示第一级开始及以下可选择，以下类推,
        withInitValue: 设置初始值，默认：true,
        data: zTree数据,
        placeholder: 未选择数据是的占位符,
        onReady: 初始化完成的回调,
        onOpen: 打开的回调,
        onClose: 关闭的回调,
        onSelected: 选中后的回调,
        width: 宽,
        key:{
            idKey: ztree配置，节点数据中保存唯一标识，默认“id”,
            pIdKey: ztree配置，节点数据中保存其父节点唯一标识的属性名称，默认“pId”,
            rootPId: ztree配置，用于修正根节点父节点数据，默认“0”,
            name: ztree配置，用于标识节点数据名称，默认“name”,
        }
    }

  ~idKey,pIdKey,rootPId属于zTree下simpleData的配置参数，本插件使用zTree简单数据模式

3、使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestSelectZTree</title>
    <link rel="stylesheet" href="../static/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="../static/selectZTree/jquery.select.zTree.v1.0.css" type="text/css">
    <script src="../static/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../static/zTree_v3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../static/zTree_v3/js/jquery.ztree.exhide.js"></script>
    <script type="text/javascript" src="../static/selectZTree/jquery.select.zTree.v1.0.js"></script>
    <script>
        var zNodes = [
            {id: 1, pId: 0, name: "父1 - 展开", open: true},
            {id: 11, pId: 1, name: "父11 - 折叠"},
            {id: 111, pId: 11, name: "叶子节点节点节点111"},
            {id: 113, pId: 11, name: "叶子节点节点节点113"},
            {id: 1131, pId: 113, name: "叶子节点节点节点1131"},
            {id: 1132, pId: 113, name: "叶子节点节点节点1132"},
            {id: 1133, pId: 113, name: "叶子节点节点节点1133"},
            {id: 114, pId: 11, name: "叶子节点节点节点114"},
            {id: 12, pId: 1, name: "父12 - 折叠"},
            {id: 121, pId: 12, name: "叶子节点节点节点121"},
            {id: 122, pId: 12, name: "叶子节点节点节点122"},
            {id: 123, pId: 12, name: "叶子节点节点节点123"},
            {id: 124, pId: 12, name: "叶子节点节点节点124"},
            {id: 13, pId: 1, name: "父13"},
            {id: 2, pId: 0, name: "父2 - 折叠"},
            {id: 21, pId: 2, name: "父21 - 展开", open: true},
            {id: 211, pId: 21, name: "叶子节点节点节点211"},
            {id: 212, pId: 21, name: "叶子节点节点节点212"},
            {id: 213, pId: 21, name: "叶子节点节点节点213"},
            {id: 214, pId: 21, name: "叶子节点节点节点214"}
        ];


        $(document).ready(function () {

            $("#select")
                .selectZTree({
                    data: zNodes,
                    width: 150,
                    hasSearch: true,
                    closeOnSelect: false,
                    placeholder: "下拉选中",
                    onOpen: function (ele) {
                        console.log(ele)
                        console.log("open")
                    },
                    onClose: function (ele) {
                        console.log(ele)
                        console.log("onClose")
                    },
                    onSelected: function (ele, val) {
                        console.log(ele)
                        console.log(val)
                        console.log("onSelected")
                    }
                })
                .on("change", function (e, data) {
                    console.log(e);
                    console.log(data)
                    console.log($(this).val())
                });

        });

    </script>
</head>
<body style="height: 2000px">
    <select id="select" title="选择"> </select>
</body>
</html>

3、源码
https://gitee.com/wsitm/web_test