您的位置：首页 > Web前端 > BootStrap

bootstrap-treeview 前台使用

2017-06-28 15:26 295 查看

[html]
view plain
copy

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Expires", "0");
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/js/bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="<%=path%>/js/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <script type="text/javascript">
        $(function(){
            function init(tree){
                var $checkableTree = $('#treeview-checkable').treeview({
                data: tree,
                showIcon: false,
                showCheckbox: true,
                showTags:true,
                bootstrap2: false,
                levels:5,
                onNodeChecked: function(event, node) {
                  $('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
                },
                onNodeUnchecked: function (event, node) {
                  $('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
                }
              });

              var findCheckableNodess = function() {
                return $checkableTree.treeview('search', [ $('#input-check-node').val(), { ignoreCase: false, exactMatch: false } ]);
              };
              var checkableNodes = findCheckableNodess();

              // Check/uncheck/toggle nodes
              $('#input-check-node').on('keyup', function (e) {
                checkableNodes = findCheckableNodess();
                $('.check-node').prop('disabled', !(checkableNodes.length >= 1));
              });

              $('#btn-check-node.check-node').on('click', function (e) {
                $checkableTree.treeview('checkNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
              });

              $('#btn-uncheck-node.check-node').on('click', function (e) {
                $checkableTree.treeview('uncheckNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
              });

              $('#btn-toggle-checked.check-node').on('click', function (e) {
                $checkableTree.treeview('toggleNodeChecked', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
              });

              // Check/uncheck all
              $('#btn-check-all').on('click', function (e) {
                $checkableTree.treeview('checkAll', { silent: $('#chk-check-silent').is(':checked') });
              });

              $('#btn-uncheck-all').on('click', function (e) {
                $checkableTree.treeview('uncheckAll', { silent: $('#chk-check-silent').is(':checked') });
              });
            }

            var tree;
            $.ajax({
                  type:'post',
                  url:'/init.do',
                  success:function(data){
                 init(data);
                  }
               });

    });

    function submit(){
        var arr = new Array();
        var $tree = $('#treeview-checkable');
        arr = $tree.treeview('getChecked', 0);
        var fristArr = new Array();
        var secondArr = new Array();
        var thirdArr = new Array();
        var fourthArr = new Array();
        if(arr.length==0){
            alert("请选择节点");
            return;
        }

[html]
view plain
copy

<span style="white-space:pre">        </span>//获取节点所在的层次
        for(var i=0 ; i< arr.length;i++){
            var node = arr[i];
            var temp = $('#treeview-checkable').treeview('getNode', node.nodeId);
            var href = node.href;
            if(href.indexOf("root")>-1){
                var v=2;
                continue;
            }else{
                if(node.parentId == 0){
                    fristArr.push(href);
                }else{
                    if (($tree.treeview('getNode', node.parentId)).parentId == 0) {
                        secondArr.push(href);
                    } else if($tree.treeview('getNode', ($tree.treeview('getNode', node.parentId)).parentId).parentId == 0) {
                        thirdArr.push(href);
                    }else{
                        fourthArr.push(href);
                    }
                }
            }
        }
        $.ajax({
            type:'post',
            traditional :true,
            url:'gdupWeb/runtask.do',
            data:{firstSpecIDs:fristArr,secondSpecIDs:secondArr,thirdSpecIDs:thirdArr,fourthSpecIDs:fourthArr,startdate:startdate,enddate:enddate},
            success:function(data){
                if (data=="1") {

                }
            }
        });
    }

    </script>
</head>
<body>
    <div id="treeview-checkable" class=""></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航