Jquery easy-ui 触发点击元素事件答案

【问题标题】：Jquery easy-ui fire up a click element eventJquery easy-ui 触发点击元素事件
【发布时间】：2014-06-29 19:24:12
【问题描述】：

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

我有这个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() { ...

但不可能，怎么了？

【问题讨论】：

标签： events datagrid click jquery-easyui

【解决方案1】：

您的格式化程序函数存在问题：

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

这里的问题是，为具有相同 id 的每一行创建了一个 div。这违反了 id 唯一性 的 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];
});

【讨论】：