12
votes

Formules à la feuille de calcul sur le DOM

Je cherche un moyen de lier dynamiquement des formules dans mon DOM.

Nous avons une application intensive de données et j'écris actuellement de nombreux gestionnaires pour essayer de recalculer et de mettre à jour les cellules appropriées. Cependant, il s'agit d'erreur d'erreur.

J'ai vu quelque chose qui pourrait être capable, hashigo . Cependant, il n'a pas été mis à jour dans environ un an et demi.

Est-ce que quelqu'un sait quelque chose de similaire qui est en cours de développement actif? J'ai cherché, mais c'est tout ce que j'ai réussi à trouver.

Idéalement, je n'ai besoin que de configurer la formule, et il gérera la surveillance si les champs de la formule ont changé et mettre à jour la valeur en conséquence.

EDIT: J'ai aussi jquerysheet mais c'est bien plus que Je peux utiliser, j'ai juste besoin de la formule d'analyse des aspects. Et son moteur de calcul semble tourner trop autour des cellules avec un identifiant de colonne / rangée.

EDIT2: Ceci Calcul de jQuery plugin se rapproche de ce dont j'ai besoin.

Edit3: finalement, j'aimerais pouvoir écrire quelque chose de simple que xxx

qui entraînerait la valeur de #output être recalculé chaque fois qu'une valeur dans .x ou #y modifié.

Cependant, je peux régler quelque chose de base que celui-ci xxx


3 commentaires

Cela a attiré mon œil plus tôt parce que cela me rappelait une question d'entretien d'une entreprise technique. Quelle est l'importance de ce que vous pouvez représenter des formules telles que des chaînes? (Je demande parce que j'ai une idée de la mise à jour dynamique, mais préférerait éviter l'analyse / eval .)


@Jordangray, dépend, cela pourrait ne pas être important du tout une solution.


Ce serait une chose assez gentille. Je vais regarder celui-ci.


6 Réponses :


0
votes

Ce que vous décrivez semble beaucoup comme des "liants" et "propriétés calculées" de sproutcore ou ember.js .


0 commentaires

0
votes

Jetez un coup d'œil à Plug-in de calcul de jQuery . Mais je ne suis pas sûr que vous puissiez définir une formule


0 commentaires

2
votes

Vous pouvez utiliser knockout.js pour obtenir les fonctionnalités que vous recherchez.

knockout.js implémente un motif MVVM dans votre JavaScript. Voici comment ils définissent MVVM:

MVVM et voir Modèles Modèle-View-View-View Modèle (MVVM) est un modèle de conception pour la construction d'interfaces utilisateur. Il décrit comment vous pouvez garder un UI potentiellement sophistiqué simple en le divisant en trois parties:

Un modèle: Les données stockées de votre application. Ces données représentent des objets et opérations dans votre domaine commercial (par exemple, des comptes bancaires qui peuvent effectuer des transferts d'argent) et est indépendant de toute interface utilisateur. Lorsque vous utilisez KO, Vous ferez généralement des appels Ajax sur un code côté serveur à lire et Écrivez ces données de modèle stockées.

Un modèle de vue: une représentation pure-code des données et des opérations sur un UI. Par exemple, si vous implémentez un éditeur de liste, votre vue Le modèle serait un objet qui détient une liste d'articles et exposer des méthodes ajouter et supprimer des éléments.

Notez que ce n'est pas l'UI lui-même: il n'a pas de concept de boutons ou styles d'affichage. Ce n'est pas le modèle de données persisté non plus - Il contient les données non enregistrées que l'utilisateur travaille avec. Lorsque vous utilisez KO, Vos modèles de vue sont des objets javascript purs qui ne connaissent aucune connaissance de Html. Garder le modèle de vue Résumé de cette façon le permet de rester simple, Donc, vous pouvez gérer des comportements plus sophistiqués sans vous perdre.

Une vue: une UI visible et interactive représentant l'état de la vue maquette. Il affiche des informations à partir du modèle de vue, envoie des commandes à Le modèle d'affichage (par exemple, lorsque l'utilisateur clique sur les boutons) et mises à jour Chaque fois que l'état du modèle de vue change.

Lorsque vous utilisez KO, votre vue est simplement votre document HTML avec déclaratif liaisons pour le relier au modèle de vue. Alternativement, vous pouvez utiliser Modèles générant HTML à l'aide de données à partir de votre modèle de vue.

Vous créez donc votre "modèle" qui inclut les données de la feuille de calcul, ainsi que des fonctions dont vous avez besoin pour recalculer les données. Ensuite, vous aurez votre point de vue, qui met à jour automatiquement (AKA recalcule) les données car l'utilisateur change de choses sur la page.

http://knockoutjs.com


0 commentaires

0
votes

Vous allez vouloir un cadre comme Backbone.js ou Knockout


Backbone.js

http://documentcloud.github.com/backbone/

cité à partir de la colonne vertébrale: Avec une colonne vertébrale, vous représentez vos données comme des modèles, qui peuvent être créés, validés, détruits et enregistrés sur le serveur. Chaque fois qu'une action de l'interface utilisateur provoque un attribut d'un modèle de changement, le modèle déclenche un événement "changement"; Toutes les vues qui affichent l'état du modèle peuvent être informées de la modification, de sorte qu'ils sont capables de réagir en conséquence, de renoncer à la nouvelle information. Dans une application Backbone finie, vous n'avez pas à écrire le code de la colle qui regarde dans le DOM pour trouver un élément avec un identifiant spécifique et mettre à jour le code HTML manuellement - lorsque le modèle change, les vues se mettent simplement à jour.


knockout.js

http://www.knockoutjs.com/

cité de Kooout JS: en encapsulant des données et du comportement dans un modèle de vue, vous obtenez une base propre et extensible sur laquelle construire des UIS sophistiquées sans se perdre dans un enchevêtrement de manutentionnaires d'événements et de domaines manuels mises à jour.


0 commentaires

0
votes

Vous pouvez aborder le problème comme celui-ci:

  • En stockant les vars sur le nœud DOM, vous souhaitez conserver la mise à jour via $ ('mydomelement'). Données ("VARX ', données);
  • en surchargeant la méthode SetData pour ce nœud DOM via $ ("mydomelement"). Bind ("setdata", fonction (touche, valeur) { SettimeOut (fonction () {$ ("mydomelement"). Trigger ("formule");}, 10); Valeur de retour; });
  • et en créant enfin votre formule de mise à jour comme $ ('mydomelement'). Bind ("formule", fonction () {this.html (foo ());});

    Woehoe, je relisai votre message et vous avez trouvé que vous ne spécifiez pas vraiment que vous avez des varers dans lesquels vous stockez les données ... à la place, vous avez des cellules ...

    • Dans ce cas, vous pouvez simplement ajouter un changement de change aux cellules qui mettent à jour la formule.

      hmmm, en fait, je pense que j'ai oublié quel était le problème, il semble un peu trop évident ce que je suppose ici ... désolé si de rien d'aide

      Quoi qu'il en soit ... J'ai fait un rapide Google sur la liaison de données JQuery, c'est là que j'ai trouvé que vous pouvez lier les événements SeData / GetData sur $ .Data: Ce que vous ne connaissez peut-être pas sur JQuery

      J'ai également trouvé cela, ce qui pourrait ou non intéresser votre approche de tableur: Utilisation de jQuery.Data pour détecter les modifications de formulaire

      De plus, je suis d'accord avec les réponses précédentes, vous pouvez toujours utiliser un cadre - personnellement, je préfère JSMVC


1 commentaires

J'ai trouvé quelque chose de très semblable à la première approche décrite ... c'est une partie de JavascriptMvc mais peut être téléchargée / utilisée séparément: observer.js (construire votre propre téléchargement ... "Il est sous la fonction d'assistant pour JavaScript, Une partie de jquerymx) Documentation de Observer.js



1
votes

Je viens de développer simplement un plugin qui analysse la formule, à l'aide de Jison Parser dans son noyau, la formule est actuellement limitée à la somme, avg, min et max, mais ajoutera plus de fonctions à la demande.

http://xsanisty.com/calx/


0 commentaires