系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
在Magento 2中，DynamicRows组件是一个可重复的表格行，通常用于管理表单数据。该组件基于Knockout.js实现，并且是Magento 2后端和前端开发中一个非常常用的组件。
下面是一个简单的代码示例，展示如何使用DynamicRows组件：
在模板文件中，使用以下代码来创建DynamicRows组件：
<div id="dynamic-rows-container" data-bind="dynamicRows: {
data: rows,
rowTemplate: 'row-template',
addRowLabel: $t('Add Row')
}">
</div>在JavaScript文件中，使用以下代码来创建Knockout.js视图模型：
define([
'uiComponent',
'ko'
], function (Component, ko) {
'use strict';
return Component.extend({
initialize: function () {
this._super();
this.rows = ko.observableArray([{
name: '',
email: ''
}]);
},
/**
* Add new row
*/
addRow: function () {
this.rows.push({
name: '',
email: ''
});
},
/**
* Remove row
*
* @param {*} row
*/
removeRow: function (row) {
this.rows.remove(row);
}
});
});在模板文件中，定义DynamicRows的行模板：
<script type="text/html" id="row-template"> <tr class="dynamic-row"> <td> <input type="text" class="input-text" data-bind="value: name"> </td> <td> <input type="text" class="input-text" data-bind="value: email"> </td> <td> <button type="button" class="action-remove" data-bind="click: $parent.removeRow"> <span>Remove</span> </button> </td> </tr> </script>
在这个示例中，DynamicRows组件将动态地显示表格行，每一行都包含一个“name”和一个“email”输入框以及一个“Remove”按钮。当用户单击“Add Row”按钮时，将动态地添加一行。当用户单击每行的“Remove”按钮时，将动态地删除该行。
需要注意的是，这个示例只是DynamicRows组件的一个简单用法示例，实际上该组件可以通过添加更多的选项和属性来实现更复杂的功能和定制。