Jquery-Bootgrid, Row is null on click

问题

I have created a generic function, so I can use the same code on different pages.

I am loading data using Ajax, I refresh my Table when a value of a DropDown changes. When I click on a row the value is null:

This is my dataTable function

function dataTable() {

    var self = this;


    self.url = "";
    self.gridObject = null;

    self.Initilize = function (tableDiv, url) {
        self.url = url;
        self.gridObject = $("#" + tableDiv).bootgrid({
            formatters: {
                "commands": function (column, row) {
                    return "<button type=\"button\" class=\"btn btn-sm btn-success command-edit\" data-row-id=\"" + row.Id + "\"><span class=\"fa fa-pencil\"></span></button> " +
                        "<button type=\"button\" class=\"btn btn-sm btn-danger command-delete\" data-row-id=\"" + row.Id + "\"><span class=\"fa fa-trash-o\"></span></button>";
                }
            },
            requestHandler: function (request) {

                var model = fleetMaintenance.filterModel.GetModel();
                model.Current = request.current;
                model.RowCount = request.rowCount;
                model.Search = request.searchPhrase;
                return JSON.stringify(model);
            },
            ajaxSettings: {
                method: "POST",
                contentType: "application/json"
            },
            ajax: true,
            url: self.url,
            selection: true,
        }).on("loaded.rs.jquery.bootgrid", function () {


            self.gridObject.find(".command-edit").on("click", function (e) {
                //   e.stopPropagation();
                alert("You pressed edit on row: " + $(this).data("row-id"));
            }).end().find(".command-delete").on("click", function (e) {
                //   e.stopPropagation();
                alert("You pressed delete on row: " + $(this).data("row-id"));
            });

            self.gridObject.on("click.rs.jquery.bootgrid", function (e, columns, row) {
                console.log(row);

                debugger;
            });
        });
    },
    self.RefreshTable = function () {
        self.gridObject.bootgrid('reload');
    }
}

HTML:

<div class="box">
    <div class="box-header">
        <div class="col-md-6">
            <h3 class="box-title">Sites</h3>
        </div>
    </div>

    <div class="box-body">
        <div class="row">
            <div class="col-md-12">
                <table id="sitesList" class="table  table-condensed table-hover table-striped">
                    <thead>
                        <tr>
                            <th data-column-id="iSiteId" data-identifier="true">Id</th>
                            <th data-column-id="sSiteName" data-order="desc">Site Name</th>
                            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>

</div>

And then I use this to create the JQGrid table:

<script type="text/javascript">

      var tble = new dataTable();

    $(function () {

        tble.Initialize('sitesList', '/Sites/SitesList')


        $('*[data-action="RefreshTable"]').change(function (e) {
            var dropDown = $(this);

            tble.RefreshTable();

        });

    });

</script>

I have to reload another Table when the User clicks on a row in this Table: but Row is NULL

Note: This didn't happen when I was not loading data with Ajax:

回答1:

Just in case anyone else has this problem:

It seems like that we have to set the data-type="numeric" on the Id Column, if I remove this data attribute the row on click is NULL:

<table id="sitesList" class="table  table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="iSiteId" data-identifier="true" data-type="numeric">Id</th>
            <th data-column-id="sSiteName" data-order="desc">Site Name</th>
            <th data-column-id="sNotes">Notes</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

来源：https://stackoverflow.com/questions/31608884/jquery-bootgrid-row-is-null-on-click