javascript - Créer dynamiquement des objets et ajouter dynamiquement des données

Question

Figure : 1. Les tableaux du côté gauche sont ajoutés dynamiquement en cliquant sur le bouton "Ajouter" ci-dessus. Cliquez sur une ligne du tableau à gauche pour créer un tableau à droite (n'importe quel nombre de lignes fera l'affaire), avec une relation un-à-plusieurs à gauche et à droite. 2. Lorsque vous souhaitez ajouter une nouvelle ligne à gauche, créez un objet indépendant (c'est-à-dire l'objet correspondant à chaque ligne...

我想大声告诉你 · Answer

Permettez-moi de décrire brièvement mes réflexions : Chaque structure DOM maintient un objet de données, en supposant que votre structure HTML est (syntaxe emmet) :

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

Alors :

Ce qui précède est divisé en trois composants
.app-test Responsable de la maintenance de toutes les données des contribuables (c'est-à-dire le tableau de gauche
Chaque tr dans la liste de gauche conserve les données du contribuable correspondant (c'est-à-dire le tableau de droite
Tous les tr des deux côtés peuvent être considérés comme un petit composant - un moineau est petit mais possède tous les organes internes
se résume comme suit : 整个功能组件 > 左侧 tr 组件 + 右侧 tr 组件 ;
;

Premièrement, les deux tables appartiennent à un module fonctionnel, en supposant

:

(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);

TaxesReport TaxesReportTaxpayer et TaxesReportReporter doivent tous deux transmettre une instance TaxesReport pour la méthode ou les données [composant enfant pour appeler le composant parent]

Cliquez sur le nouveau bouton à gauche pour créer un nouveau contribuable :

// 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;
    }
});

Ajoutez le type de déclaration du contribuable à droite, tel que :

// 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 );

});

Lors de la suppression, en plus de supprimer la structure tr correspondante et de supprimer les données correspondant à tr, les deux objets de données impliqués (

à gauche) établissent des paramètres de valeur

. taxpayers 和右侧的 reports）都是数组结构，你可以为自定义键名方法，为新的实例（纳税人或报表）创建唯一标识，并使用 ···Puisque vous pouvez avoir des données statiques (données avec identification par clé primaire qui ne sont pas extraites de la base de données), et que vous pouvez supprimer n'importe quelle entrée dans le tableau et entraîner la perte de l'indice du tableau, le meilleur moyen est donc de créer un Une méthode de valeur non dupliquée utilisée pour générer et ajouter un identifiant unique au composant généré (gauche ou droite).

高洛峰 · Answer

Générez un cache de données et enregistrez les données sous forme de modèle-clé. Il y a un enfant dans le modèle à droite pour enregistrer les données correspondantes à droite
Lors de l'allumage à gauche, recherchez le model.children correspondant directement depuis le cache de données du modèle clé et redessinez la liste à droite
Lors de l'ajout ou de la suppression sur le côté gauche, ajoutez et supprimez simplement du cache de données de modèle clé
Il en va de même lors de l'ajout et de la suppression sur le côté droit, vous pouvez trouver le modèle correspondant.enfants

Depuis que jQuery est utilisé, jQuery peut attacher des données au DOM via data(), de sorte que le modèle clé ci-dessus peut directement attacher chaque modèle au DOM de chaque ligne (côté gauche) sous la forme de

Il n'y a aucun problème à attacher. c'est du côté droit ou pas. Pas grand

C'est l'idée, vous pouvez d'abord essayer d'écrire le code🎜

Ce qui suit est le code qui implémente uniquement la fonction d'ajout de tr et de suppression de tr comme je l'ai mentionné. Je n'ai pas créé d'objets ni ajouté de données. Quelqu'un a-t-il des idées ? Attendez en ligne ! ! !