ASP.Net 中的 JQuery Flexigrid 插件答案

【问题标题】：JQuery Flexigrid plug-in in ASP.NetASP.Net 中的 JQuery Flexigrid 插件
【发布时间】：2009-07-23 14:44:28
【问题描述】：

我有一个使用 C# 的 ASP.Net 项目，并在一个 aspx 页面上有一个中继器控件，它通过迭代数据源来构建一个 html 表。我想使用 JQuery Flexigrid 插件使表格可滚动，但由于缺少有关插件的文档，我无法弄清楚如何使其工作。有谁知道如何做到这一点，或者有示例代码可以分享？

【问题讨论】：

标签： c# asp.net jquery

【解决方案1】：

一个简单的谷歌搜索“asp.net+flexigrid”给了我this和this

我还必须提到，对于 flexigrid 的支持看起来很薄，所以你可能会更好地查看记录更好的 jqGrid

【讨论】：

【解决方案2】：

我自己从未使用过 Flexigrid，但是在查看网站上的示例后，我会提出我的建议。

看起来您需要使用转发器创建一个格式正确的 html 表格，其中至少包含一个 thead 和 tbody 部分。

<table id="mytable">
  <thead>
      <tr>
        <th>header1</th>
        <th>header2</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td>table data 1</td>
        <td>table data 2</td>
      <tr>
  </tbody>
</table>

完成后，对以下内容进行简单调用即可使用默认设置创建 Flexigrid 表：

$("#mytable").flexigrid();

从那里你可以传递看起来有很多选项，让它看起来像你想要的那样漂亮。

至于中继器本身，有很多方法可以根据您的需要进行设置。可能最简单的方法如下：

<table>
<thead>
  <tr>
    <th><asp:label id="header1" runat="server"></asp:label></th>
    <th><asp:label id="header2" runat="server"></asp:label></th>
  </tr>
</thead>
<tbody>
<asp:repeater id="myrepeater" runat="server" OnItemDataBound="myrepeater_ItemDataBound">
  <ItemTemplate>
    <tr>
      <td><asp:label id="data1" runat="server"></asp:label></td>
      <td><asp:label id="data2" runat="server"></asp:label></td>
    </tr>
  </ItemTemplate>
</asp:repeater>
</tbody>
</table>

您的数据绑定事件看起来像这样：

public void myrepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
  myDataObject = e.Item.DataItem;
  Label data1 = e.Item.FindControl("data1");
  Label data2 = e.Item.FindControl("data2");

  data1.Text = myDataObject.data1;
  data2.Text = myDataObject.data2;
}

【讨论】：

这正是我一直在尝试做的，但没有成功。创建 flexigrid 表的调用需要包含在文档就绪函数中，如下所示，否则它什么也不做。但是当我运行代码时，我会收到一条 Invalid argument 错误消息。 $(document).ready(function() { $('.flex1').flexigrid(); });
我已经测试了他的示例，在 jQuery 版本、$(document).ready 用法、删除 thead 和 tbody 标记方面有很多变体，似乎没有任何错误。查看您页面的源代码并确保表格格式正确。

【解决方案3】：

不要试图通过id 来引用表格，你最好使用一个类来识别表格。如果您查看页面源代码，您会发现表 id 不是 mytable - 它是由 ASP.NET 破坏的，具体取决于您的页面结构。

【讨论】：