如何在ASP.NET MVC中用jQuery或开源库实现非Kendo嵌套网格？

完全可以用jQuery或其他开源库替代Kendo实现嵌套网格，以下是几种可行方案：

• 纯jQuery手动实现
  无需额外依赖，完全自定义搭建，适合对交互和样式有特殊需求的场景：

  1. 主网格用普通HTML表格渲染，给每行添加点击触发逻辑
  2. 子网格可放在主行的隐藏单元格中，点击时通过AJAX从后端拉取数据并渲染，或预加载后切换显示状态
  3. 核心代码示例：

     <!-- 主网格结构 -->
     <table class="main-grid">
       <thead>
         <tr><th>ID</th><th>名称</th><th>操作</th></tr>
       </thead>
       <tbody>
         <tr data-id="1">
           <td>1</td>
           <td>项目A</td>
           <td><button class="toggle-sub">展开</button></td>
         </tr>
         <!-- 子网格容器 -->
         <tr class="sub-grid-row" style="display:none;">
           <td colspan="3">
             <table class="sub-grid" data-parent-id="1">
               <thead><tr><th>子项ID</th><th>子项名称</th></tr></thead>
               <tbody></tbody>
             </table>
           </td>
         </tr>
       </tbody>
     </table>
     

     $(document).on('click', '.toggle-sub', function() {
       var $row = $(this).closest('tr');
       var $subRow = $row.next('.sub-grid-row');
       var parentId = $row.data('id');
       
       if ($subRow.is(':visible')) {
         $subRow.hide();
         $(this).text('展开');
       } else {
         $.get('/Home/GetSubItems/' + parentId, function(data) {
           var $subBody = $subRow.find('.sub-grid tbody');
           $subBody.empty();
           $.each(data, function(i, item) {
             $subBody.append('<tr><td>' + item.Id + '</td><td>' + item.Name + '</td></tr>');
           });
         });
         $subRow.show();
         $(this).text('收起');
       }
     });
     

• 优化版jQuery DataTables实现
  你之前尝试DataTables未达预期，可能是没用到它的嵌套扩展能力。DataTables通过row().child()方法可轻松实现嵌套子表格：

  1. 初始化主DataTable，为每行添加展开按钮
  2. 点击按钮时调用row().child()渲染子表格，配合AJAX加载子数据
  3. 核心代码示例：

     var table = $('.main-grid').DataTable({
       ajax: '/Home/GetMainItems',
       columns: [
         { data: 'Id' },
         { data: 'Name' },
         { 
           data: null, 
           render: function() { return '<button class="toggle-sub">展开</button>' } 
         }
       ]
     });
     
     $('.main-grid').on('click', '.toggle-sub', function() {
       var tr = $(this).closest('tr');
       var row = table.row(tr);
     
       if (row.child.isShown()) {
         row.child.hide();
         tr.removeClass('shown');
         $(this).text('展开');
       } else {
         row.child('<table class="sub-grid"><thead><tr><th>子项ID</th><th>子项名称</th></tr></thead><tbody></tbody></table>').show();
         $.get('/Home/GetSubItems/' + row.data().Id, function(data) {
           row.child().find('.sub-grid').DataTable({
             data: data,
             columns: [{ data: 'Id' }, { data: 'Name' }],
             searching: false,
             paging: false
           });
         });
         tr.addClass('shown');
         $(this).text('收起');
       }
     });
     

  关闭子表格的分页、搜索等冗余功能后，完全能满足嵌套需求，还自带排序、分页等基础能力。

• 其他开源库选项

  • Bootstrap Table：基于Bootstrap和jQuery，通过detailView配置即可快速开启嵌套子表格，后端返回结构化数据就能自动渲染，配置简单样式统一
  • Grid.js：轻量级无依赖表格库，支持通过detail选项定义子内容，可配合jQuery实现AJAX加载，体积小性能优

所有方案的核心逻辑都是主网格行点击触发子网格的加载/显示，后端只需提供主数据和对应子数据的接口，完全适配ASP.NET MVC架构。

内容的提问来源于stack exchange，提问作者user21523805