JS Excel公式 Demo

最新推荐文章于 2024-10-09 09:19:16 发布

Teln_小凯

最新推荐文章于 2024-10-09 09:19:16 发布

阅读量1.1k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq873113580/article/details/85254788

版权

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