Fatal编程技术网
  • events/
  • Events Jquery easy ui触发一个click元素事件

Events Jquery easy ui触发一个click元素事件

events

Events Jquery easy ui触发一个click元素事件,events,datagrid,click,jquery-easyui,Events,Datagrid,Click,Jquery Easyui,我想问一下，如何能够从包含到Easy ui datagrid？中的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="resourc

我想问一下，如何能够从包含到Easy ui datagrid？中的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' />";
 };

dataGrid.dataGrid({
url:url，
滚动条大小：0，
宽度：“100%”，
菲特：是的，
singleSelect:true，
条纹：是的，
分页：正确，
总数：2000，
页面大小：10，
loadFilter:函数（数据）{
var i=0；
对于（i=0；i
我想用传统的jquery方式启动一个事件。当用户单击状态列下的元素时，要获得如下事件：$（“#userStatusField”）。单击（function（）{

但这是不可能的，有什么问题吗？

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

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

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

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