使用layui對單元格進行編輯並保存
先是要引入layui的JS和CSS
然后創建一個表格
而重要的是edit這個屬性,只有使用了這個屬性的一列數據表格才可以編輯,其余的都不可以進行編輯
然后使用layui的監聽事件獲取到數據
再聲明1個全局變量用於裝所在行的相關數據,當然我們需要的並不是所有的數據,而是加了edit這個屬性的那一條數據,
var data =obj.data
var commodityName=data.CommodityName
1
2
3
obj是控制器返回給頁面的值
commodityName是便於數據的使用
這樣我們就能獲取到修改后的數據了
我們只要CommodityName這個數據
再使用Post或者ajaxSubmit請求,傳遞將修改后數據給控制器,並保存
而保存的大概思路和一般的模態框保存基本相同
第一步先判斷數據庫是否有了相同的數據,如果有則返回false不進行保存
如果第一步判斷成功后,就將查詢要修改的數據,並將其狀態改為修改
dbUser是查詢出來的數據的一個集合名稱
並將修改后的數據賦值給查詢的這張表
然后返回數據給頁面
這樣一次只能保存一行數據
如果需要保存多行數據,就得每修改一次單元格就保存一次
而沒有加上edit這個屬性的列,是無法點擊編輯
如果需要修改的數據較少,那么layui的數據表格編輯是一個很不錯的方法
注意:
如果只是給表頭加上edit屬性,不寫監聽事件的話,一樣是無法點擊表格進行編輯,所以使用時一定要注意。
在查詢數據是一定要記得去掉數據中的空格,防止保存數據時出錯
那么一個簡單的數據單元格的編輯就完成了
---------------------