layui監(jiān)聽單元格編輯前后交互的例子
更新時(shí)間：2019年09月16日 10:54:58 作者：最後的悲傷
今天小編就為大家分享一篇layui監(jiān)聽單元格編輯前后交互的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說啦，大家直接看代碼就行了！
如下所示：
<!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請(qǐng)求路徑
data: {
id:data.id,
field:field,
value:value
},
success: function(data){
layer.msg('修改成功');
}
});
});
});
});
</script>
</body>
</html>
以上這篇layui監(jiān)聽單元格編輯前后交互的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解微信JS-SDK選擇圖片遇到的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
ionic App問題總結(jié)系列之ionic點(diǎn)擊系統(tǒng)返回鍵退出App
本篇文章主要介紹了ionic App問題總結(jié)系列之ionic點(diǎn)擊系統(tǒng)返回鍵退出App，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了react基本安裝與測(cè)試,結(jié)合實(shí)例形式分析了react基本安裝命令、引用與測(cè)試相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了javascript自定義事件功能與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript自定義事件的原理、功能、應(yīng)用與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-11-11
JavaScript中undefined和is?not?defined的區(qū)別與異常處理
這篇文章主要給大家介紹了關(guān)于JavaScript中undefined和is?not?defined的區(qū)別與異常處理的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了js格式化時(shí)間的方法，對(duì)javascript時(shí)間格式化的方法進(jìn)行了總結(jié)，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JavaScript組件開發(fā)的方法,結(jié)合完整實(shí)例形式分析了組件的原理與實(shí)現(xiàn)技巧,代碼包含的詳盡的注釋,便于理解,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JS設(shè)置獲取cookies的方法，有需要的朋友可以參考一下2014-01-01
這篇文章主要介紹了JS往數(shù)組中添加項(xiàng)性能分析的相關(guān)資料,需要的朋友可以參考下2015-02-02
以下頁面在運(yùn)行中,調(diào)試輸出的永遠(yuǎn)是alter('1'),原因是按照頁面加載從上至下的順序,同名的方法以最后一個(gè)為準(zhǔn).2009-01-01