[記] layui 更新單元格內容

阿新 • • 發佈：2021-02-04

總述

編輯列內容, 對輸入內容進行校驗, 如校驗失敗, 將單元格內容置空
在單元格中插入自定義元素, 並通過操作自定義元素更新表格內容, (通過template在table中插入3個radio, 通過選擇不同按鈕修改表單值)
在單元格編輯事件監聽中修改單元格值(需要同時修改table.cache中的值和動態input的value[關鍵])

圖示

未選中"修改"時, 修改"新售價", 給出提示, 並將"新售價"置空
選中"修改"是, 可以修改"新售價"
再次未選中"修改"是, 置空"新售價"

程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Table 表格編輯</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		< 
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<body>
		<table class="layui-table" lay-filter="booksTable" 
 id="booksTable"></table>

		<script type="text/html" id="actionTpl">
			<input type="radio" name="action-type-name-{{d.seqid}}" value="0" title="無操作" lay-filter="action-type" {{d.actionType === '0' ? 'checked':''}}>
			  <input type="radio" name="action-type-name-{{d.seqid}}" value="1" title="刪  除" lay-filter="action-type" {{d.actionType === '1' ? 'checked':''}}>
			  <input type="radio" name="action-type-name-{{d.seqid}}" value="2" title="修  改" lay-filter="action-type" {{d.actionType === '2' ? 'checked':''}}>
		</script>

		<script src="layui/layui.all.js" charset="utf-8"></script>
		<script>
			var datas = [
				{"seqid": "10001","bookName": "張三專輯","bookPrice": "199","newBookPrice": "","actionType": '0'},
				{"seqid": "10002","bookName": "李四專輯","bookPrice": "155","newBookPrice": "","actionType": '0'},
			];
			var tableOption = {
				elem: '#booksTable',
				cols: [[
						{field: 'seqid',title: '書籍ID',minWidth: 80,sort: true},
						{field: 'bookName',title: '資料名',minWidth: 120},
						{field: 'bookPrice',title: '售價',minWidth: 120},
						// 這裡沒有field, 因為後面更新的時候會把templet弄掉
						{title: '操作',minWidth: 220,event: 'action-type-sync',templet: '#actionTpl'},
						{field: 'newBookPrice',title: '新售價',minWidth: 100,edit: 'text'}
				]],
				data: datas,
				even: true,
				id: 'booksTable',
			};

			(function() {
				var table = layui.table,$ = layui.$;
				table.render(tableOption);
				
				//監聽單元格編輯, 校驗單元格輸入
				table.on('edit(booksTable)', function(obj) {
					var value = obj.value //得到修改後的值
						,data = obj.data //得到所在行所有鍵值
						,field = obj.field; //得到欄位
						console.log(data)
					if (field === 'newBookPrice') {
						if (data.actionType !== '2') {// 修改按鈕未選中
							layer.msg('請調整該記錄的"操作"型別為"修改"後再修改金額.');
							// 將cache值置空, 只是修改cache中的值, 不能影響頁面顯示
							obj.update({newBookPrice: ''});
							// [關鍵]  將輸入框置空, 否則後續監聽器會依據此input的值修改頁面顯示
							$(this).val('');
						}
					}
				});
				// 監聽單元格事件, 根據選項, 修改金額
				table.on('tool(booksTable)', function(obj) {
					console.log(118)
					var value = $(this).find('input:checked').val();
					obj.update({
						newBookPrice: value === '2' ? obj.data.newBookPrice : '',
						actionType: value
					})
				});
			})();
		</script>
	</body>
</html>

[記] layui 更新單元格內容

技術標籤：前端layui 總述編輯列內容, 對輸入內容進行校驗, 如校驗失敗, 將單元格內容置空在單元格中插入自定義元素, 並通過操作自定義元素更新表格內容, (通過template在table中插入3個radio, 通過選擇不同按鈕

C#刪除Excel整行，更新單元格內容

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing;

c#刪除sheet_【C#】C#刪除Excel整行，更新單元格內容

技術標籤：c#刪除sheet using System; using System.Collections.Generic; using System.ComponentModel;

WinForm中DataGridView複製選中單元格內容解決方案

WinForm中DataGridView滑鼠選中單元格內容複製方案 1、CTR+C快捷鍵複製前提：該控制元件ClipboardCopyMode屬性設定值非Disable；

ant-vue：a-table-行內編輯提交和上傳後端並實現無重新整理資料（仿重新整理資料）提交完重新整理編輯單元格內容

需求很簡單，在a-table指定項新增線上編輯提交功能新增後點擊可編輯資訊，編輯提交後顯示在頁面上

layui合併單元格

在layui初始化完成之後done回撥中呼叫該方法,同一列中有相同值會合並,第二個值需在控制檯嘗試

Vue Render自定義tabled單元格內容

解決問題只舉一個例子(我正好需要用到的) 在寫中後臺時, 如果對表格元件再度封裝了, 比如這樣的

DataGridView單元格內容換行顯示及設定背景色

　　類準備不復述了，點這裡。　　說下思路：DataGridView單元格顯示內容是通過物件的ToString()方法獲取的，所以重寫要換行的列的ToString()方法即可。實現換行需要設定DataGridView的兩個屬性：1、在屬性視窗找到

Bootstrap-table 使用記錄 - js 修改表格樣式：表頭與單元格內容使用不同的對齊方式

官方示例網址：https://examples.bootstrap-table.com/#column-options/aligning-columns.html 聯機編輯器上執行：https://live.bootstrap-table.com/example/column-options/aligning-columns.html