关闭

js树状选择器

标签: 树状选择器
555人阅读 评论(0) 收藏 举报
分类:

代码块

selector.jsp

<table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th width="50"align="center">操作</th>
                            <th>名称</th>
                        </tr>
                    </thead>
                    <tbody class="columns">
                        <c:set var="categorys" value ="${categorys}" scope="request" ></c:set>
                        <c:set var="level" value="2" scope="request" /><!-- 记录树的层次 -->
                        <c:import url="/WEB-INF/views/core/category/select-include.jsp" />
                    </tbody>
                </table>
                <script>
                    $(function(){
                        $(document).delegate(".pickIDS", "click", function() {
                            var currId = $(this).parents("tr").attr("data-pid");
                            selectParent(currId);
                        });
                    });
                    function selectParent(id){
                        if($("[data-id='"+id+"']").size()>0){
                            $("[data-id='"+id+"']").each(function(){
                                $(this).find(".pickIDS").each(function(){
                                    var parentId = $(this).parents("tr").attr("data-pid");
                                    if(!$(this).is(":checked")) {
                                        $(this).prop("checked",true);
                                    }else{
                                        return false;
                                    }
                                    selectParent(parentId);
                                }); 
                            });
                        }
                    }
                </script>

selector-include.jsp

<c:forEach items="${categorys}" var="category" varStatus="status">
    <tr data-pid="${category.parent.id }" data-id="${category.id }" data-name="${category.name}" data-path='<c:forEach items="${category.path}" var="p" varStatus="status">-${p.id}-</c:forEach>'>
        <td class = "op" width="50"align="center">
            <input type="checkbox" class="pickIDS" value="${category.id }" data-name="${category.name }" />
        </td>
        <td style="padding-left:${level * 20}px;">
            <span class="<c:if test='${category.children.size()>0 }'>arr2</c:if><c:if test='${category.children.size()==0 }'>arr3</c:if>" data-id="${category.id}"><img width='16' height='18' src="<c:url value = "/res/images/blank.gif"/>"/></span>
            <span class="node">
                ${category.name}
            </span>
        </td>
    </tr>
    <c:if test="${category.children!=null }">
        <c:set var="level" value="${level+1 }" scope="request" /><!-- 记录树的层次 -->
        <c:set var="categorys" value="${category.children}" scope="request" /><!-- 注意此处,子列表覆盖treeList,在request作用域 -->
        <c:import url="/WEB-INF/views/core/category/select-include.jsp" />
    </c:if>
</c:forEach>
<c:set var="level" value="${level - 1}" scope="request" /><!-- 退出时,level-1 -->

原理,只要我们将上一级的id用data-pid来设置。
然后运用上面的js就可以达到目的。其他的参数都可以不用理会,都是一个原理。
这个js是点击下一级,上一级也会跟着选上

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1357314次
    • 积分:18678
    • 等级:
    • 排名:第479名
    • 原创:854篇
    • 转载:47篇
    • 译文:1篇
    • 评论:106条
    最新评论