slickgrid - ASP.Net 3.5 Web フォームアプリの slickgrid 実装に関するガイダンスのリクエスト

Question

ASP.net Web アプリケーションで slickgrid を実装する方法についてのガイダンスを探しています。アプリケーションは、SQL Server 2005 データベースにクエリを実行し、現在はグリッドビューを使用してデータを表示しています。私の目標は、グリッドビューの使用を排除し、それらを slickgrid に置き換えることです。私のコードは以下のとおりで、どのように、またはどこから始めればよいかわかりません。

私の Dashboard.aspx.cs ファイル (以下) では、データをグリッドビューにバインドしていることがわかります。データバインディングを置き換えてスリックグリッドを利用するにはどうすればよいですか?

助けてくれてありがとう。

Dashboard.aspx ページ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <table style="width: 100%; table-layout: auto; border-top-style: none; border-right-style: none; border-left-style: none; border-collapse: collapse; border-bottom-style: none;">
        <tr>
            <td rowspan="8" align="center" valign="top">
                <asp:Button ID="btnRefresh" runat="server" OnClick="btnRefresh_Click" Text="Refresh"
                    Width="100px" />
                    <br />
                <asp:Button ID="Button2" runat="server" PostBackUrl="~/InterfaceListing.aspx" Text="Interface List"
                    Width="100px" />
            </td>
            <td style="color: #990000; font-family: Tahoma; height: 1px; text-align: left; width: 124px;">
                &nbsp;</td>
            <td style="width: 19px; height: 1px">
                &nbsp;</td>
            <td style="height: 1px; width: 216px;">
                &nbsp;</td>
            <td style="width: 20%; height: 19px">
                &nbsp;</td>
        </tr>
        <tr>
            <td style="color: #990000; font-family: Tahoma; height: 1px; text-align: left; width: 124px;">
                <span style="font-size: 11pt; vertical-align: top;">
                    <asp:Label ID="Label2" runat="server" Text="Last 10 Jobs Executed" Width="307px"></asp:Label></span></td>
            <td style="width: 19px; height: 1px">
            </td>
            <td style="height: 1px; width: 216px;">
                <span style="font-size: 11pt; color: #990000; font-family: Tahoma">
                    <asp:Label ID="Label3" runat="server" Text="Interface Summary" Width="185px"></asp:Label></span></td>
            <td style="width: 20%; height: 19px">
            </td>
        </tr>
        <tr>
            <td style="width: 124px; text-align: left; vertical-align: top;">
                <asp:GridView ID="gvLast10" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    Font-Names="Tahoma" Font-Size="8pt" ForeColor="#333333"
                    GridLines="None" Width="800px" >
                    <RowStyle BackColor="#FFFBD6" BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333" />
                    <Columns>
                        <asp:BoundField DataField="InterfaceName" HeaderText="Name" SortExpression="InterfaceName">
                            <HeaderStyle HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" />
                        </asp:BoundField>
                        <asp:BoundField DataField="TotalTransactionCount" HeaderText="Transaction Count" SortExpression="TotalTransactionCount">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                        <asp:BoundField DataField="ErrorsOccured" HeaderText="Status" SortExpression="ErrorsOccured">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                        <asp:BoundField DataField="RunTime" HeaderText="Duration" ReadOnly="True" SortExpression="RunTime">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                        <asp:BoundField DataField="Started" HeaderText="Started" SortExpression="DateBegan">
                            <HeaderStyle HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" />
                        </asp:BoundField>
                    </Columns>
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <HeaderStyle BackColor="#990000" BorderColor="#990000" BorderStyle="Solid" BorderWidth="1px"
                        Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
            </td>
            <td style="vertical-align: top; width: 19px; text-align: left">
            </td>
            <td style="width: 216px; vertical-align: top; text-align: left;">
                <asp:GridView ID="gvPackageCount" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    ForeColor="#333333" GridLines="None" Width="195px" Font-Names="Tahoma" Font-Size="8pt">
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" BorderStyle="Solid" BorderWidth="1px" />
                    <Columns>
                        <asp:BoundField DataField="Status" HeaderText="Status" ReadOnly="True" SortExpression="Status"
                            Visible="False" />
                        <asp:BoundField DataField="Description" HeaderText="Description" ReadOnly="True"
                            SortExpression="Description">
                            <HeaderStyle HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" />
                        </asp:BoundField>
                        <asp:BoundField DataField="Count" HeaderText="Count" ReadOnly="True"
                            SortExpression="Count">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                    </Columns>
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" BorderColor="#990000" BorderStyle="Solid" BorderWidth="1px" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
            </td>
            <td style="width: 20%; height: 19px">
            </td>
        </tr>
        <tr>
            <td style="width: 124px; color: #990000; background-color: white; height: 19px;">
                <span style="font-size: 11pt; font-family: Tahoma">
                    <br />
                    <asp:Label ID="Label1" runat="server" Text="Next 10 Jobs Scheduled" Width="236px"></asp:Label></span></td>
            <td style="width: 19px; height: 19px">
            </td>
            <td style="width: 216px; height: 19px;">
                <span style="font-size: 11pt; font-family: Tahoma"></span>
            </td>
            <td style="width: 20%; height: 19px">
            </td>
        </tr>
        <tr>
            <td style="width: 124px; vertical-align: top; height: 147px;">
                <asp:GridView ID="gvNext10" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    Font-Names="Tahoma" Font-Size="8pt" ForeColor="#333333"
                    GridLines="None" Width="800px">
                    <RowStyle BackColor="#FFFBD6" BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333" />
                    <Columns>
                        <asp:BoundField DataField="Interfacename" HeaderText="Name" SortExpression="Interfacename">
                            <HeaderStyle HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" />
                        </asp:BoundField>
                        <asp:BoundField DataField="Next Run" HeaderText="Next Run" ReadOnly="True" SortExpression="Next Run">
                            <HeaderStyle HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" />
                        </asp:BoundField>
                    </Columns>
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <HeaderStyle BackColor="#990000" BorderColor="#990000" BorderWidth="1px" Font-Bold="True"
                        ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
            </td>
            <td style="width: 19px; height: 147px">
            </td>
            <td style="width: 216px; height: 147px; vertical-align: bottom; text-align: center;">
                &nbsp;
                </td>
            <td style="width: 20%; height: 19px">
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top; width: 124px">

            </td>
            <td style="width: 19px">
            </td>
            <td style="width: 216px">
            </td>
            <td style="width: 20%; height: 19px">
            </td>
        </tr>
        <tr>
            <td style="color: #990000; font-family: Tahoma; height: 1px; text-align: left; width: 124px;">
                <span style="font-size: 11pt; vertical-align: top;">
                    <asp:Label ID="Label4" runat="server" Text="Jobs In Process" 
                    Width="307px"></asp:Label></span></td>
            <td style="width: 19px; height: 1px">
                &nbsp;</td>
            <td style="height: 1px; width: 216px;">
                &nbsp;</td>
            <td style="width: 20%; height: 19px">
                &nbsp;</td>
        </tr>
        <tr>
            <td style="color: #990000; font-family: Tahoma; height: 1px; text-align: left; width: 124px;">
                <asp:GridView ID="gvInProcess" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    Font-Names="Tahoma" Font-Size="8pt" ForeColor="#333333"
                    GridLines="None" Width="800px" >
                    <RowStyle BackColor="#FFFBD6" BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333" />
                    <Columns>
                        <asp:BoundField DataField="InterfaceName" HeaderText="Name" SortExpression="InterfaceName">
                            <HeaderStyle HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" />
                        </asp:BoundField>
                        <asp:BoundField DataField="Started" HeaderText="Started" SortExpression="DateBegan">
                            <HeaderStyle HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" />
                        </asp:BoundField>
                        <asp:BoundField DataField="RunTime" HeaderText="Duration" 
                            SortExpression="RunTime" ReadOnly="True">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                    </Columns>
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <HeaderStyle BackColor="#990000" BorderColor="#990000" BorderStyle="Solid" BorderWidth="1px"
                        Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
            </td>
            <td style="width: 19px; height: 1px">
                &nbsp;</td>
            <td style="height: 1px; width: 216px;">
                &nbsp;</td>
            <td style="width: 20%; height: 19px">
                &nbsp;</td>
        </tr>
    </table>
    &nbsp;
    <br />
    <br />
    </div>
    </form>
</body>
</html>

ダッシュボード.aspx.cs

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

namespace IntegrationSupport
{
    public partial class Dashboard : System.Web.UI.Page
    {
        ClassData cd = new ClassData();

        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt1 = cd.Dashboard("Summary");
            gvPackageCount.DataSource = dt1;
            gvPackageCount.DataBind();

            DataTable dt2 = cd.Dashboard("Last10");
            gvLast10.DataSource = dt2;
            gvLast10.DataBind();

            DataTable dt3 = cd.Dashboard("Next10");
            gvNext10.DataSource = dt3;
            gvNext10.DataBind();

            DataTable dt4 = cd.Dashboard("InProcess");
            gvInProcess.DataSource = dt4;
            gvInProcess.DataBind();

        }
        protected void btnRefresh_Click(object sender, EventArgs e)
        {
            Response.Redirect("~/Dashboard.aspx");

        }
    }
}

ClassData.cs:

public DataTable Dashboard(string Section)
        {
            //Get Dashboard Sections...
            string sStoredProc = string.Empty;
            switch (Section)
            {
                case "Summary":
                    sStoredProc = "InterfaceListing_DashboardDataset";
                    break;
                case "Last10":
                    sStoredProc = "InterfaceListing_Dashboard_6Last10Jobs";
                    break;
                case "Next10":
                    sStoredProc = "InterfaceListing_Dashboard_7Next10Jobs";
                    break;
                case "InProcess":
                    sStoredProc = "InterfaceListing_Dashboard_JobsInProcess";
                    break;
                default:
                    sStoredProc = "";
                break;   

            }


            SqlCommand cmd = new SqlCommand();
            Open();
            cmd.Connection = con;
            cmd.CommandText = sStoredProc;
            cmd.CommandType = CommandType.StoredProcedure;

            Ada = new SqlDataAdapter(cmd);
            DataTable dtInterface = new DataTable();
            Ada.Fill(dtInterface);
            return dtInterface;

        }

slickgrid - ASP.Net 3.5 Web フォーム アプリの slickgrid 実装に関するガイダンスのリクエスト

1 に答える 1

Related

Reference

slickgrid - ASP.Net 3.5 Web フォームアプリの slickgrid 実装に関するガイダンスのリクエスト