1

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

一些问题issue
1.Ajax Connection
Front end 

   <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)
4

2 回答 2

1

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

包括参考

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

  • jQuery
  • 引导程序
  • 引导网格
  • xEditable（引导可编辑版本）

设置你的 bootgrid HTML

我从他们的例子中得到了这个：

<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>

请注意，我data-css-class="sender"在发件人的列（th标签）中添加了一个。这将使 bootgridtd为该列中的每一个插入一个“发送者”类。

设置你的 bootgrid javascript

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

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

我在这里保留对grid元素的引用，因为我需要将一个事件绑定到它，当它的数据被加载时，也就是说，当所有行（tr）及其各自的行（）td都在tbodyhtml 标记内创建时。

将 X-editable 绑定到您的td

只需将 x-editable 绑定到您的单元格。我们需要在 bootgrid 的加载事件中执行此操作，因为在其中我们确定所有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 示例页面以获取更多示例。阅读他们的文档以了解如何使用它们。

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

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

请参阅JSFiddle。

于 2017-03-09T01:45:45.747 回答
0

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

于 2017-03-17T02:48:20.153 回答