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

bootstrap-treeview 前台使用

2015-11-16 16:57 204 查看
<%@ 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;
}
<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: