亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

是否可以點擊js樹節點回顯數據？

是否可以點擊js樹節點回顯數據？

PHP
撒科打諢 2023-06-24 16:11:33
我想知道是否可以通過點擊js樹節點來回顯數據？下面是數據方法編碼：<h5>No. Pindaan [siri_pindaan input from user] Tarikh Berkuatkuasa [effective_date input from user]</h5>$folders_arr[] = array(?"id" => $row['id'],"parent" => $parentid,?"text" => $row['name'] . ' ' ."<span id='open' style='font-size:9px;'>".$refer_to_code .$row['filing_code_refer']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$link_to_code .$row['filing_code_link']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$row['description_update']."</span>".' '. "<span id='open'>".$siri_pindaan_edit."</span>","category" => $row['category'],"filing_code_refer" => $row['filing_code_refer'],"siri_pindaan" => $row['siri_pindaan'],"effective_date" = $row['effective_date'];"data" => array("status" => $row['status'],"add_underline"=>$row['add_underline']) ,"state" => array("selected" => $selected,"opened"=>$opened)?);我需要在h5中顯示$row['siri_pindaan']和$row[' effective_date']值。我的預期結果如下圖所示，如果我單擊 500 PENGURUSAN SUMBER MALAYSIA 樹節點，值 966 和 2020-06-26 將顯示在 h5頂部。
查看完整描述

1 回答

?
牧羊人nacy

TA貢獻1862條經驗 獲得超7個贊

所以首先我們將綁定changed.jstree事件，并獲取節點文本值。


.on('changed.jstree', function (e, data) {

     let nodeText = data.instance.get_node(data.selected[0]).text;    

})

我假設您將擁有pindaan和tarikh相同的格式。像下面這樣-


(NO.PINDAAN [NUMBER_HERE] TARIKH BERKUATKUASA [DATE_HERE] )


所以我們將使用正則表達式從模板中獲取變量。


var regRet = nodeText.match(/(NO.PINDAAN (.*) TARIKH BERKUATKUASA (.*) )/i);

if(regRet && regRet.length === 4) {

   renderData(regRet[2], regRet[3]);

} else {

   renderData('  ', '  ');

}  

然后調用另一個函數renderData，該函數實際填充標題中的值。


  function renderData(pindaan, tarikh) {

    $('#pindaan').html(pindaan);

    $('#tarikh').html(tarikh);

  }

如果節點沒有值，也將值設置pindaan為tarikh空


    <html>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>


    <div class="box">

    <div class="row">

    <div class="col-lg-12">

    <header>

    <h5>No. Pindaan [<span id="pindaan"> </span>] Tarikh Berkuatkuasa [<span id="tarikh"> </span>] </h5>

    </header>

    <div id="div-4" class="body">

    <div class="x_content">

    <!-- Initialize jsTree -->

    <div id="folder_jstree" title=""></div>

    <!-- Store folder list in JSON format -->

    <textarea style="" id='txt_folderjsondata'>[{"id":"658","parent":"#","text":"100 PENTADBIRAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'>FAIL BARU<\/span> <span id='open'><\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"659","parent":"#","text":"200 PENGURUSAN TANAH & BANGUNAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 666 TARIKH BERKUATKUASA 2020-06-25 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"660","parent":"#","text":"300 PENGURUSAN ASET <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 777 TARIKH BERKUATKUASA 2020-06-19 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"661","parent":"#","text":"400 PENGURUSAN KEWANGAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"662","parent":"#","text":"500 PENGURUSAN SUMBER MANUSIA <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"663","parent":"658","text":"100-1 PERUNDANGAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"664","parent":"658","text":"100-2 PERHUBUNGAN AWAM <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"665","parent":"663","text":"100-1-1 PENGGUBALAN-PENYEDIAAN-PINDAAN UNDANG-UNDANG-PERATURAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"666","parent":"663","text":"100-1-2 KHIDMAT NASIHAT <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"667","parent":"665","text":"100-1-1-1 UNDANG-UNDANG KECIL KERJA DI JALAN 1996 <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"668","parent":"665","text":"100-1-1-2 UNDANG-UNDANG KECIL PERUNTUKAN MENGENAI LESEN BERSESAMA (MAJLIS PERBANDARAN) <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"670","parent":"666","text":"100-1-2-1 JABATAN PENGUATKUASAAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"671","parent":"666","text":"100-1-2-2 JABATAN BANGUNAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"672","parent":"664","text":"100-2-1 PUBLISITI, PROMOSI DAN PROTOKOL <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"673","parent":"672","text":"100-2-1-1 PUBLISITI DAN KENYATAAN MEDIA <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'>Berhubung Kod:999<\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"674","parent":"665","text":"100-1-1-3 UNDANG-UNDANG KECIL MENGKOMPAUN KESALAHAN-KESALAHAN (MAJLIS PERBANDARAN KLANG) <span id='open' style='font-size:9px;'>Rujuk Kod:TEST<\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM (BERHUBUNG KOD 100-1\/1\/2)","filing_code_refer":"TEST","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"755","parent":"#","text":"123 TEST <span id='open' style='font-size:9px;'>Rujuk Kod:123<\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 123 TARIKH BERKUATKUASA 2020-06-16 )<\/span>","category":"jtm","filing_code_refer":"123","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}}]</textarea>

                <div class="col-lg-12 col-md-offset-5" style="padding-bottom: 10px;">

                <button class="btn btn-sm btn-primary">Print</button>

                </div>

                       

                        </div>

                </div>

            </div>

        </div>

    </div>

    </html>

    <script style="text/javascript">

     let obj = {

        pindaan:'',

        tarikh:''

     }

      $(document).ready(function() {

        var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());


        $('#folder_jstree')

        .on('changed.jstree', function (e, data) {

           let nodeText = data.instance.get_node(data.selected[0]).text;

    var regRet = nodeText.match(/(NO.PINDAAN (.*) TARIKH BERKUATKUasa (.*) )/i);

    if(regRet && regRet.length === 4) {

        renderData(regRet[2], regRet[3]);

    } else {

      renderData('  ', '  ');

    }    

  })

        .jstree({

          'core': {

            'data': folder_jsondata,

            'multiple': false

          },

          'plugins': ['sort'],

          'sort': function(a, b) {

            return this.get_text(a).localeCompare(this.get_text(b), 'en', {

              numeric: true

            });

          }

        });


        var getColor = function(i) {

          if (i >= 100 && i <= 199) {

            return "blue";

          } else if (i >= 200 && i <= 299) {

            return "red";

          } else if (i >= 300 && i <= 399) {

            return "yellow";

          } else if (i >= 400 && i <= 499) {

            return "purple";

          } else if (i >= 500 && i <= 599) {

            return "green";

          } else {

            return "#000";

          }

        };

        

        

        

        var colorNodes = function(nodelist) {

            var getStrike = function(status) {

          if (status === "0") {

            return "line-through";

          }  else {

            return "";

          }

        };

        

            var getUnderline = function(add_underline) {

          if (add_underline === "1") {

            return " underline;text-underline-position: under;";

          }  else {

            return "";

          }

        };

          var tree = $('#folder_jstree').jstree(true);

          nodelist.forEach(function(n) {

            tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0, 3), 10))+ ";"+"text-decoration:" + getStrike(n.data.status) + getUnderline(n.data.add_underline);

            tree.redraw_node(n.id); //Redraw tree

            colorNodes(n.children); //Update leaf nodes

          });

        };


        $('#folder_jstree').bind('load_node.jstree', function(e, data) {

          var tree = $('#folder_jstree').jstree(true);

          colorNodes(tree.get_json());

        });

        

        

        $('#folder_jstree').bind('hover_node.jstree', function(e, data) {

          $("#" + data.node.id).attr("title", data.node.original.category);

        });


      });

      

      

      function renderData(pindaan, tarikh) {

        $('#pindaan').html(pindaan);

        $('#tarikh').html(tarikh);

      }

      

    </script>


您還可以在這里找到工作小提琴。


https://jsfiddle.net/ewk0ay2r/


查看完整回答
反對 回復 2023-06-24
  • 1 回答
  • 0 關注
  • 182 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號