JS Excel公式 Demo

JS插件：angluarjs

需求描述：需要在Table里面做一些计算列以及合并列，类似在excel里面做一些常规的加减乘除运算

直接修改一个列就能联动的修改相关公式对应的值

效果图

前台：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExcelDemo.aspx.cs" Inherits="ExcelDemo.ExcelDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExcelDemo</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <button type="button" οnclick="save();">保存</button>
        <div ng-app="myApp" ng-controller="myCtrl">
            <table id="excel">
                <thead>
                    <tr>
                        <td>名称</td>
                        <td>费用</td>
                        <td>期初</td>
                        <td>占比</td>
                    </tr>
                </thead>
                <tbody>
                    <%foreach (var item in dbList)
                      { %>

<tr>
                        <td>
                            <%=item.Name %>
                        </td>
                        <td>
                            <input id="cell_<%=item.FId %>" οnkeyup="cknb(this);" ng-model="<%=item.FReg %>">
                        </td>
                        <td>
                            <input id="cell_<%=item.QId %>" ng-model="<%=item.QReg %>">
                        </td>
                        <td>
                            <input id="cell_<%=item.ZId %>" ng-model="<%=item.ZReg %>">
                        </td>
                    </tr>

<% } %>
</tbody>
</table>

</div>
    </form>
    说明：<br />
    上级补助收入=01补助收入 +02补助收入 <br />
    本年收入合计=上级补助收入/政府补助收入 <br />
    占比=期初/费用*100<br />
    Model配置<br />
     {Name = "上级补助收入", FValue = "0", FId = "F403", FReg = "F40301*1+F40302*1", QValue = "0", QId = "Q403", QReg = "Q40301*1+Q40302*1", ZValue = "0", ZId = "Z403", ZReg = "((F40301*1)+(F40302*1))/((Q40301*1)+(Q40302*1))*100 | tonb" });
            <br />{Name = "01补助收入", FValue = "0", FId = "F40301", FReg = "F40301", QValue = "0", QId = "Q40301", QReg = "Q40301", ZValue = "0", ZId = "Z40301", ZReg = "(F40301)/(Q40301)*100 | tonb" });
            <br />{ Name = "02补助收入", FValue = "0", FId = "F40302", FReg = "F40302", QValue = "0", QId = "Q40302", QReg = "Q40302", ZValue = "0", ZId = "Z40302", ZReg = "(F40302)/(Q40302)*100 | tonb" });
          <br /> { Id = "404", Name = "政府补助收入", FValue = "0", FId = "F404", FReg = "F404", QValue = "0", QId = "Q404", QReg = "Q404", ZValue = "0", ZId = "Z404", ZReg = "(F404)/(Q404)*100 | tonb" });
           <br />{ Id = "409", Name = "本年收入合计", FValue = "0", FId = "F409", FReg = "F40301*1+F40302*1+F404*1", QValue = "0", QId = "Q409", QReg = "Q40301*1+(Q40302*1)+(Q404*1)", ZValue = "0", ZId = "Z409", ZReg = "((F40301*1)+(F40302*1)+(F404*1))/((Q40301*1)+(Q40302*1)+(Q404*1))*100 | tonb" });

app.controller('myCtrl', function ($scope) {
               <% foreach (var item in dbList)
                  { %>

                        $scope.<%=item.FId%> = parseFloat( "<%=item.FValue%>");
                        $scope.<%=item.QId%> = parseFloat("<%=item.QValue%>");
                        $scope.<%=item.ZId%> = parseFloat("<%=item.ZValue%>");

//$scope.$watch("<%=item.FId%>",function(newValue){

                            //$scope.<%=item.FId%> = parseFloat(newValue);
                        // });
                        //$scope.$watch("<%=item.QId%>",function(newValue){
                            //$scope.<%=item.QId%> = parseFloat(newValue);
                          //});
                        //$scope.$watch("<%=item.ZId%>",function(newValue){
                            //$scope.<%=item.ZId%> = parseFloat(newValue);
                          //});
                 <% } %>

});

后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ExcelDemo
{
    public partial class ExcelDemo : System.Web.UI.Page
    {
        public List<Model> dbList = new List<Model>();

        protected void Page_Load(object sender, EventArgs e)
        {
            dbList.Add(new Model { Id = "403", Name = "上级补助收入", FValue = "0", FId = "F403", FReg = "F40301*1+F40302*1", QValue = "0", QId = "Q403", QReg = "Q40301*1+Q40302*1", ZValue = "0", ZId = "Z403", ZReg = "((F40301*1)+(F40302*1))/((Q40301*1)+(Q40302*1))*100 | tonb" });
            dbList.Add(new Model { Id = "40301", Name = "01补助收入", FValue = "0", FId = "F40301", FReg = "F40301", QValue = "0", QId = "Q40301", QReg = "Q40301", ZValue = "0", ZId = "Z40301", ZReg = "(F40301)/(Q40301)*100 | tonb" });
            dbList.Add(new Model { Id = "40302", Name = "02补助收入", FValue = "0", FId = "F40302", FReg = "F40302", QValue = "0", QId = "Q40302", QReg = "Q40302", ZValue = "0", ZId = "Z40302", ZReg = "(F40302)/(Q40302)*100 | tonb" });
            dbList.Add(new Model { Id = "404", Name = "政府补助收入", FValue = "0", FId = "F404", FReg = "F404", QValue = "0", QId = "Q404", QReg = "Q404", ZValue = "0", ZId = "Z404", ZReg = "(F404)/(Q404)*100 | tonb" });
            dbList.Add(new Model { Id = "409", Name = "本年收入合计", FValue = "0", FId = "F409", FReg = "F40301*1+F40302*1+F404*1", QValue = "0", QId = "Q409", QReg = "Q40301*1+(Q40302*1)+(Q404*1)", ZValue = "0", ZId = "Z409", ZReg = "((F40301*1)+(F40302*1)+(F404*1))/((Q40301*1)+(Q40302*1)+(Q404*1))*100 | tonb" });
        }
    }
}

Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ExcelDemo
{
    public class Model
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string FValue { get; set; }
        public string FId { get; set; }
        public string FReg { get; set; }
        public string QValue { get; set; }
        public string QId { get; set; }
        public string QReg { get; set; }
        public string ZValue { get; set; }
        public string ZId { get; set; }
        public string ZReg { get; set; }
    }
}

JS Excel公式 Demo相关推荐

JAVA调用Excel公式和js判断选择计算有效集合
需求: 1.选择某一列结果集,选择当前值和后面某一行的某个值,两个结果做Excel公式运算,之后判断结果集是否符合条件: 2.前面的条件符合,需要再根据一行数据的某几列进行逻辑判断,是否符合条件(不涉 ...
微软：Excel公式是世界上使用最广泛的编程语言
喜欢就关注我们吧! 文|一君微软近日推出了一项 Excel 公式构建的新功能 LAMBDA,正则测试阶段.LAMBDA 允许使用 Excel 自身的公式语言自定义功能,而过去,Excel 中需要通过 ...
jeecg 导出的excel不能使用公式_微软：Excel公式是世界上使用最广泛的编程语言...
喜欢就关注我们吧! 文|一君微软近日推出了一项 Excel 公式构建的新功能 LAMBDA,正则测试阶段.LAMBDA 允许使用 Excel 自身的公式语言自定义功能,而过去,Excel 中需要通过 ...
Excel 公式格式化 /美化工具，数据统计效率++
我们在编写Excel公式,特别是复杂的,带有多层if嵌套的公式,往往会显得让人难以阅读,我最近开发了一个网页版的Excel公式格式化/美化工具来帮助大家更好地理解您或您同事写的Excel公式: Git ...
oracle 统计一年中每个月数据总和_excel表格有每月数据怎样统计全年的-用excel公式怎样计算每年每个月的数据总和？...
excel表格中如何统计1月到12月的数据我用的是Excel07版为你的表已经是存在的,并能力有限,所只能给你说下面这一种方法了,用着也单的!下边我做一个示范: 第一步在Excel表格右侧空白任意 ...
EXCEL公式、函数、图表应用技巧800问
全书以800个问题贯穿始终,内容极为丰富.实用,读者日常使用中遇到的各类问题基本可一网打尽.全书共分15章:第1章介绍Excel公式编辑问题:第2章介绍Excel函数编辑问题:第3章介绍日期与时间函数 ...
Excel公式与函数案例速查手册/电脑技巧从入门到精通丛书
出版社: 机械工业出版社; 第1版 (2013年12月1日) 丛书名: 电脑技巧从入门到精通丛书平装: 770页语种: 简体中文开本: 32 条形码: 9787111448761 商品尺寸: 1 ...
matlab用辛普森公式求积分_如何用Excel公式求最大值对应的行列序号
微信公众号: Excel and Python 微信名搜索: 实用办公编程技能如何用Excel公式求最大值对应的行列序号呢? 下面,我们来看看来自问题互动栏目的一个具体问题. 具体问题:求出哪一天哪 ...
js按键处理demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

JS Excel公式 Demo

JS Excel公式 Demo相关推荐

最新文章

热门文章