ASP.NET WebForm 如何使用 Jquery+ajax+bootstrap-table 应用到gridview？

本方法是本人研究好久的成果，虽然可能略显浅显，但能完成实属不易。

样式

步骤

• 后台绑定空表显示标题（因为gridview如果没有数据就不会显示标题）；
• 前台获取表头加上thead（浏览器解析出来的gridview没有thead标签）,并删除tbody（参照下面的bootstrap-table的例子，table里包含thead，我们只需要thead）；
• 前台为表头的每一列添加data-field，控制列的显示与隐藏（如果不设置，浏览器解析时会自动以数字命名data-field，而且是动态变化的，这样我们没法定位到具体的列，后续会有操作按钮，需要定位到具体的列row["data-field"]，所以一定要设置data-field，这个data-field和gridview的field不一样）；
• ajax获取数据,success回调函数里渲染表格，因为是异步请求，全部操作都在success里。

边操作边F12查看浏览器解析的结果是否是我们想要的，比如thead有没有加上了；

前台

先来看看bootstrap-table操作的table结构,<table>里包含<thead>,<thead>里又包含了<tr>.

<table id="table">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')

  $(function() {
    
    var data = [
      {
    
        'id': 0,
        'name': 'Item 0',
        'price': '$0'
      },
      {
    
        'id': 1,
        'name': 'Item 1',
        'price': '$1'
      },
      {
    
        'id': 2,
        'name': 'Item 2',
        'price': '$2'
      },
      {
    
        'id': 3,
        'name': 'Item 3',
        'price': '$3'
      },
      {
    
        'id': 4,
        'name': 'Item 4',
        'price': '$4'
      },
      {
    
        'id': 5,
        'name': 'Item 5',
        'price': '$5'
      }
    ]
    $table.bootstrapTable({
    data: data})
  })
</script>

再来看看gridview绑定数据之后解析出来的html，只有tbody,没有thead.

因为要操作GridView必须要显示其表头,所以在后台为其绑定空行.

                DataTable dt = new DataTable();
                dt.Columns.Add("FileID");
                dt.Columns.Add("ClientName");
                dt.Columns.Add("ProdDescription");
                dt.Columns.Add("FAPN");
                dt.Columns.Add("NPPP");
                dt.Columns.Add("PaperID");
                dt.Columns.Add("ProcessDesign");
                dt.Columns.Add("Badge");
                dt.Columns.Add("Result");
                dt.Columns.Add("StartDate");
                dt.Columns.Add("EndDate");
                dt.Columns.Add("SumResult");
                dt.Columns.Add("operation");
                if (dt.Rows