js树状选择器

原创 2015年07月06日 22:53:26

代码块

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是点击下一级,上一级也会跟着选上

版权声明:本文为博主原创文章,未经博主允许不得转载。

JS实现树形选择器

(function ($) { $.extend($.tree.callback,{  /*CheckNode状态改变以后,回调函数*/  oncheckchanged:function(NODE,T...

前台页面 bonsai tree view 插件--树形结构选择器使用实例总结

需要实现以下需求: 数据分组,要么可以单独选择几个;要么直接选中一组。 查阅相关资料,知道有插件叫tree view,然后在网上找到个bonsai插件,可以达到预期效果。 下面是我使用这个bonsai...

优秀的树形(tree)控件推荐,都是在网上看到的,大家参考一下

优秀的树形(tree)控件推荐,都是在网上看到的,大家参考一下 ---------------------------------------原文地址------------------...

树状选择器

  • 2008年05月15日 17:57
  • 1.47MB
  • 下载

EasyUI 编写实体类树状选择器

var trees = '${fns:getXXXListByTree()}' var dg = $('#xxxdg').treegrid({ method: 'post', rownu...

好用的日期选择器-js插件

  • 2016年05月24日 10:56
  • 25KB
  • 下载

js仿携程网机票城市选择器代码

  • 2017年06月23日 10:33
  • 21KB
  • 下载

原始JS选择器使用方法总结

常见的getElementById,getElementsByName,getElementsByTagName。但外国人不满意这些API,于是搞出了getElementsByClassName,后来...
  • wuji_1
  • wuji_1
  • 2014年04月09日 16:44
  • 1467

js城市选择器

  • 2015年11月10日 14:31
  • 9KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js树状选择器
举报原因:
原因补充:

(最多只允许输入30个字)