AspZero如何将下拉列表添加到用户页面？
-
打开Asp Zero项目中的User.js文件。
-
在Users method中修改代码，在表格中添加一个列来显示下拉列表，代码示例：
var columns = [ { data: "id", width: "6%" }, { data: "userName", width: "15%" }, { data: "name", width: "15%" }, { data: "surname", width: "15%" }, { data: "emailAddress", width: "15%" }, { data: "isActive", width: "10%" }, { data: null, orderable: false, searchable: false, width: "15%", render: function (data, type, row) { var active = data.isActive ? "Active" : "Inactive"; var badgeClass = data.isActive ? "badge badge-success" : "badge badge-danger"; return '' + active + ''; } }, { data: null, orderable: false, searchable: false, width: "10%", render: function (data, type, row) { var dropdownList = '';
return dropdownList;
}
}
];
- 在User.css文件中添加下拉列表的样式，示例代码：
.user-role-dropdown { width: 100%; border: none; background-color: transparent; font-size: 14px; font-weight: 400; color: #6B6E80; }
- 在User.js文件中添加下拉列表事件处理程序，示例代码：
var $table = $('#UsersTable');
$table.on('change', '.user-role-dropdown', function(e) { var userId = $(this).closest('tr').find('.hidden-id').text(); var roleId = $(this