将数据表绑定到引导表答案

【问题标题】：Bind a datatable to a bootstrap table将数据表绑定到引导表
【发布时间】：2016-07-01 18:48:14
【问题描述】：

我想将数据表绑定到引导表。数据表是 sql 查询的结果。我已经看到有办法用 json 来做到这一点。但我是 json 新手，无法理解这些方法。谁能解释如何做到这一点？提前致谢。

【问题讨论】：

你指的是datatables.js 日期表吗？还是您指的是 C# 数据表？
到 C# 数据表..

【解决方案1】：

如果你不想使用 MVC，

在后端部分添加：

string query;
SqlCommand SqlCommand;
SqlDataReader result;
int sindex=DropDownList1.SelectedIndex+1;
int hindex =DropDownList3.SelectedIndex+1;
SqlDataAdapter adapter = new SqlDataAdapter();
//Open the connection to db
conn.Open();                
query = string.Format("select * from table where clumn='"+s+"' ", s);
SqlCommand = new SqlCommand(query, conn);
adapter.SelectCommand = new SqlCommand(query, conn);              
result = SqlCommand.ExecuteReader();

而在前端部分：

<div class="row" style="color:#ba9494;margin-top:15%;margin-left:5%">
    <div class="col-lg-2 align-center" >
          Id
    </div>
    <div class="col-lg-2 align-center">
          Name
    </div>
    <div class="col-lg-1 align-center">
        OtherIds
    </div> 
    <div class="col-lg-7 align-center">
        Description
    </div>

</div>

foreach (var item in result)
{
  <div class="row" style="margin-left:5%">
    <div class="col-lg-2 align-center">
           item.Id
    </div>
    <div class="col-lg-2 align-center">
           item.Names
    </div>
    <div class="col-lg-1 align-center">
           item.OthersId
    </div>      
    <div class="col-lg-7 align-center">
           item.Descriptions
    </div>
  </div>

}

【讨论】：

【解决方案2】：

要在没有 Json 的情况下执行此操作，您可以使用带有项目模板的 DataRepeater：

<table>
    <asp:Repeater id="tableRepeater" runat="server" DataSourceID="TableDataSource">
        <ItemTemplate>
            <tr>
                <td><%# Eval("TableProperty") %></td>
            </tr>
         </ItemTemplate>
     </asp:repeater>
</table>

您可以对 div 或 ItemTemplate 中的任何您喜欢的内容执行相同操作，并且查询中的每一行都会重复此操作。你可以添加任何你需要的引导类来使它工作。

【讨论】：

【解决方案3】：

这可能有助于获取 json：How to get SQL Server query result's data into JSON Format ?

那么你的脚本中有这样的东西吗？

    $('#elementSelector').bootstrapTable({
        data: yourDataGoesHere,
        onLoadError: function () { // deal with error },
        columns: [
            { field: 'dataFieldName', title: 'aTitle', class: 'col-md-4', sortable: true }
        ]
    });

【讨论】：

【解决方案4】：

您不必使用 json。如果您熟悉 ASP.NET MVC 那么这很简单，只需制作您的数据库，使用 models 导入它并在您的 views 中即可调用您的模型及其包含的项目。 示例：

@model IEnumerable<NameOfYourProject.Models.ModelResultName>

@{
   ViewBag.Title = "ABC";
   Layout = "~/Views/Shared/_PQR.cshtml";
}
    <div class="row" style="color:#ba9494;margin-top:15%;margin-left:5%">
      <div class="col-lg-2 align-center" >
          Id
      </div>
    <div class="col-lg-2 align-center">
          Name
    </div>
    <div class="col-lg-1 align-center">
        OtherIds
    </div> 
    <div class="col-lg-7 align-center">
        Description
    </div>

</div>

@foreach (var item in Model)
{
    <div class="row" style="margin-left:5%">
        <div class="col-lg-2 align-center">
               @item.Id
        </div>
        <div class="col-lg-2 align-center">
               @item.Names
        </div>
        <div class="col-lg-1 align-center">
               @item.OthersId
        </div>      
        <div class="col-lg-7 align-center">
               @item.Descriptions
        </div>
    </div>

}

上面的 @foreach 代码也适用于 MVC 以外的其他项目。希望你能得到答案。

【讨论】：

谢谢你的回答..但问题是我也不熟悉 MVC.. :(
你可以在网络表单中做类似的事情，只需使用这种格式：<table> <% foreach (var item in Model) { %> <tr><td><%= item.title %></td></tr> <% } %> </table>
问题是通过使用引导