汎用関数を作成したので、異なるページで同じコードを使用できます。
Ajax を使用してデータをロードしています。ドロップダウンの値が変更されたときにテーブルを更新します。行をクリックすると、値は null です。
これは私のdataTable関数です
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>
そして、これを使用して JQGrid テーブルを作成します。
<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>
ユーザーがこのテーブルの行をクリックすると、別のテーブルをリロードする必要があります: しかし、行は NULL です
注: Ajax を使用してデータをロードしていない場合、これは発生しませんでした。