Javascript – Objekte dynamisch erstellen und Daten dynamisch hinzufügen

Question

Abbildung: 1. Die Tabellen auf der linken Seite werden dynamisch hinzugefügt, indem Sie oben auf die Schaltfläche „Hinzufügen“ klicken. Klicken Sie auf eine Zeile der Tabelle links, um rechts eine Tabelle zu erstellen (beliebig viele Zeilen reichen aus), mit einer Eins-zu-viele-Beziehung links und rechts. 2. Wenn Sie links eine neue Zeile hinzufügen möchten, erstellen Sie ein unabhängiges Objekt (d. h. das Objekt, das jeder Zeile entspricht ...

我想大声告诉你 · Answer

简单说下我的思路：每个 DOM 结构维护一个数据对象，假设你的 HTML 结构为(emmet语法)：

.app-test > .col-md-5.app-test-taxpayer + .col-md-5.app-test-report

那么：

上面分为三个组件
.app-test 负责维护所有纳税人数据（即左侧表格）；
左侧列表的每个 tr 维护对应纳税人的数据（即右侧表格）；
两侧的所有 tr 都可以视为一个小的组件 —— 麻雀虽小五脏俱全；
总结出为：整个功能组件 > 左侧 tr 组件 + 右侧 tr 组件；
你可以理解为父子组件传值；

大致实现如下：
首先，两个表格属于一个功能模块，假设为 TaxesReport:

(function($){
    // 左侧 tr 组件
    var TaxesReportTaxpayer = function(trs){
        return this;
    };
    
    // 右侧 tr 组件
    var TaxesReportReporter = function(trs, taxpayer){
        
        // 当前纳税人的报表，对应右侧的列表条目
        this.reports = [];
    
        return this;
    };
    
    // 一个独立的功能模块
    var TaxesReport = function(element){
        // 全部纳税人，即左侧列表对应的数据源
        this.taxpayers = [];
        
        // 当前选择的纳税人，即左侧列表中的紫色高亮行
        this.currentTaxpayer = null;
    };
    
    // 应用实例 - 假设： .test > .col-md-5.clearfix
    var trDemo = new TaxesReport( $('.app-test') );
    
})(jQuery);

TaxesReportTaxpayer 和 TaxesReportReporter 都需要传入一个 TaxesReport 实例，用于【子组件调用父组件】方法或数据

点击左侧新建按钮新建纳税人：

// TaxesReport() 中
var _that = this,
    $taxpayerAdd = $('.button1),
    $taxpayerList = $('.zType_tbody');
   
// 新建纳税人 
$taxpayerAdd.on('click', function(){
    // 实例化纳税人组件
    var taxpayer = new TaxesReportTaxpayer(_that);
    
    // 增加行
    $taxpayerList.append( taxpayer.item );
    
    // 新增数据
    _that.setTaxpayer( taxpayer.data );
    
    // 自动高亮
    if(!_that.currentTaxpayer) {
        _that.currentTaxpayer = taxpayer;
    }
});

右侧新增纳税人的报表类型，如：

// TaxesReport() 中
var _that = this,
    $reportAdd = $('.button2'),
    $reportList = $('.zType_all');
    
// 新增纳税人报表类型
$reportAdd.on('click', function(){
    // 请从左侧选择一个纳税人
    if( !_that.currentTaxpayer ) {
        console.log('请从左侧选择一个纳税人');
        return;
    }
    
    // 实例化报表组件
    var report = new TaxesReportReporter(_that);
    
    // 增加行
    $reportList.append( report.item );
    
    // 增加数据
    // _that.currentTaxpayer.setReport(report.data)
    _that.currentTaxpayer.item.trigger('setReport', report.data);
    
    // 查看是否添加成功
    console.log( _that.currentTaxpayer.reports );

});

删除的时候，除了删除对应的 tr 结构，删除 tr 对应的数据，涉及到的两个数据对象（左侧的 taxpayers 和右侧的 reports）都是数组结构，你可以为自定义键名方法，为新的实例（纳税人或报表）创建唯一标识，并使用 ··· 建立起取值参数。

鉴于你可能都是静态数据（非从数据库中取出的带有主键标识的数据），且可能删除数组中的任意一个条目进而导致数组下标丢失，所以，最好的方法是建立一个可创建不重复值的方法，用以给生成的组件（左侧或右侧）生成并添加一个唯一标识。

高洛峰 · Answer

产生一个数据缓存，在 key-model 的形式保存数据，右边的 model 里有一个 children 保存对应的右侧数据
左侧切换的时候，直接从 key-model 数据缓存里找到对应的 model.children，重绘右侧的列表
左侧添加删除的时候对应的从 key-model 数据缓存里添加删除就好
右侧添加删除的时候也是一样的，这个时候可以对找到对应的 model.children

由于使用 jQuery，jQuery 可以通过 data() 把数据附加到 DOM 上，所以上述 key-model 可以直接采用之种形式把每个 model 附加到每行(左侧)的 DOM 上，右侧附加不附加问题都不大

思路如此，代码你可以先尝试写下

Das Folgende ist der Code, der nur die Funktion zum Hinzufügen von tr und Löschen von tr implementiert, wie ich erwähnt habe. Ich habe keine Objekte erstellt oder Daten hinzugefügt. Hat jemand irgendwelche Ideen? ! !