#events #datagrid #click #jquery-easyui
#Мероприятия #datagrid #нажмите #jquery-easyui
Вопрос:
Я хочу спросить, как можно запустить событие щелчка из элемента div, содержащегося в сетке данных Easy-ui ?.
У меня есть этот файл jsp:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Page</title>
<link rel="stylesheet" type="text/css" href="resources/css/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/css/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resources/css/maintheme.css">
<link rel="stylesheet" type="text/css" href="resources/css/userPage.css">
<script src="resources/javascript/jquery/jquery-1.11.1.min.js"></script>
<script src="resources/javascript/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="datagridLayer">
<table id="usersDataGrid" class="easyui-datagrid" style="display:none;">
<thead>
<tr>
<th data-options="field:'userName', width:80, sortable:true">User</th>
<th data-options="field:'enabled', width:100, sortable:true, formatter:enabledLink">Status</th>
<th data-options="field:'role', width:100, sortable:true">Role</th>
<th data-options="field:'deleteUser', width:80, align:'center', formatter:deleteUserFormatter">Delete user</th>
</tr>
</thead>
</table>
</div>
<script src="resources/javascript/adminPageUsersCtrl.js"></script>
Конфигурация Datagrids находится в adminPageUsersCtrl.js :
dataGrid.datagrid({
url:url,
scrollbarSize:0,
width:"100%",
fitColumns : true,
singleSelect : true,
striped:true,
pagination : true,
total: 2000,
pageSize: 10,
loadFilter: function(data) {
var i = 0;
for (i = 0; i < data.rows.length; i ) {
if (data.rows[i].role === "ROLE_ADMIN") {
data.rows[i].role = "Administrator";
} else {
data.rows[i].role = "User";
}
if (data.rows[i].enabled === "true") {
data.rows[i].enabled = "Enabled";
} else {
data.rows[i].enabled = "Disabled";
}
}
return data;
},
onBeforeLoad : function(data){
},
onLoadSuccess : function(data) {
dataGrid.show();
},
onLoadError : function(result) {
// empty grid
dataGrid.datagrid("loadData", {
patents: {totalElements : 0, content : []}
});
//Remove Refresh button from datagrid pagination
$(".pagination-load").closest("td").remove();
},
// highlight previously selected row
rowStyler : function(rowIndex, row) {
// do stuff here
},
onSelectPage: function(pageNumber, pageSize){
dataGrid.panel("refresh", url "page=" pageNumber pageSize);
}
});
//this create the link elements under Status datagrid's column
function enabledLink(value,row, index) {
return "<div class='userStatus' id='userStatusField' name='" row.userName "' onClick>" value "</div>";
};
//this display the delete icon under delete user column
function deleteUserFormatter(value,row, index) {
return "<img src='resources/img/delete_user.png' id='deleteUser' />";
};
И я хотел бы запустить событие традиционным способом jquery. Когда пользователь нажимает на элемент в столбце состояния, чтобы получить событие, подобное этому: $(«#userStatusField»).click(function() { …
Но это невозможно, что не так?
Ответ №1:
Существует проблема с вашей функцией форматирования:
function enabledLink(value,row, index) {
return "<div class='userStatus' id='userStatusField' name='" row.userName "'>" value "</div>";
};
Дело в том, что для каждой строки создается div с одинаковым идентификатором. Это противоречит правилам html для уникальности идентификатора. Вместо этого вы можете использовать атрибут class
Итак, я предлагаю вам создать вот так:
function enabledLink(value,row, index) {
return "<div class='userStatus' dataLinkIndex='" index "' class='userStatusField' name='" row.userName "'>" value "</div>";
};
Атрибут dataLinkIndex — это пользовательский атрибут, который мы можем позже использовать для извлечения выбранной строки.
Затем добавьте событие jquery таким образом, потому что элементы строки добавляются в dom динамически:
$(document).on( 'click', '.userStatusField', function(){
//bellow are some tips for manipulating the clicked row
var dataIndex = $(this).attr('dataLinkIndex');
var rows = $('#usersDataGrid').datagrid('getRows');
var rowClicked = rows[dataIndex];
});