layui監(jiān)聽單元格編輯前后交互的例子
更新時間：2019年09月16日 10:54:58 作者：最後的悲傷
今天小編就為大家分享一篇layui監(jiān)聽單元格編輯前后交互的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說啦，大家直接看代碼就行了！
如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>...</title>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" >
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-body">
<!-- 內(nèi)容主體區(qū)域 -->
<table id="demo" lay-filter="test"></table>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
//JavaScript代碼區(qū)域
layui.use('element', function(){
var element = layui.element;
//一些事件監(jiān)聽
element.on('tab(demo)', function(data){
console.log(data);
});
});
layui.use('table', function(){
var table = layui.table;
//監(jiān)聽單元格編輯
table.render({
elem: '#demo'
,height: 500
,url: 'data.php' //數(shù)據(jù)接口
,page: true //開啟分頁
,cols: [[ //表頭
//全選
{type:'checkbox'}
//edit: 'text'為開啟單元格編輯，sort:true開啟排序
,{field:'id', title: 'ID', width:80, sort: true}
,{field:'uname', title: '用戶名', width:120, sort: true, edit: 'text'}
,{field:'age',title: '年齡', width:80, sort: true, edit: 'text'}
]]
});
table.on('edit(test)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有鍵值
,field = obj.field; //得到字段
layui.use('jquery',function(){
var $=layui.$;
$.ajax({
type: 'get',
url: "test.php", // ajax請求路徑
data: {
id:data.id,
field:field,
value:value
},
success: function(data){
layer.msg('修改成功');
}
});
});
});
});
</script>
</body>
</html>
以上這篇layui監(jiān)聽單元格編輯前后交互的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
你真的知道setTimeout是如何運(yùn)行的嗎？這篇文章主要介紹了setTimeout運(yùn)行方式，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了面向切面編程（AOP）的理解,需要的朋友可以參考下2015-05-05
基于Bootstrap實(shí)現(xiàn)城市三級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了基于BootStrap實(shí)現(xiàn)城市三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
js求數(shù)組最大值的八種具體實(shí)現(xiàn)方法
數(shù)組如何求最大值,想必很多的朋友都不會吧,下面這篇文章主要給大家介紹了關(guān)于使用js求數(shù)組最大值的八種方法具體實(shí)現(xiàn)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
我們在用javascript創(chuàng)建一個遮蓋層(div)后，如果點(diǎn)擊關(guān)閉用到了2009-06-06
這篇文章主要介紹了js中的閉包學(xué)習(xí)心得以及重要點(diǎn)的代碼寫法，對此有興趣的朋友跟著小編一起學(xué)習(xí)下吧。2018-02-02
大家都知道在ES6中引進(jìn)的一種新型的字符串字面量語法-模板字符串，下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之模板字符串的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
console一定是各位前端最熟悉的小伙伴了,有些網(wǎng)站還會在控制臺輸出一些有意思的東西,下面這篇文章主要給大家介紹了關(guān)于前端console用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
下面小編就為大家?guī)硪黄猨s操作瀏覽器的參數(shù)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
這篇文章主要介紹了IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法,大家參考使用吧2013-11-11