jQuery UI Widgets › Forums › Grid › 'rowselect' events is not working.

Tagged: , ,

This topic contains 2 replies, has 3 voices, and was last updated by  soojung 8 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    'rowselect' events is not working. Posts
  • May 6, 2015 at 5:46 am 'rowselect' events is not working. #70691

    coni
    Participant

    hi,

    ‘rowselect’ events is not working.

    
$("#jqxGrid").on('rowselect', function(event) {
    alert('a');
    args = event.args;
    rowKey = args.key;
    updateButtons('Select');
});

    It is my code.

    
<!DOCTYPE html>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView" />
<meta name="description" content="The jqxTabs is breaking the content into multiple sections. You
        can populate it from 'UL' for the tab titles and 'DIV' for it's contents." />
<!-- jQuery -->
<script src="js/jquery-1.11.2.js"></script>
<!-- jqWidget -->
<link rel="stylesheet" href="static/widgets/jqwidgets/styles/jqx.base_test.css" type="text/css" />
<link rel="stylesheet" href="static/widgets/jqwidgets/styles/jqx.metro.css" type="text/css" />
<link rel="stylesheet" href="static/widgets/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<script type="text/javascript" src="static/widgets/jqwidgets/jqx-all.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var data = [ {
			'UserID' : 'coni',
			'UserName' : '김영민',
			'UserGroup' : '000_Developer',
			'Email' : 'ymk@tnctec.co.kr',
			'Phone' : '010-3919-1404'
		}, {
			'UserID' : 'jhkim',
			'UserName' : '김주한',
			'UserGroup' : '999_Admin',
			'Email' : 'jhkim@tnctec.co.kr',
			'Phone' : '010-3374-4549'
		}, {
			'UserID' : 'episode09',
			'UserName' : '권영구',
			'UserGroup' : '888_Server',
			'Email' : 'episode09@tnctec.co.kr',
			'Phone' : '010-3356-4901'
		}, {
			'UserID' : 'shjeong',
			'UserName' : '정수환',
			'UserGroup' : '777_System',
			'Email' : 'shjeong@tnctec.co.kr',
			'Phone' : '010-7709-0915'
		}, {
			'UserID' : 'mino8301',
			'UserName' : '이민호',
			'UserGroup' : '000_Developer',
			'Email' : 'mino8301@tnctec.co.kr',
			'Phone' : '011-877-1595'
		}, {
			'UserID' : 'jhs',
			'UserName' : '장현석',
			'UserGroup' : '000_Developer',
			'Email' : 'jhs@tnctec.co.kr',
			'Phone' : '010-4424-5134'
		} ];
		var source = {
			localdata : data,
			datatype : "json",
			datafields : [ {
				name : 'UserID',
				type : 'string'
			}, {
				name : 'UserName',
				type : 'string'
			}, {
				name : 'UserGroup',
				type : 'string'
			}, {
				name : 'Email',
				type : 'string'
			}, {
				name : 'Phone',
				type : 'string'
			} ]
		};
		var group = [ "000_Developer", "999_AllLevel", "500_CustomerService", "400_MerchantsRights", "300_FiscalAuthority", "200_Business rights", "150_Operators", "100_System Operator" ];
		$.ajax({
			url : 'selectUserGroupList.ajax',
			type : "POST",
			cache : false,
			async : true,
			contentType : "application/json; charset=UTF-8",
			datatype : "json",
			success : function(jsonObj) {
				//접기 셋팅
				$("#jqxExpander").jqxExpander({
					width : '100%',
					expanded : true,
					initContent : function() {
						var dataAdapter = new $.jqx.dataAdapter(source);
						//그리드셋팅
						$("#jqxGrid").jqxGrid({
							width : '100%',
							source : dataAdapter,
							showfilterrow : true,
							filterable : true,
							sortable : true,
							pageable : true,
							autoheight : true,
							columnsresize : true,
							toolbarHeight : 35,
							showToolbar : true,
							selectionmode : 'multiplecellsextended',
							columns : [ {
								text : '사용자ID',
								columntype : 'textbox',
								filtercondition : 'starts_with',
								align : 'center',
								cellsalign : 'center',
								datafield : 'UserID',
								width : '20%'
							}, {
								text : '사용자명',
								columntype : 'textbox',
								filtercondition : 'starts_with',
								align : 'center',
								cellsalign : 'center',
								datafield : 'UserName',
								width : '20%'
							}, {
								text : '사용자그룹',
								filtertype : 'checkedlist',
								columntype : 'textbox',
								filtercondition : 'starts_with',
								align : 'center',
								cellsalign : 'center',
								datafield : 'UserGroup',
								width : '20%'
							}, {
								text : '이메일',
								columntype : 'textbox',
								filtercondition : 'starts_with',
								align : 'center',
								cellsalign : 'center',
								datafield : 'Email',
								width : '20%'
							}, {
								text : '전화번호',
								columntype : 'textbox',
								filtercondition : 'starts_with',
								align : 'center',
								cellsalign : 'center',
								datafield : 'Phone',
								width : '20%'
							} ],
							ready : function() {

								//취소 버튼 클릭
								$("#cancel").mousedown(function() {
									$("#dialog").jqxWindow('close');
								});
								$("#delcancel").mousedown(function() {
									$("#deletepop").jqxWindow('close');
								});

								//취소버튼 온
								$("#dialog").on('close', function() {
									$("#jqxGrid").jqxGrid({
										disabled : false
									});
								});
								$("#deletepop").on('close', function() {
									// enable jqxTreeGrid.
									$("#jqxGrid").jqxGrid({
										disabled : false
									});
								});

								//저장 버튼 클릭
								$("#save").mousedown(function() {
									$("#dialog").jqxWindow('close');
									//추가&수정 로직                        
								});
								//삭제확인 버튼 클릭
								$("#ok").mousedown(function() {
									$("#deletepop").jqxWindow('close');
									//삭제 로직
								});

								//팝업 설정
								$("#dialog").jqxWindow({
									resizable : true,
									width : 270,
									height : 280,
									position : {
										left : $("#jqxGrid").offset().left + 75,
										top : $("#jqxGrid").offset().top + 35
									},
									autoOpen : false
								});
								$("#deletepop").jqxWindow({
									resizable : false,
									width : 200,
									position : {
										left : $("#jqxGrid").offset().left + 75,
										top : $("#jqxGrid").offset().top + 35
									},
									autoOpen : false
								});

								//팝업 객체
								$("#UserId").jqxInput({
									width : 150,
									height : 30
								});
								$("#UserName").jqxInput({
									width : 150,
									height : 30
								});
								$("#UserGroup").jqxDropDownList({
									source : group,
									selectedIndex : 1,
									width : '150',
									height : '30'
								});
								$("#Email").jqxInput({
									width : 150,
									height : 30
								});
								$("#Phone").jqxInput({
									width : 150,
									height : 30
								});
								$("#save").jqxButton({
									height : 30,
									width : 80
								});
								$("#cancel").jqxButton({
									height : 30,
									width : 80
								});
								$("#ok").jqxButton({
									height : 30,
									width : 80
								});
								$("#delcancel").jqxButton({
									height : 30,
									width : 80
								});
								$("#dialog").css('visibility', 'visible');
								$("#deletepop").css('visibility', 'visible');
							},
							renderToolbar : function(toolBar) {
								var toTheme = function(className) {
									return className;
								}

								var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
								var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
								var addButton = $(buttonTemplate);
								var editButton = $(buttonTemplate);
								var deleteButton = $(buttonTemplate);
								container.append(addButton);
								container.append(editButton);
								container.append(deleteButton);
								toolBar.append(container);
								addButton.jqxButton({
									cursor : "pointer",
									enableDefault : false,
									disabled : false,
									height : 25,
									width : 25
								});
								addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
								addButton.jqxTooltip({
									position : 'bottom',
									content : "추가"
								});
								editButton.jqxButton({
									cursor : "pointer",
									disabled : true,
									enableDefault : false,
									height : 25,
									width : 25
								});
								editButton.find('div:first').addClass(toTheme('jqx-icon-edit'));
								editButton.jqxTooltip({
									position : 'bottom',
									content : "수정"
								});
								deleteButton.jqxButton({
									cursor : "pointer",
									disabled : true,
									enableDefault : false,
									height : 25,
									width : 25
								});
								deleteButton.find('div:first').addClass(toTheme('jqx-icon-delete'));
								deleteButton.jqxTooltip({
									position : 'bottom',
									content : "삭제"
								});

								//이벤트에 따른 버튼 상태 설정
								var updateButtons = function(action) {
									switch (action) {
									case "Select":
										addButton.jqxButton({
											disabled : false
										});
										deleteButton.jqxButton({
											disabled : false
										});
										editButton.jqxButton({
											disabled : false
										});
										break;
									case "Unselect":
										addButton.jqxButton({
											disabled : false
										});
										deleteButton.jqxButton({
											disabled : true
										});
										editButton.jqxButton({
											disabled : true
										});
										break;
									case "Edit":
										addButton.jqxButton({
											disabled : true
										});
										deleteButton.jqxButton({
											disabled : true
										});
										editButton.jqxButton({
											disabled : true
										});
										break;
									case "End Edit":
										addButton.jqxButton({
											disabled : false
										});
										deleteButton.jqxButton({
											disabled : false
										});
										editButton.jqxButton({
											disabled : false
										});
										break;
									}
								}

								var rowKey = null;
								var args = null;
								$("#jqxGrid").on('rowselect', function(event) {
									alert('a');
									args = event.args;
									rowKey = args.key;
									updateButtons('Select');
								});
								$("#jqxGrid").on('rowunselect', function(event) {
									updateButtons('Unselect');
								});
								$("#jqxGrid").on('rowEndEdit', function(event) {
									updateButtons('End Edit');
								});
								$("#jqxGrid").on('rowBeginEdit', function(event) {
									updateButtons('Edit');
								});

								//추가 버튼 이벤트
								addButton.click(function(event) {
									if (!addButton.jqxButton('disabled')) {
										if (args != null) {
											var key = args.key;
											var row = args.row
											$("#dialog").attr('data-row', key);
											$("#UserGroup").jqxDropDownList('selectItem', row.UserGroup);
										}
										// update the widgets inside jqxWindow.
										$("#dialog").jqxWindow('setTitle', "추가");
										$("#dialog").jqxWindow('open');
										$("#UserId").val('');
										$("#UserName").val('');
										$("#Email").val('');
										$("#Phone").val('');

										// disable jqxTreeGrid.
										$("#jqxGrid").jqxGrid({
											disabled : true
										});
										updateButtons('add');
									}
								});//add Click
								//수정 버튼 이벤트
								editButton.click(function() {
									if (!editButton.jqxButton('disabled')) {
										EditPopup(args);
										updateButtons('edit');
									}
								});//edit Click
								//삭제 버튼 이벤트
								deleteButton.click(function() {
									if (!deleteButton.jqxButton('disabled')) {
										$("#deletepop").jqxWindow('setTitle', "삭제");
										$("#deletepop").jqxWindow('open');
										$("#jqxGrid").jqxGrid({
											disabled : true
										});
										updateButtons('delete');
									}//if
								});//delete Click
							}//renderToolbar
						});//Grid Set
					}//function
				});//expander
			}//success
		});//ajax
	});//ready
</script>
</head>
<body class='default'>
  <ul class="breadcrumb">
    <li>Home</li>
    <li>공통 관리</li>
    <li>사용자 관리</li>
  </ul>
  <div class="panel-body">
    <div id='jqxExpander'>
      <div>사용자 관리</div>
      <div>
        <div id="jqxGrid"></div>
      </div>
    </div>
  </div>
  <div style="visibility: hidden;" id="dialog">
    <div>Edit Dialog</div>
    <div style="overflow: hidden;">
      <table style="table-layout: fixed; border-style: none;">
        <tr>
          <td align="right">사용자ID:</td>
          <td align="left"><input id="UserId" type="text" /></td>
        </tr>
        <tr>
          <td align="right">사용자명:</td>
          <td align="left"><input id="UserName" type="text" /></td>
        </tr>
        <tr>
          <td align="right">사용자그룹:</td>
          <td align="left">
            <div id="UserGroup"></div>
          </td>
        </tr>
        <tr>
          <td align="right">이메일:</td>
          <td align="left"><input id="Email" type="text" /></td>
        </tr>
        <tr>
          <td align="right">전화번호:</td>
          <td align="left"><input id="Phone" type="text" /></td>
        </tr>
        <tr>
          <td colspan="2" align="right"><br />
            <button id="save">저장</button>
            <button style="margin-left: 5px;" id="cancel">취소</button></td>
        </tr>
      </table>
    </div>
  </div>
  <div style="visibility: hidden;" id="deletepop">
    <div>Delete Dialog</div>
    <div style="overflow: hidden;">
      <table style="table-layout: fixed; border-style: none;">
        <tr>
          <td align="center"><div>삭제 하시겠습니까?</div></td>
        </tr>
        <tr>
          <td align="center"><br />
            <button id="ok">확인</button>
            <button style="margin-left: 5px;" id="delcancel">취소</button></td>
        </tr>
      </table>
    </div>
  </div>
</body>
</html>
    May 6, 2015 at 5:59 am 'rowselect' events is not working. #70693

    Peter Stoev
    Keymaster

    Hi coni,

    Here is example: http://jsfiddle.net/jqwidgets/G9KY5/ which shows how to use the event. As you see, the demo works.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    March 31, 2017 at 1:28 am 'rowselect' events is not working. #92587

    soojung
    Participant

    Hey Coni, You should delete or modify user information.

    개인정보는 지우셔야 합니다..

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.