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" });
<script>
function cknb(ele){
ele.value=ele.value.replace(/[^0-9.]/g,"");
}
var app = angular.module('myApp', []);
app.filter('tonb', function() { //可以注入依赖
return function(text) {
if(isNaN(text) || text=="Infinity")
{
return "0.00";
}
return text.toFixed(2)
}
});
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);
//});
<% } %>
});
function save(){
var jsonData=[];
$("#excel tbody tr").each(function(){
var fv=$(this).find("[id^='cell_F']").val();
var qv=$(this).find("[id^='cell_Q']").val();
var zv=$(this).find("[id^='cell_Z']").val();
jsonData.push({fv:fv,qv:qv,zv:zv});
});
alert(JSON.stringify(jsonData));
}
</script>
</body>
</html>
后台
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; }
}
}
2588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
