From cb172b6397d097cf0741ec10cfdb75271c852c56 Mon Sep 17 00:00:00 2001
From: sight <26325820+Sight-wcg@users.noreply.github.com>
Date: Sat, 6 Jan 2024 17:51:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(table):=20=E6=96=B0=E5=A2=9E=20`table.upda?=
 =?UTF-8?q?teRow`=20=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/table/index.md  | 58 +++++++++++++++++++++++++++++++
 src/modules/table.js | 83 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 141 insertions(+)

diff --git a/docs/table/index.md b/docs/table/index.md
index 1a3ac49d..f65aa8a8 100644
--- a/docs/table/index.md
+++ b/docs/table/index.md
@@ -28,6 +28,7 @@ toc: true
 | [table.reload(id, options, deep)](#table.reload) | 表格完整重载。  |
 | [table.reloadData(id, options, deep)](#table.reloadData) <sup>2.7+</sup> | 表格数据重载。 |
 | [table.renderData(id)](#table.renderData) <sup>2.8.5+</sup> | 重新渲染数据。 |
+| [table.updateRow(id, opts)](#table.updateRow) <sup>2.9.4+</sup> | 更新指定行数据。 |
 | [table.checkStatus(id)](#table.checkStatus) | 获取选中行相关数据。  |
 | [table.setRowChecked(id, opts)](#table.setRowChecked) <sup>2.8+</sup> | 设置行选中状态。 |
 | [table.getData(id)](#table.getData) | 获取当前页所有行表格数据。 |
@@ -313,6 +314,63 @@ data.splice(newIndex, 0, item[0]);
 table.renderData('test');
 ```
 
+<h3 id="table.updateRow" lay-pid="api" class="ws-anchor ws-bold">更新指定行数据 <sup>2.9.4+</sup></h3>
+
+`table.updateRow(id, opts);`
+- 参数 `id` : table 渲染时的 `id` 属性值
+- 参数 `opts` : 更新指定行时的可选属性，详见下表
+
+| opts | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| index | 行下标 | number | - |
+| row | 行数据 | object | - |
+| related | 是否更新其他包含自定义模板且可能有所关联的列视图 | boolean | - |
+
+该方法用于更新指定行数据。
+
+```js
+// 渲染
+table.render({
+  elem: '', // 绑定元素选择器
+  id: 'test', // 自定义 id 索引
+  // 其他属性 …
+});
+
+// 更新单行
+table.updateRow('test', {
+  index: 0,
+  row: {
+    id: 1,
+    username: 'name',
+  }
+});
+
+// 更新多行
+table.updateRow('test', [
+  {
+    index: 0,
+    row: {
+      id: 1,
+      username: 'name1'
+    }
+  },
+  {
+    index: 1,
+    row: {
+      id: 2,
+      username: 'name2'
+    }
+  }
+]);
+
+// 更新单元格
+table.updateRow('test', {
+  index: 0,
+  row: {
+    username: 'name',
+  }
+})
+```
 
 <h3 id="table.checkStatus" lay-pid="api" class="ws-anchor ws-bold">获取选中行</h3>
 
diff --git a/src/modules/table.js b/src/modules/table.js
index 72e5cc8b..ca71f537 100644
--- a/src/modules/table.js
+++ b/src/modules/table.js
@@ -1886,6 +1886,89 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     that.layFixRight.css('right', scrollWidth - 1);
   };
 
+  /**
+   * @typedef updateRowOptions
+   * @prop {number} index - 行索引
+   * @prop {Object.<string, any>} row - 行数据
+   * @prop {boolean} [related] - 更新其他包含自定义模板且可能有所关联的列视图
+   */
+  /**
+   * 更新指定行
+   * @param {updateRowOptions | updateRowOptions[]} opts 
+   */
+  Class.prototype.updateRow = function(opts){
+    var that = this;
+    var ELEM_CELL = '.layui-table-cell';
+    var opts = layui.type(opts) === 'array' ? opts : [opts];
+
+    var renderFormByElem = function(elem){
+      layui.each(['input', 'select'], function(i, formType){
+        form.render(elem.find(formType));
+      })
+    }
+
+    var update = function(opt){
+      var index = opt.index;
+      var row = opt.row;
+      var related = opt.related;
+
+      var data = table.cache[that.key][index];
+      var tr = that.layBody.find('tr[data-index="' + index + '"]');
+      layui.each(row, function (key, value) {
+        var td = tr.children('td[data-field="' + key + '"]');
+        var cell = td.children(ELEM_CELL);
+
+        // 更新缓存中的数据
+        data[key] = value;
+
+        // 更新相应列视图
+        that.eachCols(function (i, item3) {
+          if (item3.field == key) {
+            cell.html(parseTempData.call(that, {
+                item3: item3,
+                content: value,
+                tplData: $.extend({
+                  LAY_COL: item3,
+                },data)
+            }));
+            td.data("content", value);
+          }
+          // 更新其他包含自定义模板且可能有所关联的列视图
+          else if (related && (item3.templet || item3.toolbar)) {
+            var thisTd = tr.children('td[data-field="' + (item3.field || i) + '"]');
+            var content = data[item3.field];
+            var thisCell = thisTd.children(ELEM_CELL);
+
+            thisCell.html(parseTempData.call(that, {
+              item3: item3,
+              content: content,
+              tplData: $.extend({
+                LAY_COL: item3,
+              },data)
+            }));
+            thisTd.data("content", content);
+          }
+        });
+      });
+
+      renderFormByElem(tr);
+    }
+
+    layui.each(opts, function(i, opt){
+      update(opt)
+    });
+  };
+
+  /**
+   * 更新行
+   * @param {string} id - table ID
+   * @param {updateRowOptions | updateRowOptions[]} options 
+   */
+  table.updateRow = function (id, options){
+    var that = getThisTable(id);
+    return that.updateRow(options);
+  }
+
   // 事件处理
   Class.prototype.events = function(){
     var that = this;