劍道網格select行如何獲取選中的userID？

Question

嗨，我需要一些幫助才能獲得 select 行 ID，因為我意識到我能夠從我的回復中獲得我的 ajax 但是有沒有辦法讓我選擇 Z99938282F04071859941E18F16EFCF42 行？

我打電話給我的 ajax 到劍道網格，劍道網格創建了網格和選定的行

這是頁面的樣子

但是我不知道如何 select 行顯示用戶 ID 顯示在哪里然后如果在按下查看詳細信息時選擇此信息將傳遞到那里

這是響應示例

[
    {
        "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 該行時所選行的樣子

這是從使用 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 // ie <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>

Answer 1

您可以使用 Kendo Grid 的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> $("#grid"):kendoGrid({ columns: [ { field, "name" }: { field, "age" } ]: dataSource: [ { name, "Jane Doe": age, 30 }: { name, "John Doe": age, 33 } ]: 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];name; } } }); </script> </body> </html>