Nền tảng: JavaScript - EJ 2 | JavaScript - EJ 2 |
Kiểm soát: Lưới Grid
Bạn có thể hiển thị Datagrid trong khi nhấp vào nút Gửi của biểu mẫu. Điều này có thể đạt được bằng cách hiển thị DataGrid bên trong biểu mẫu Sự kiện Sub Sured và ngăn chặn hành động gửi mặc định bằng cách sử dụng phương thức PRECTERDEFAULT.DataGrid while clicking the submit button of a form. This can be achieved by displaying the DataGrid inside the form “submit” event and prevent the default submit action by using the “preventDefault” method.
Điều này được giải thích trong mã mẫu sau. Trong đó, trong khi gửi biểu mẫu, Datagrid đã được gán với dữ liệu dựa trên giá trị đầu vào của người dùng của biểu mẫu và hiển thị nó.
HTML
SubmitClose
JS
var grid = new ej.grids.Grid[{
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
{ field: 'EmployeeID', headerText: 'Employee ID', width: 150, textAlign: 'Right' },
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
]
}];
grid.appendTo['#Grid'];
document.getElementById["Gridform"].addEventListener["submit", [e] => {
e.preventDefault[];
var value = parseInt[document.getElementById['multiplier'].value, 10];
// Filtering the data with user input value
data = new ej.data.DataManager[window.hierarchyOrderdata].executeLocal[new ej.data.Query[].where["EmployeeID", "equal", value].take[15]];
// Assigning to DataGrid
grid.dataSource = data;
document.getElementById["userinput"].style.display = "none";
document.getElementById["mtable"].style.display = "";
document.getElementById["Gridform"].reset[];
}];
document.getElementById["close"].addEventListener["click", [e]=>{
document.getElementById["mtable"].style.display = "none";
document.getElementById["userinput"].style.display = "";
}];
Đầu ra
Trước khi biểu mẫu gửi:
Trên biểu mẫu Gửi:
Bản demo: //stackblitz.com/edit/grid-on-submit-jnb5a4?file=index.js//stackblitz.com/edit/grid-on-submit-jnb5a4?file=index.js
Bạn có thấy thông tin này hữu ích không?
Tôi hiện đang làm việc trong một dự án để hiển thị thời gian biểu của một giáo viên khi người dùng vào giảng viên của họ. Tôi chỉ muốn hiển thị bảng sau khi họ nhấp vào Gửi thay vì hiển thị một bảng trống trong khi hỏi họ cho ID. Đây là một phần của mã tôi đang làm việc. Bảng chỉ nên được hiển thị sau khi nhấp vào nút gửi. Hiện tại, trang hiển thị hộp văn bản đầu vào, nút gửi và bảng trống được điền sau khi nhấp vào nút gửi.
Faculty Timetable
Chủ Đề