datatable中的ShieldUI网格数据

Question

我用jQuery实现了一个ShieldUI网格视图。我遇到问题的是网格的数据源。

下面是他们的例子：http://demos.shieldui.com/web/grid-general/basic-usage

我需要从后面代码中创建的datatable发送数据。

是否有可能将这些数据发送到ShieldDataSource？

谢谢。

<%@ Page Title="" Language="C#" MasterPageFile="Site.Master" AutoEventWireup="true" CodeBehind="Progress2.aspx.cs" Inherits="INAWebAppTest.Form.Progress2" %>

<%@ Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent2" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>


    <section class="success" id="about">
        <div class="container">


            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>

                    <asp:Label ID="Label1" runat="server"><h3>Progress</h3></asp:Label>
                    <div class="g-hr type_short type_simple">
                        <span class="g-hr-h">
                            <i class="fa fa-"></i>
                        </span>
                    </div>
                    <div style="vertical-align: top; margin-bottom: 0px; align-content: center; margin-left: auto; margin-right: auto">
                        <asp:Button ID="LeftButton" runat="server" Text="<" class="g-btn type_primary size_small" OnClick="ibDLeft_Click" />
                        <asp:TextBox ID="tbDate" runat="server" AutoPostBack="True" OnTextChanged="tbDate_TextChanged" ReadOnly="true" Style="width: 30%; text-align: center" TextMode="SingleLine"></asp:TextBox>
                        <asp:Button ID="RightButton" runat="server" Text=">" class="g-btn type_primary size_small" OnClick="ibDRight_Click" />

                    </div>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator" runat="server" ControlToValidate="tbDate" ErrorMessage="Odaberite datum" />

                    <shield:ShieldDataSource ID="shieldDataSource" runat="server" Data="testData"> </shield:ShieldDataSource>
                    <shield:ShieldGrid ID="ShieldGrid1" runat="server" ClientDataSourceID="shieldDataSource">
                        <Columns>
                            <shield:GridColumn Field="dfCategory" Width="70px" Title="ID"></shield:GridColumn>
                            <shield:GridColumn Field="dfActivityID" Title="Person Name"></shield:GridColumn>
                            <shield:GridColumn Field="dfActivityName" Title="Company Name"></shield:GridColumn>
                        </Columns>
                    </shield:ShieldGrid>                  
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </section>
</asp:Content>

Answer 1

您可以在页面加载方法中执行以下操作，只需在aspx中将DataSource的数据属性设置为testData即可。

<shield:ShieldDataSource ID="shieldDataSource" runat="server" Data="testData"> 
    </shield:ShieldDataSource>
    <shield:ShieldGrid ID="grid" runat="server" ClientDataSourceID="shieldDataSource">
        <Sorting Enabled="true" />
        <Columns>
            <shield:GridColumn Field="Id" />
            <shield:GridColumn Field="Name" />
            <shield:GridColumn Field="Category" />
            <shield:GridColumn Field="Date" />
            <shield:GridColumn Field="Available" />
        </Columns>
    </shield:ShieldGrid>


protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                var dt = new DataTable();
                dt.Columns.Add(new DataColumn("Id", typeof(int)));
                dt.Columns.Add(new DataColumn("Name", typeof(string)));
                dt.Columns.Add(new DataColumn("Category", typeof(int)));
                dt.Columns.Add(new DataColumn("Date", typeof(DateTime)));
                dt.Columns.Add(new DataColumn("Available", typeof(bool)));

                var row = dt.NewRow();
                row["Id"] = 1;
                row["Name"] = "test";
                row["Category"] = 2;
                row["Date"] = DateTime.Now;
                row["Available"] = true;
                dt.Rows.Add(row);

                var source = (from r in dt.AsEnumerable()
                              select new
                              {
                                  Id = r["Id"],
                                  Name = r["Name"],
                                  Category = r["Category"],
                                  Date = r["Date"],
                                  Available = r["Available"],
                              }).ToList();
                var script = "window.testData = " + Shield.Mvc.UI.Common.Serialization.JavaScriptSerializer.Serialize(source);
                ClientScript.RegisterClientScriptBlock(this.GetType(), "TableData", script, true);
            }
        }

Answer 2

还可以将datatable转换为数组，并将其分配给shieldDataSource。