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

Question

Hi all I have been looking for a lot of relative resource to deal with my problem, however it isn't useful to me, even if I have checked the "jQuery Bootgrid" and many websites , I still didn't find any great example out, hopefully someone who really know it can help me to give me any slim clues or any good simple.
By the way,
1. I wish I can use Ajax to update and see any modifies data between Browser and DB
2. Plesae give me example code
Thanks

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

Back End

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

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

Messages

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

At the moment, bootgrid doesn't provide a way to achieve this out of the box. I'd recommend using X-editable (I prefer bootstrap version) together with bootgrid. Below are the steps to achieve what you want.

Include references

Include all the necessary script/css references in your page. In this example, I needed to include:

• jQuery
• Bootstrap
• Bootgrid
• xEditable (bootstrap-editable version)

Setup your bootgrid HTML

I got this from 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.

Setup your bootgrid javascript

Just create your bootgrid as you would normally. Again, I got this sample from their page:

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

I keep a reference to the grid element here, because I need to bind an event to it, when its data is loaded , that is, when all rows ( tr ) with their respective td are created inside tbody html tag.

Bind X-editable to your td

Just bind the x-editable to your cells. We need to do this inside bootgrid's loaded event , because inside it we are sure all td elements were already created in the 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...'
    });
});

Look X-editable example page for more examples. Read their docs to know how to use them.

---

Also take note X-editable is just one possibility, if you don't like it, or you are more familiar with other plugin, use it instead. Just make sure you configure it inside the bootgrid's loaded event, as I did.

When working with ajax, everytime you type in something in search box, order by a column, change the page, bootgrid will send a request and recreate everything inside tbody . Which means all tr and td will be removed from DOM and recreated (thus firing loaded again).

---

See JSFiddle .

Answer 2

New idea for my problem
I have used the jqGrid to deal with my problem and it is very useful to handle UI(DataGrid) with CRUD for me and it also has a lot of specific instructions in Google if you need to more specific steps or operations, so that it should be very good idea to instead of BootGrid. it is my personal suggestion.