【前端笔记1】《easyui的小套路整理》

combotree实现下拉树的全选只要子节点（“保小不保大”，手动斜眼）

1.简单描述需求&发现两个小坑坑

emmm...，利用下拉框+树节点的结合实现下拉树，完成多选且只选择叶子节点并将叶子节点的文本值拼接到文本域中。

• 坑点一：
  采用api上只设置用户选叶子节点（onlyLeafCheck: true），但是当叶子节点过多时我想全选怎么办？难道要一个个选吗。。这是要气死宝宝哦！！！

  
  图1.1 设置只选叶子节点却只能一个个勾选叶子节点

• 坑点二
  那如果允许选到根节点，这时你会发现一个很无语的sao操作就是选完根节点，子节点虽然全选上了，but我不要根节点啊，我只想要子节点，子节点，子节点啊（重要的事说三遍！！！）

  
  图1.2 根节点加上复选框偏偏把自己也选上

2.开始填坑

emmm...，我也不知道我的解决方法是否妥当，但确实是一个解决上面两个坑的方法。当然眼尖的你如果有更好的解决的方式，请直接留言哦！

• 首先说说思路：
  欲想填其坑，必先找其源。我通过在js里修改树拿到的值发现后面判断各种真麻烦，而且实现了半圈也没实现（我这个菜鸟啊。。。所以下面直接简单粗暴修改easyui自己的js直接在Oncheck事件里判断如果有选中根节点不把它的值放进values不就行了嘛！）
• 解决：
  （这里是要修改的点的前期摸索，可以直接跳过）大概是不知道onCheck事件在easyui.js中哪行，因为直接combotree找肯定有好几处，所以我直接定义了一个onCheck事件里面写一个错误的事件，再通过控制台打印直接定位combotree对应的onCheck事件塞值的地方:

/*onCheck:function(node,checked){
                          console.log(node.getTree());
                      }*/

定位到修改的地方后，接下来就是鉴证奇迹的时刻！！！
★★★在遍历结点的时候判断只有是叶子节点才把值push到结果集:

var isLeaf=tree.tree('isLeaf', _933[i].target);
  if(isLeaf){
    vv.push(_933[i].id);
    ss.push(_933[i].text);
  }

3.附上相关代码

• 3.1.html页面

<tr>
    <td>偶像:</td>
    <td><select id="wq" class="easyui-combotree" 
                        url="data/city_data.json" 
                       data-options="multiple:true,multiline:true"
                       name="偶像列表" 
                       style="width:400px;height:100px"/>
        </td>
</tr>

• 3.2 数据文件

[{
    "id":1,
    "text":"男演员",
    "iconCls":"icon-group",
    "children":[{
            "id":11,
            "text":"侯明昊",
            "iconCls":"icon-man"

        },{
            "id":12,
            "text":"丹尼斯吴",
            "iconCls":"icon-man"

        }]},
    {"id":2,
    "text":"女演员",
    "iconCls":"icon-group",
    "children":[{
            "id":21,
            "text":"杨幂",
            "iconCls":"icon-woman"
            
        },{
            "id":22,
            "text":"全智贤",
            "iconCls":"icon-woman"

        },{
            "id":23,
            "text":"金智媛",
            "iconCls":"icon-woman"

        },{
            "id":24,
            "text":"韩佳人",
            "iconCls":"icon-woman"

        }]
        },
{"id":3,
    "text":"男歌手",
    "iconCls":"icon-group",
    "children":[{
            "id":31,
            "text":"林俊杰",
            "iconCls":"icon-man"
            
        },{
            "id":32,
            "text":"张杰",
            "iconCls":"icon-man"

        }]
        },
    {"id":4,
    "text":"女歌手",
    "iconCls":"icon-group",
    "children":[{
            "id":41,
            "text":"Hebe",
            "iconCls":"icon-woman"
            
        },{
            "id":42,
            "text":"Avril",
            "iconCls":"icon-woman"

        },{
            "id":43,
            "text":"林允儿",
            "iconCls":"icon-woman"

        },{
            "id":44,
            "text":"郑秀晶",
            "iconCls":"icon-woman"

        },{
            "id":45,
            "text":"李宇春",
            "iconCls":"icon-woman"

        },{
            "id":46,
            "text":"蔡依林",
            "iconCls":"icon-woman"

        }]
        }
]

• 3.3.页面中的js

 $(function () {
            $("#wq").combotree({
                        url: 'data/city_data.json',
                        multiple: true,//当为true时，为多选，false为单选
                        lines: true,
                        checkbox: true,
                        onlyLeafCheck: false,
                        cascadeCheck:true, 
                        /*onCheck:function(node,checked){
                            console.log(node.getTree());
                        }*/
                });
        });
        

• 3.4 jquery.easyui.min.js中修改部位截图

注：红色框内是onCheck事件赋值的代码区域:
橘黄色框内是我添加的代码，_933每个的js可能因为版本不一样所以定义不一样记得灵活修改哦！

图3.1 jquery.easyui.min.js中修改位置截图

4.最终效果图

emmm...最后放大招宝宝要上大菜啦，如下：

图4.1 最终效果图