嗨，我需要一些幫助來獲取選擇行 ID，因為我意識到我能夠從我的回應中獲取我的 ajax，但是有沒有一種方法可以讓我選擇行，我可以顯示所選行的 ID？
通過使用新的 onchange 更新我已經選擇了一個 id 但是我仍然有錯誤
var dataSource = new kendo.data.DataSource({
read: {
url: "https://ecoexchange.dscloud.me:8090/api/get",
dataType: "JSON",
method: "GET",
headers: {
query: "UserGet(1)",
// Gets the apikey from the sessionStorage
apikey: sessionStorage.getItem("apikey")
}
},
});
$("#user-list").kendoGrid({
dataSource: dataSource,
height: $(window).height() - $("#user-list").position()["top"] - 130,
selectable: "single, row",
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i ) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
// selectedDataItems contains all selected data items
/* The result can be observed in the DevTools(F12) console of the browser. */
if (selectedDataItems && selectedDataItems.length > 0) {
$("#selection")[0].innerHTML = selectedDataItems[0].UserID;
}
},
// width: $(window).width()-$("#customer-list").position()["width"]-10,
//pageSize: 10,
scrollable: {
endless: true,
},
columns: [
{
field: "",
title: "Profile",
headerAttributes: {
"class": "k-text-center"
},
width: 150
},
{
field: "",
title: "User Name",
},
],
});
$("#user-list tbody").on("click", "tr", function(e) {
const btns = $('.select-row');
var rowElement = this;
var row = $(rowElement);
var grid = $("#user-list").getKendoGrid();
if (row.hasClass("k-state-selected")) {
var selected = grid.select();
selected = $.grep(selected, function(x) {
var itemToRemove = grid.dataItem(row);
var currentItem = grid.dataItem(x);
return itemToRemove != currentItem
})
btns.prop('disabled', true).removeClass('disabled dark');
grid.clearSelection();
grid.select(selected);
e.stopPropagation();
} else {
grid.select(row)
e.stopPropagation();
btns.prop('disabled', false).removeClass('disabled dark');
}
});我正在呼叫我的 ajax 到劍道網格，其中劍道網格創建了網格和選定的行
這是頁面的樣子
但是我不知道如何選擇行顯示用戶ID顯示然后如果在按下查看詳細資訊時選擇了該資訊將傳遞到那里
這是回應示例
[
{
"UserID": 1,
"Name": "Kelyn Wong",
"Username": "kelynwong",
"Email": "[email protected]",
"Picture": null,
"UserRole": "Approving Admin"
},
{
"UserID": 2,
"Name": "Kai Jie",
"Username": "kaijie",
"Email": "[email protected]",
"Picture": null,
"UserRole": "Admin"
},
這是用戶選擇行時所選行的樣子
這是從正文到腳本的整個代碼，從使用 ajax 到劍道網格
< script >
/* Call the ajax to load to load to #customer-list tbody */
$.ajax({
url: "https://ecoexchange.dscloud.me:8090/api/get",
method: "GET",
// In this case, we are going to use headers as
headers: {
// The query you're planning to call
// i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
query: "UserGet(0)",
// Gets the apikey from the sessionStorage
apikey: sessionStorage.getItem("apikey")
},
success: function(data, xhr, textStatus) {
//console.log(data)
const buildTable = data => {
const table = document.querySelector("#user-list tbody");
for (let i = 0; i < data.length; i ) {
let row =
`
<tr>
<td style="padding-left: 20px;"><img src = "${data[i].Picture}" width="100px" height="100px" one rror="this.onerror=null;this.src='../../assets/images/placeholder-avatar.jpg';" ></img></td>
<td style="padding-right: 80px; padding-top: 10px; font-weight: bold; font-size: 18px;">${data[i].Name}</td>
</tr>
`;
table.insertAdjacentHTML('beforeEnd', row);
}
};
// Fetch method
const getData = async(url) => {
const response = await fetch(url, {
method: 'GET',
headers: {
query: "UserGet(0)",
// Gets the apikey from the sessionStorage
apikey: sessionStorage.getItem("apikey")
}
});
const json = await response.json();
$("#loading-container").hide();
return buildTable(json);
};
/*Error GET http://127.0.0.1:5501/testEnv/view/public/manageCustomers/null 404 (Not Found) */
/* But code are able to fetch the data */
getData("https://ecoexchange.dscloud.me:8090/api/get")
},
error: function(xhr, textStatus, err) {
console.log(err);
}
});
$(window).on("resize", function(e) {
console.log("width:", $("#user-list").width(), "height:", $("#user-list").height())
});
$("#user-list").kendoGrid({
height: $(window).height() - $("#user-list").position()["top"] - 130,
selectable: "single",
// width: $(window).width()-$("#customer-list").position()["width"]-10,
//pageSize: 10,
scrollable: {
endless: true,
},
columns: [
{
field: "",
title: "Profile",
headerAttributes: {
"class": "k-text-center"
},
width: 150
},
{
field: "",
title: "User Name",
},
],
});
$("#user-list tbody").on("click", "tr", function(e) {
const btns = $('.select-row');
var rowElement = this;
var row = $(rowElement);
var grid = $("#user-list").getKendoGrid();
if (row.hasClass("k-state-selected")) {
var selected = grid.select();
selected = $.grep(selected, function(x) {
var itemToRemove = grid.dataItem(row);
var currentItem = grid.dataItem(x);
return itemToRemove != currentItem
})
btns.prop('disabled', true).removeClass('disabled dark');
grid.clearSelection();
grid.select(selected);
e.stopPropagation();
} else {
grid.select(row)
e.stopPropagation();
btns.prop('disabled', false).removeClass('disabled dark');
}
});
// <!-- Search bar function -->
$("#search-user-name").on("keyup change", function() {
var usernames = $("#search-user-name").val().toLowerCase();
//console.log(usernames);
if (usernames == "") {
$('#user-list tbody tr td.cell-user-name').parent().show();
} else {
$("#user-list tbody tr").filter(function() {
var usernameText = $(this).children("td.cell-user-name").text().toLowerCase();
$(this).toggle(
(usernameText.indexOf(usernames) >= 0)
);
})
};
})
<
/script><!-- the white rectange body contain-->
<div id="container-body">
<div class="col-12">
<br />
<div class="input-group">
<!-- Length of the search bar -->
<div class="col-md-10">
<!-- Search bar components -->
<span id="search-icon" class="fa fa-search search-icon-span"></span>
<input class="search-input form-control" placeholder="Name" type="text" name="User Name" id="search-user-name">
</div>
<!-- button all of it-->
<fieldset class='btn-group'>
<button onclick="window.location.href='addUsers.html'" id="add" type="button" class="btn btn-primary btn custom mr-1 mb-2" style="border-radius: 5px;">Add </button>
<button onclick="window.location.href=''" id="edit" type="button" class=" btn-primary btn custom mr-1 mb-2 disabled select-row" style="border-radius: 5px; margin-left: 5px;" disabled>View Details</button>
</fieldset>
<div class="col-md-12">
<div class="table-responsive" style="overflow:hidden; padding-top: 20px;">
<table id="user-list" class="table">
<!-- Loading Spinner Div -->
<div id="loading-container">
<p>Fetching all users data...</p>
<div id="loading-spinner">
</div>
<tbody>
</tbody>
</table>
</div>
</div>uj5u.com熱心網友回復：
您可以使用changeKendo Grid 的事件來獲取選定的行。有關 Kendo 檔案的演示，請參閱下面的代碼片段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
<label>
Selection: <span id="selection"></span>
</label>
<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
});
$("#grid").kendoGrid({
dataSource: dataSource,
selectable: "single, row",
change: function(e) {
console.log("change", this.dataItem(this.select()[0]));
const selection = this.select();
if (selection && selection.length > 0) {
$("#selection")[0].innerHTML = this.dataItem(selection[0]).ProductID;
}
}
});
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/410726.html
標籤：