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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...