Kendo 网格 select 行如何获取 selected 用户 ID？
How Kendo grid select row get the selected userID?
您好，我需要一些帮助来获取 select 行 ID，因为我意识到我可以从我的回复中获取 ajax 但是有没有办法让我 select我可以显示 ID select 的行？
通过使用新的 onchange 进行了更新，我已经创建了一个 selected 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 调用到 kendo 网格，其中 kendo 网格创建了网格和 selected 行
页面是这样的
但是我不知道如何 select 显示用户 ID 的行显示在哪里然后如果这是 selected 当按下查看详细信息时将信息传递到那里
这是响应示例
[
{
"UserID": 1,
"Name": "Kelyn Wong",
"Username": "kelynwong",
"Email": "kelynwonget@gmail.com",
"Picture": null,
"UserRole": "Approving Admin"
},
{
"UserID": 2,
"Name": "Kai Jie",
"Username": "kaijie",
"Email": "test@gmail.com",
"Picture": null,
"UserRole": "Admin"
},
这就是当用户 select 行
时行 selected 的样子
这是从正文到脚本的整个代码，从使用 ajax 到 kendo grid
< 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 class="cell-user-name"style="padding-left: 20px;"><img src = "${data[i].Picture}" class="picture" width="100px" height="100px" onError="this.onerror=null;this.src='../../assets/images/placeholder-avatar.jpg';" ></img></td>
<td class="cell-user-name" 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>
您可以使用 Kendo 网格的 change 事件来获取选定的行。请参阅下面的代码片段以获取来自 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>
您好，我需要一些帮助来获取 select 行 ID，因为我意识到我可以从我的回复中获取 ajax 但是有没有办法让我 select我可以显示 ID select 的行？
通过使用新的 onchange 进行了更新，我已经创建了一个 selected 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 调用到 kendo 网格，其中 kendo 网格创建了网格和 selected 行
页面是这样的
但是我不知道如何 select 显示用户 ID 的行显示在哪里然后如果这是 selected 当按下查看详细信息时将信息传递到那里
这是响应示例
[
{
"UserID": 1,
"Name": "Kelyn Wong",
"Username": "kelynwong",
"Email": "kelynwonget@gmail.com",
"Picture": null,
"UserRole": "Approving Admin"
},
{
"UserID": 2,
"Name": "Kai Jie",
"Username": "kaijie",
"Email": "test@gmail.com",
"Picture": null,
"UserRole": "Admin"
},
这就是当用户 select 行
时行 selected 的样子这是从正文到脚本的整个代码，从使用 ajax 到 kendo grid
< 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 class="cell-user-name"style="padding-left: 20px;"><img src = "${data[i].Picture}" class="picture" width="100px" height="100px" onError="this.onerror=null;this.src='../../assets/images/placeholder-avatar.jpg';" ></img></td>
<td class="cell-user-name" 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>
您可以使用 Kendo 网格的 change 事件来获取选定的行。请参阅下面的代码片段以获取来自 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>