layui table 行點擊事件與列點擊事件衝突

来源:https://www.cnblogs.com/zhinian-/archive/2020/05/19/12916601.html
-Advertisement-
Play Games

問題描述: 工具欄的點擊事件,會冒泡到行點擊事件中,原打算阻止事件冒泡 ,結果失敗,阻止不了,索性不用layui官網的工具欄tool和行row監聽事件。 table: <table id="conManager" lay-filter="conManager" class="layui-table ...


問題描述:

工具欄的點擊事件,會冒泡到行點擊事件中,原打算阻止事件冒泡 ,結果失敗,阻止不了,索性不用layui官網的工具欄tool和行row監聽事件。

table:

<table id="conManager" lay-filter="conManager" class="layui-table layui-form"></table>

 

原本的監聽事件,如下:

        //監聽行單擊事件
        table.on('row(conManager)', function(obj){
          window.location.href = basePath + '/contract/look.do?conId='+obj.data.id;
        });
          //監聽行內工具欄操作
          table.on('tool(conManager)', function(obj){
              switch(obj.event) {
                  case 'edit':
                      break;
                  case 'del':break;
           default:
              }
          });

 

更改後,如下:

#conTableInfo為table容器的id
          //監聽行單擊事件
          $('#conTableInfo').on('click','div[lay-id="conManager"] .layui-table-body tr',function () {
              var _id = table.cache.conManager[parseInt($(this).attr('data-index'))].id;     
              window.location.href = basePath + '/contract/look.do?conId='+_id;
          })
          //監聽行內工具欄操作
          $('#conTableInfo').on('click','td[data-field="operation"]',function (e) {
              var _event = $(this).find('[lay-event]').attr('lay-event');
              var _obj = table.cache.conManager[parseInt($(this).parent('tr').attr('data-index'))];   //行內數據
              switch(_event) {
                  case 'edit':
               break;
                  case 'del':
                      break;
                  default:
              }
              return false; //阻止事件冒泡
          })

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、Swich語句 1.switch語句格式 swich(條件表達式){ case 表達式: 語句1; break; case 表示式: 語句2; break; case 表達式: 語句3: break; default: 語句n+1; break; } 註意點: (1)JS中判斷是否相等時是全等於 ...
  • 寫在前面 書籍介紹:《React進階之路》詳細介紹了React技術棧涉及的主要技術。本書分為基礎篇、進階篇和實戰篇三部分。基礎篇主要介紹React的基本用法,包括React 16的新特性;進階篇深入講解組件state、虛擬DOM、高階組件等React中的重要概念,同時對初學者容易困惑的知識點做了介紹 ...
  • 【目錄】 一、jQuery 簡介 二、jQuery 的基本使用 一、jQuery 簡介 1、介紹 jQuery內部封裝了原生的js代碼(還額外添加了很多的功能)能夠讓你通過書寫更少的代碼 完成js操作 類似於python裡面的模塊 在前端模塊不叫模塊 叫 “類庫” 相容多個瀏覽器的 你在使用jQue ...
  • 如何學好Web前端開發技術?前端學習路線是什麼?如今,移動開發的發展依舊如火如荼,企業對於Web前端人才需求產生了巨大的缺口,從事Web前端開發的程式員們則是其中較大的獲益者。Web前端的廣泛運用,造就了本身的優勢。現在學習Web前端是絕佳時期,抓住機會,拿高薪進名企就不再是問題。那麼想學好這門技術 ...
  • # 什麼是Hexo? Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。 # 優勢 1. Node.js 所帶來的超快生成速度,讓上百個頁面在幾秒內瞬間完成渲染。 2. Hexo 支持 GitHub Fl... ...
  • function isInArray(arr, val) { let testStr = ',' + arr.join(",") + ","; return testStr.indexOf("," + val + ",") -1 } ...
  • let markPointData = op.series[params.seriesIndex].markPoint.data; let newMarkPointData = markPointData.filter(({ name }) => name !== params.name); d1 ...
  • hello,今天給大家用three.js開發了一個手機太空穿越VR游戲,確實不容易,小編的頭髮又少了一大截。Ok,廢話少說,先看效果。 效果圖 首頁index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> < ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...