Layui表格的單雙擊處理


引用網友:https://blog.csdn.net/weixin_44540471/article/details/97513304

在學MVC過程中,我們一般都是利用layui插件里的layui數據表格加載數據庫中的數據,而layui表格里有許多的事件監聽,比如監聽行的單雙擊事件,可利用行的單雙擊事件實現很多我們想要的功能,比單擊某條數據可以進行修改、刪除操作,雙擊某條數據調出到其他表中,接下來就講講layui表格里的監聽行的單雙擊事件。
在這里插入圖片描述
如上圖所示:因為這個數據表格用到了layui插件,因此在使用前要先引用layui插件里面的css文件以及js文件,然后在“$(function(){});”里面加載和初始化layui模塊,否則會報錯。page表示開啟分頁。limit表示指定每頁顯示的條數。limits表示每頁條數的選擇項,這里可以自己定義每頁條數的選擇項,初始化表格就看看監聽行的單雙擊事件。
在這里插入圖片描述
如上圖所示:是layui表格監聽行的單擊事件,這里是監聽剛剛初始化的表格。獲取到點擊選中的行數據,我這里是根據供應商ID回填form表單數據的,所以要獲取供應商ID,用post請求把獲取到供應商ID傳遞到控制器中,在控制器中根據供應商ID查詢對應的數據后再回填到form表單中,“loadDatatoForm”是一個方法表示回填form表單數據,但回填不了下拉框數據,所以還需要另一個方法回填。監聽行的單擊事件可以實現很多功能的。
在這里插入圖片描述
上圖是監聽行的單擊事件的效果圖,點擊左邊的某條數據就會回填右邊的form表單,這就方便我們查看供應商的基本資料。監聽行的單擊事件就這樣完成了。
在這里插入圖片描述
如上圖所示:是layui表格監聽行的雙擊事件,這里也是監聽剛剛初始化的表格。雙擊獲取到點擊選中的行數據,我這里也是根據供應商ID回填另一個form表單數據的,所以要獲取供應商ID,用post請求把獲取到供應商ID傳遞到控制器中,在控制器中根據供應商ID查詢對應的數據后再回填到form表單中,“loadDatatoForm”是一個方法表示回填form表單數據,但回填不了下拉框數據,所以還需要另一個方法回填。這里監聽行的雙擊事件跟單擊事件一樣,也是回填form表單,所以請求的控制器代碼是一樣的。監聽行的單擊事件可以實現很多功能的。看看效果圖,
在這里插入圖片描述
上圖是監聽行的雙擊事件的效果圖,點擊某條數據就會回填form表單的數據,這里是只需要回填供應商名稱和供應商編號的,然后關閉模態框。監聽行的雙擊事件就完成了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM