Rumah > Artikel > hujung hadapan web > bootstrap-treeview kemahiran pelaksanaan acara klik dua kali tersuai kaedah_javascript

bootstrap-treeview kemahiran pelaksanaan acara klik dua kali tersuai kaedah_javascript

WBOYasal: 2016-05-16 15:20:461516semak imbas

bootstrap-treeview ialah pemalam pokok senarai pelbagai peringkat jQuery yang sangat hebat berdasarkan bootstrap. Pemalam jQuery ini adalah berdasarkan Twitter Bootstrap dan memaparkan beberapa struktur pokok warisan, seperti pokok paparan, pokok senarai, dll., dengan cara yang mudah dan elegan. Tetapi saya tidak tahu mengapa pemalam ini tidak mempunyai acara klik dua kali sendiri.
Selepas banyak ujian, kaedah $('#tree').dblclick( function () {}) mahupun kaedah $('#tree').on('dblclick', function(){}) tidak berfungsi! Bingung. Akhirnya, saya datang untuk menyelamatkan dan masalah itu diselesaikan, tetapi ia tidak kelihatan sangat elegan, tetapi akhirnya saya dapat menyerahkan kerja.
Penyelesaian ini menggunakan dua peristiwa "nodeSelected" dan "nodeUnselected" yang disertakan dengan bootstrap-treeview kali. Selang antara setiap klik butang kiri tetikus dalam acara klik dua kali ialah 300 milisaat untuk operasi manual.
Kod khusus adalah seperti berikut:

<!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>

Penjelasan penapisan kasar:

Pembolehubah global yang paling penting: lastSelectedNodeId, lastSelectedNodeId

Kaedah utama: clickNode()

Kaedah di atas digunakan terutamanya untuk menentukan sama ada sasaran acara yang dipilih dan operasi acara tidak ditandai adalah sama dan sama ada selang masa cukup kecil. Pelanggan yang memenuhi dua syarat ini hanya mahu mencetuskan acara klik dua kali. Anda boleh menyesuaikan logik perniagaan dalam fungsi customBusiness.

Di atas adalah kandungan terperinci artikel ini, saya harap ia akan membantu kajian semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara menggunakan subhalaman dalam kemahiran js page_javascript indukArtikel seterusnya：Cara menggunakan subhalaman dalam kemahiran js page_javascript induk

Artikel berkaitan

Lihat lagi