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

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

相关文章推荐

web页面树形下拉选择框

介绍一个web页面属性下拉列表框的实现,采用jquery的ztree框架。项目中的效果如图: 1 下载ztree插件,地址:http://www.ztree.me/v3/main.php#_zT...

最简洁的HTML JS树形带复选框

最简洁的HTML JS树形带复选框,点大类自动选中子类. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 无标题文档...
  • cncco
  • cncco
  • 2013-05-07 11:05
  • 6300

树状选择器

  • 2008-05-15 17:57
  • 1.47MB
  • 下载

日期选择器,js && bootstrap

日期选择器(Query+bootstrap和js两种方式) 日期选择是在下拉列表中选择年、月、日,年显示前后的五年,12个月,日就是有30、31、29、28天的区别,随着月份的变...

js城市选择器

d3.js 选择器

如发现翻译不当或有其他问题可以通过以下方式联系译者:邮箱:zhang_tianxu@sina.comQQ群:D3.js:437278817,大数据可视化:436442115Github小组:Visua...

js色彩选择器

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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