c# - 在 Google Visualization API (JavaScript) 中动态添加行

标签 c# javascript asp.net asp.net-mvc-3 google-visualization

我正在开发一个 ASP.NET MVC 3 项目,该项目要求我通过用户输入上传 a.xls/.xlsx,将其加载到 DataTable 中并将其视觉效果放置在 View 中。

听起来很简单......

我能够创建 DataTable 并将对象传递回 View ,但是我无法通过 Google 的可视化 API 在 View 上呈现数据表 - 我见过的所有示例都需要静态表示的字段,即:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

但是,由于我的应用程序正在接受用户输入,因此列标题、维度和内容都是动态的。我正在寻找一种动态添加数据的方法。这是我当前拥有的代码,其中 Model 是传入的 DataTable:

@model System.Data.DataTable
@using GridMvc.Html
@{
    ViewBag.Title = "File Upload";
    <h2>@ViewBag.Message</h2>
}

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
        google.load('visualization', '1', { packages: ['table'] });
        google.setOnLoadCallback(drawTable);
        function drawTable( Model ) {
            var data = new google.visualization.DataTable();
            var numRows = Model.Rows.Count;
            var numCols = Model.Rows[0].Count;

            for (var i = 0; i < numCols; i++)
                data.addColumn('string', Model.Rows[0].ItemArray[i]);

            for (var i = 1; i < numRows; i++)
                data.addRow(Model.Rows[i].ItemArray);         

            //data.addRows([['2967773', '13-1014428', '', 'Not Recommended -Internship', '7- Not Recommended',
            //                'University 1', '', '', '', '', '', '', '' ]]);

            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, { showRowNumber: true });
        }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
  <p>Done</p>
</html>

有人知道该怎么做吗? 提前致谢!

最佳答案

正如上面的评论所提到的,C# 中的 DataTables 与 Google API 中的 DataTables 不同。我最终找到了一个第三方库( Example )来处理这个问题,并将以下内容传递到 viewbag 中:

ViewBag.Data = new Bortosky.Google.Visualization.GoogleDataTable(ConvertTable( DATA )).GetJson();

关于c# - 在 Google Visualization API (JavaScript) 中动态添加行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23963097/

相关文章:

asp.net - 使用分页在 RadGrid Telerik 中查找记录

c# - 如何在 C# .NET 中实现 OAuth2 提供者和消费者

c# - 如何从并发运行的任务更新进度条

c# - Xamarin Forms ListView ItemsSource 问题

c# - 获取控件相对于整个屏幕的位置?

javascript - 使用 range 操作选择

asp.net - asp.net MVC3 中的错误处理

javascript - 在 Javascript 中通过将长度设置为 0 来 chop 数组不起作用

javascript - 在 JavaScript 中动态创建复杂对象

javascript - 使用 javascript 通过 asp.net 进行验证