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-testResponsable 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 组件;

Vous pouvez le comprendre comme une transmission de valeurspour les composants parent-enfant

• ;

La mise en œuvre approximative est la suivante :

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

TaxesReportTaxesReportTaxpayer 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).

1. 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

.

2. 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

3. 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é

4. 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 viadata(), 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