ホームページ > 記事 > ウェブフロントエンド > bootstrap-treeview カスタム ダブルクリック イベント実装メソッド_JavaScript スキル
bootstrap-treeview カスタム ダブルクリック イベント実装メソッド_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:20:461516ブラウズ
bootstrap-treeview は、ブートストラップに基づいた非常に優れた jQuery マルチレベル リスト ツリー プラグインです。この jQuery プラグインは Twitter Bootstrap に基づいており、ビュー ツリー、リスト ツリーなどのいくつかの継承ツリー構造をシンプルかつエレガントな方法で表示します。しかし、このプラグインに独自のダブルクリック イベントがない理由はわかりません。
多くのテストを行った結果、メソッド $('#tree').dblclick( function () {}) もメソッド $('#tree').on('dblclick', function(){}) も機能しませんでした。困惑した。結局私が助けに来て問題は解決しましたが、あまり優雅とは言えませんでしたが、それでも結局仕事はできました。
このソリューションでは、bootstrap-treeview に付属する 2 つのイベント「nodeSelected」と「nodeUnselected」を使用します。ツリービュー ノードをダブルクリックすると、選択されたイベントと選択されていないイベントがトリガーされます。これら 2 つのイベント間の時間間隔を計算できます。ダブルクリック イベントの効果をシミュレートします。ダブルクリック イベントでのマウスの左ボタンの各クリック間隔は、手動操作の場合は 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()
上記の方法は主に、選択したイベントと未チェックのイベントの動作の対象が同じであるか、時間間隔が十分に小さいかどうかを判断するために使用されます。これら 2 つの条件を満たす顧客は、ダブルクリック イベントをトリガーしたいだけです。ビジネスロジックは関数customBusinessでカスタマイズできます。
以上がこの記事の詳細な内容です。皆様の学習のお役に立てれば幸いです。