layui表格按鈕控制選中行開啟單元格可編輯


我們有時候需要對表格選中行開啟單元格編輯,進行一些編輯操作,以下代碼可為你提供思路:

for (var j = 0; j < idsAll.length; j++) {//開啟單元格編輯狀態
    let index = idsAll[j]['LAY_TABLE_INDEX'];
    if($('#resourceDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]')[0].checked){//判斷單元格是否選中
      $('#resourceDiv .layui-table tr[data-index=' + index + ']' ).find('td').not(".layui-table-col-special").data('edit', true);//核心代碼
    };
  }
  layui.use(['table'], function(){
    var table = layui.table
    //監聽單元格編輯
    table.on('edit(resource)', function(obj){
      var value = obj.value; //得到修改后的值
      let data = obj.data; //得到所在行所有鍵值
      let field = obj.field; //得到字段
      var recodePage = $("#resourceDiv .layui-laypage-skip .layui-input").val();//獲取當前頁
      var recodeLimit = $("#resourceDiv .layui-laypage-limits").find("option:selected").val();//獲取當前頁條數
    });       
  });

idsAll里面是表格數據,layui表格請求我在parseData方法里將返回的數據賦值給了idsAll,你們也可以換個方式進行操作。

如果你的表格里有復選框,增加了左側固定列序號或者其他操作,那你在開啟行單元格編輯的時候需要使用我的這種方法:

 $('#resourceQueryResultDiv .layui-table tr[data-index=' + index + ']' ).find('td').not(".layui-table-col-special").data('edit', true);//核心代碼

如果沒有只是單純的開啟單元格編輯填寫信息的話,只需要:

 $('#resourceQueryResultDiv .layui-table tr[data-index=' + index + ']' ).find('td').data('edit', true);//核心代碼

關閉單元格的操作只需要把true變成false。我再獲取元素的時候都加了id,是為了鎖定表,不讓多個表相互影響,如果只有一個表格可以不進行這個操作。

在單元格監聽事件中可以對自己修改的數據進行一些自己需要的操作,若有問題可以留言探討。哈哈


免責聲明!

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



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