javascript - 动态创建对象,动态加数据

Question

如图：1.左边两侧的表格都是点击 上边“新增”按钮动态添加出来的。点击左侧表格某一行,可以在右侧创建表格(任意多少行都行),左右是一对多关系。2.想在左侧新增行的时候,创建一个独立对象(意思就是每个行对应的对象...

我想大声告诉你 · 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 上，右侧附加不附加问题都不大

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

下面是代码只有我说的添加tr删除tr的功能实现。并没有创建对象和添加数据,有没有老哥有思路的,在线等,急！！！