Блог

Главная - Вопросы по программированию - Jquery easy-ui запускает событие щелчка элемента

Jquery easy-ui запускает событие щелчка элемента

#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];
});