如何在 jQuery Bootgrid 和 C# 之间构建 Ajax json 格式的 CRUD（而不是 JqGrid 来处理这个问题）

Question

大家好我一直在寻找很多相关资源来解决我的问题，但是对我没有用，即使我已经检查了 "jQuery Bootgrid" 和许多网站，我仍然没有找到什么很好的例子，希望真正了解它的人可以帮助我提供任何苗条的线索或任何简单的好方法。
顺便说一下，
1. 我希望我可以使用 Ajax 来更新和查看浏览器和数据库之间的任何修改数据
2. 请给我示例代码
谢谢

一些问题issue
1.Ajax 连接
前端

   <table id="grid-data" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="sender" data-css-class="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
        </tr>
    </thead>
</table>

    <script>
    var grid = $("#grid-data").bootgrid({
        ajax: true,
        url: "WebForm3.aspx/x" // link to your web api
    });
</script>

后端

  public partial class WebForm3 : System.Web.UI.Page
    {
        [WebMethod]

        public static string x()
        {
            return "";
        }
    }

消息

Uncaught SyntaxError: Unexpected token < in JSON at position 6
    at JSON.parse (<anonymous>)
    at Function.n.parseJSON (jquery-2.1.1.min.js:4)
    at Object.success (jquery.bootgrid.min.js:6)
    at j (jquery-2.1.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.1.1.min.js:2)
    at x (jquery-2.1.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-2.1.1.min.js:4)

Answer 1

目前，bootgrid 没有提供开箱即用的方法。我建议将 X-editable（我更喜欢 bootstrap 版本）与 bootgrid 一起使用。以下是实现您想要的目标的步骤。

包括参考文献

在页面中包含所有必要的 script/css 引用。在这个例子中，我需要包括：

• jQuery
• Bootstrap
• 引导网格
• xEditable（bootstrap-可编辑版本）

设置你的引导网格HTML

我从 their examples 得到这个：

<table id="grid-data" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="sender" data-css-class="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
        </tr>
    </thead>
</table>

Take note I added a data-css-class="sender" to the sender's column (th tag). This will make bootgrid insert a "sender" class to every td in that column.

设置你的引导网格javascript

只需像往常一样创建您的 bootgrid。同样，我从他们的页面上得到了这个样本：

var grid = $("#grid-data").bootgrid({
    ajax: true,
    url: "/api/data/basic" // link to your web api
});

我在这里保留对 grid 元素的引用，因为我需要将事件绑定到它，当它的 数据加载时 ，也就是说，当所有行 (tr) 及其各自的 td 在 tbody html 标签内创建。

将 X-editable 绑定到您的 td

只需将 x-editable 绑定到您的单元格。我们需要在 bootgrid 的 loaded 事件 中执行此操作，因为在其中我们确信所有 td 元素都已在 DOM.

grid.on("loaded.rs.jquery.bootgrid", function()
{
    /* Executes after data is loaded and rendered */
    /* looks for all td's with "sender" class...and make them editable... */
    grid.find("td.sender").editable({
        url: '/post', // web api url to your post
        title: 'Enter the sender...'
    });
});

查看 X-editable example page for more examples. Read their docs 了解如何使用它们。

---

另请注意，X-editable 只是一种可能，如果您不喜欢它，或者您更熟悉其他插件，请改用它。只要确保像我一样在 bootgrid 的 loaded 事件中配置它。

使用 ajax 时，每次在搜索框中 输入 内容，按列 排序 ，更改页面，bootgrid 将发送请求并重新创建 tbody 中的所有内容。这意味着所有 tr 和 td 将从 DOM 中 删除并重新创建（因此再次触发 loaded）。

---

参见 JSFiddle。

Answer 2

解决我的问题的新思路
我已经使用 jqGrid 来处理我的问题，使用 CRUD 处理 UI(DataGrid) 对我来说非常有用，它在 Google 中也有很多具体说明，如果你需要更具体的步骤或操作，所以用它来代替 BootGrid 应该是个好主意。这是我个人的建议。