bootstrap-treeview 사용자 정의 더블 클릭 이벤트 구현 method_javascript 기술
- WBOY원래의
- 2016-05-16 15:20:461516검색
bootstrap-treeview는 부트스트랩을 기반으로 하는 매우 멋진 jQuery 다중 레벨 목록 트리 플러그인입니다. 이 jQuery 플러그인은 Twitter Bootstrap을 기반으로 하며 뷰 트리, 목록 트리 등과 같은 일부 상속 트리 구조를 간단하고 우아한 방식으로 표시합니다. 그런데 왜 이 플러그인에는 자체 더블클릭 이벤트가 없는지 모르겠습니다.
많은 테스트 후에 $('#tree').dblclick( function () {}) 메서드나 $('#tree').on('dblclick', function(){}) 메서드가 모두 작동하지 않습니다! 어찌할 바를 모르는. 드디어 구조하러 와서 문제가 해결됐는데 별로 우아해 보이지는 않았지만 결국 작업을 넘겨줄 수 있었습니다.
이 솔루션은 bootstrap-treeview와 함께 제공되는 두 가지 이벤트 "nodeSelected" 및 "nodeUnselected"를 사용합니다. treeview 노드를 두 번 클릭하면 선택한 이벤트와 선택되지 않은 이벤트가 트리거됩니다. 두 번 클릭 이벤트의 효과를 시뮬레이션합니다. 더블 클릭 이벤트에서 마우스 왼쪽 버튼을 클릭하는 간격은 수동 조작의 경우 300밀리초입니다.
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div id="tree" style="width: 400px;height: 1000px;margin-left: auto;margin-right: auto;"></div>
<div id="testDate"></div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-treeview.js"></script>
<script type="text/javascript">
//获取树形结构列表数据
function getTree() {
var tree = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1"
}, {
text: "Grandchild 2"
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2"
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
return tree;
}
//初始化树形结构列表
$('#tree').treeview({
data: getTree()
});
//最后一次触发节点Id
var lastSelectedNodeId = null;
//最后一次触发时间
var lastSelectTime = null;
//自定义业务方法
function customBusiness(data){
alert("双击获得节点名字： "+data.text);
}
function clickNode(event, data) {
if (lastSelectedNodeId && lastSelectTime) {
var time = new Date().getTime();
var t = time - lastSelectTime;
if (lastSelectedNodeId == data.nodeId && t < 300) {
customBusiness(data);
}
}
lastSelectedNodeId = data.nodeId;
lastSelectTime = new Date().getTime();
}
//自定义双击事件
function customDblClickFun(){
//节点选中时触发
$('#tree').on('nodeSelected', function(event, data) {
clickNode(event, data)
});
//节点取消选中时触发
$('#tree').on('nodeUnselected', function(event, data) {
clickNode(event, data)
});
}
$('#tree').dblclick( function () { alert("Hello World!"); });
$(document).ready(function() {
//customDblClickFun();
});
</script>
</body>
</html>
대략적인 필터링 설명:
가장 중요한 전역 변수: lastSelectedNodeId, lastSelectedNodeId
기본 메서드: clickNode()
위 방법은 선택된 이벤트와 체크되지 않은 이벤트 동작의 대상이 동일한지, 시간 간격이 충분히 작은지 여부를 판단하는 데 주로 사용됩니다. 이 두 가지 조건을 충족하는 고객은 더블 클릭 이벤트를 트리거하기를 원합니다. customBusiness 함수에서 비즈니스 로직을 사용자 정의할 수 있습니다.
위 내용은 이 글의 자세한 내용으로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.