Question

我想问一下如何从包含Easy-ui数据网格的div元素中触发click事件？

我有这个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方式发起一个事件。当用户单击Status列下的元素时，要获取如下事件：$（“＃userStatusField”）。click（function（）{...

但这不可能，有什么不对？

Answer 1

格式化程序功能存在问题：

function enabledLink(value,row, index) {
    return "<div class='userStatus' id='userStatusField' name='"+ row.userName + "'>" + value + "</div>";
};

这里的事情是为每个具有相同id的行创建了一个div。这违反了 id uniqueness 的html规则。您可以使用类属性

所以我的建议是你这样创作：

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

Jquery easy-ui启动了一个click元素事件

1 个答案: