记一次痛苦的js经历。从MultipleTreeSelect.js到自定义下拉框再到bootstrap-select.js-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42726668/article/details/99674309

首先声明在下是一个走java路线的小菜鸟，几乎没写过js。第一次写写的我很难受。
开始吧

首先是使用这个MultipleTreeSelect.js
MultipleTreeSelect.js是根据jquery.ztree.all.js和select.js继承的一款插件
感觉功能还是很强大，使用方法比较简单，但是有坑。待会说

//首先引入js文件
<script type="text/javascript" src="static/js/MultipleTreeSelect.js"></script>

<div class="col-lg-5">
                            <input type="text" id="departmentid" class="form-control form-input" value="jasontext" placeholder="请选择"/>
                        </div>

//定义一个数组待会用来当做数据
var zNodes = [
{id: 180845 , pId: 0 , name: "国家电投集团贵州金元股份有限公司（本部）"},
		{id: 172902 , pId: 172901 , name: "国家电投集团贵州金元股份有限公司（母公司）", open: true},
		{id: 172904 , pId: 172901 , name: "国家电投集团贵州金元威宁能源发展有限公司（母公司）", open: true},
		{id: 172913 , pId: 172901 , name: "aaa", open: true},
		{id: 199396 , pId: 172901 , name: "bbb"},
		{id: 172903 , pId: 180845 , name: "ccc"},
		{id: 172924 , pId: 180845 , name: "ddd"},
		{id: 172926 , pId: 180845 , name: "eee"}
]    
//定义插件的对象或者说数据
var default1 = {
        zNodes: zNodes,
        height:233   // 默认自定义下拉框高度
    }
 //这是底层的对象，我们可以看到有一些默认的属性值，但是这个数组使我们必须要赋值的
default1 = {
    var $target_element;
    var defaults = {
      /*  textLabel: "",*/
        zNodes: [],
        async: { //异步
            enable: false,
            url: ""
        },
        callback:{ //回调函数
            onCheck: function (treeNode) {

            }
        },
        chkStyle: "checkbox" //多选
        ,radioType:"all", //圆圆的
        height:'auto' //高度
    }

 <!--调用插件方法渲染-->
    $(document).ready(function () {
		$("#departmentid").drawMultipleTree(default1);
    });

使用方法就是这么简单。那现在就应该说说上面说的坑了。也可能我没搞懂，如果有懂的还请不吝指教。
我们工作中，数据肯定是根据数据库查询动态赋予的。那么这时候这个插件就坑死我了（八成是我不懂，一个开源的插件不该这么垃圾），我发现他只能渲染一次，不管接下来数据怎么变换，而且传入插件渲染方法的对象default1中数组的数据已经改变，但是最后渲染出来的总是第一次的数据。只能一点一点debug进去。在这里插入图片描述
这个时候就发现问题出现在这个if语句中，于是我把判断去掉，直接堆栈溢出了。
最后放弃这个插件，希望有知道的不吝指教。

由于MultipleTreeSelect.js的底层是根据ztree和select.js写的。所以我考虑使用ztree。自行百度。太多(其实主要我把这部分删了，哈哈)

配一个自定义的复选下拉框吧


<body>
<select name="unitRole" id="departmentid" class="form-control"></select>
<ul id="depId" class="ul_content"></ul>
</body>

<script>
    /**
     * [dropDownCk 下拉复选框]
     * @param  {[String]} boxId    [父级元素id]
     * @param  {[String]} selectId [下拉选id]
     * @param  {[String]} hiddenId [隐藏区域id]
     * @return {[Array]}          [description]
     */
    function dropDownCk(selectId,hiddenId) {
        var boxId = "#" + boxId,
                selectId = "#" + selectId,
                hiddenId = "#" + hiddenId;

        $(hiddenId).mouseleave(function(){ // 鼠标离开隐藏复选区域

            $(this).hide();

        });

        $(selectId).click(function() { // 切换显示与隐藏
            $(hiddenId).toggle();
        });
        var tagArr = []; // 接收复选字段数组
        var tagArrID = [];
        $(selectId).html("<option checked='true' style='display:none;'>" + "请选择" + "</option>");
        $(hiddenId + ' label').find('input').click(function() { // 点击向数组添加元素
            if ($(this).is(':checked')) {
                //name
                tagArr.push($(this).parent().text());
                //ID
                tagArrID.push($(this).val())

                $(selectId).html("<option checked='true' value="+ tagArrID.join(",") +" style='display:none;'>" + tagArr.join(",") + "</option>");
            } else {
                tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素
                if (tagArr.length == 0) {
                    $(selectId).html("<option checked='true' style='display:none;'>" + "请选择" + "</option>");
                } else {
                    $(selectId).html("<option checked='true' style='display:none;'>" + tagArr.join(",") + "</option>");
                }
            }
        });
        return tagArr;
    }

</script>



$("#depId").empty();
 $(zNodes).each(function(){
       var html2 = "<li><label><input type='checkbox' value="+this.id+">"+this.name+"</label></li>"
        console.log(html2)
        $("#depId").append($(html2));
})
dropDownCk("departmentid","depId")

怎么弄都弄不好，感觉太low，所以还是找个插件用吧。我要站在巨人的肩膀上看一看
最终选则bootstrap-select.js
感觉这个插件还是比较牛逼的
看一下吧

<link rel="stylesheet" href="static/css/bootstrap-select.css">
<link rel="stylesheet" href="static/css/bootstrap-select.min.css">
<link rel="stylesheet" href="static/css/bootstrap.css"/>
<script type="text/javascript" src="static/js/bootstrap-select.js"></script>
<script type="text/javascript" src="static/js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>``


<select id="departmentid" name="unitRole" data-width="100%" class="selectpicker dropup" data-width="auto" data-size="6" multiple="multiple" data-live-search="true" title="请选择"></select>


<script>
			$("#departmentid").empty();
                    $(zNodes).each(function(){
                        var html2 = "<option value="+this.id+">"+this.name+"</option>"
                        console.log(html2)
                        $("#departmentid").append($(html2));
                    })
                    
                    $('.selectpicker').selectpicker('refresh'); 
<script>
//注意这里，如果是多选的话select的值是一个数[‘1’，‘2’，‘3’]；
但是我这里需要的是1,2，3这种形式
所以我这样处理
		var data = $('form').serializeJSON();
		//获取select值
        var value = $('#departmentid').val()
      	//将数组格式转换
        var string = value.join(",")
       	//对data这个json对象操作 
        data["unitRole"] = string
        console.log(data)
        //最后转换为字符串
        JSON.stringify(data),

这个插件的使用方法发夹可以参考
https://www.cnblogs.com/landeanfen/p/7457283.html
https://www.jianshu.com/p/4759623498af