juijs / jui-grid Goto Github PK

테이블 Editing Rows기능에

숫자 01234 를 입력한 후

엔터키를 했을 때

숫자가 0 이 빠진 1234 로 나오게 됩니다.

처음 입력한 01234 그대로 나오게 하려면 어떻게 해야 하는지 궁금합니다.

Use the paging on the table을 Modal창에 넣으면 head 부분에 있는 th들중 마지막 th만 제외하고 모두 width가 0이 되어버리네요.

<div class="window dashboardListModal">
	<div class="head">
		<div class="left">대시보드 목록</div>
		<div class="right">
			<a href="#" class="close" onclick="closeModal('dashboardListModal')"><i class="icon-exit"></i></a>
		</div>
	</div>
	<form id="dashboardListForm" method="post">
		<div class="body" style="height:600px;">
			<div id="paging_dashboardList_xtable" class="xtable" style="margin-top: 7px;">
				<table class="table classic hover" style="cursor:default;">
					<thead>
					    <tr>
					        <th><input type="checkbox"/></th>
	                        <th>오브젝트 번호</th>
							<th>등록자 번호</th>
							<th>등록시간</th>
							<th>시스템 번호</th>
							<th>오브젝트 명</th>
					    </tr>
				    </thead>
				    <tbody></tbody>
				</table>
			</div>
			<div id="paging_dashboardList" class="paging" style="margin-top: 3px;">
			    <a href="#" class="prev">Previous</a>
			    <div class="list"></div>
			    <a href="#" class="next">Next</a>
			</div>
		</div>
	</form>
	<div class="foot" align="center">
		<a class="btn focus">확인</a>
		<a class="btn" onclick="closeModal('dashboardListModal')">닫기</a>
	</div>
</div>

vertical menu style도 아래처럼 dropdown 메뉴로 생성해서 show()와 hide()함수를 사용하는 것이 맞나요...?
vmenu를 addClass랑 removeClass 써서 구현하자면 구현할 수는 있겠지만 혹시나 만들어두신 function이 있으면 그걸 사용하려합니다....
감사합니다 ~~

jui.ready([ "ui.dropdown" ], function(dropdown) {
	vmenu = dropdown("#vmenu", {
        event: {
            change: function(data) {
                alert(data.value + ", " + data.text);
            }
        }
    });
});

var selectedIndex = null, expandedIndex = null, editableIndex = null, dragIndex = null, checkedIndexes = {};

를 selectedRow, expandedRow, ... 형태로 변경

table에서 remove() 메소드 사용 후 select() 메소드를 사용하면 오류가 발생합니다.

• 테이블에 행이 2개 있는 상황에서 2번 째 행을 select() 합니다.
  selectedIndex가 1이 됩니다.
• 2번째 행을 remove() 로 지웁니다.
  테이블에서 2번째 행은 삭제됩니다.
  selectedIndex는 여전히 1입니다.
• 1번 쨰 행을 select() 합니다.
  오류 발생!!..
  select() 메소드 안에 resetRowStatus() 로 인해 unselect()가 호출됩니다.
  unselect() 안에서 selectedIndex는 1입니다.
  따라서 테이블의 2번행 엘리먼트는 존재하지 않음에도 2번째를 사용하려 하다가 오류가 납니다.
  이 오류는 한번 나면 계속 발생합니다.

그래서 remove() 메소드안에 임시방편으로 이걸 넣어놨습니다.

if (index == selectedIndex) {
selectedIndex = null;
}

저는 jui.io 홈페이지에서 zip 파일 형태로 되어있는 것을 다운받아 사용하였습니다.
master 브랜치 버전인가봅니다.

1. Window의 팝업 기능
   http://uiplay.jui.io/?p=win_2

2. Table의 row 위치 드래그 수정 기능
   http://uiplay.jui.io/?p=table_20

위의 "2. Table 기능" 을 "1. Window 팝업 기능" 에 넣으면

테이블의 스크롤 높이 기능 ( http://uiplay.jui.io/?p=table_4 )
scroll: true,
scrollHeight: 150, 기능이 되지 않습니다.

Table이 Window 팝업 기능에서도 scrollHeight 기능이 되게 하려면 어떻게 해야하나요?

최초에는 데이터가 있고, 다시 갱신했을 때, 데이터가 없다면...
이전 데이터로 계산된 스크롤이 남아있음...
스크롤을 초기화하는 코드를 추가해야 함...

xtable을 생성하고 가져오는 데이터를 뿌려주고 있는데

위와 같은 구조 형태이고 실제로 화면상에는 아래와 같이 나옵니다.

문제는 두번째 tr이 표기가 안된다는건데요 개발자 도구를 통해서 봐도 최초 tr하나밖에 인식이 되지 않습니다.

해결 방법이 있을까요?

selected, expanded, checked 등등 여러가지 상태에 대한 초기화 로직 추가

Q )) x-table의 paging 기능을 그냥 table에도 적용 가능한지 궁금합니다.. ( ' . ' )

http://uiplay.jui.io/?p=paging_2

위 링크를 보면 x-table 에는 paging 기능이 있는데,
그냥 table 에는 paging 기능을 적용한 예제가 안 보여서요.. ;;

그래서 그냥 table 에다가 paging 기능이 있는 x-table 의 소스를 이런 방식 저런 방식으로 막 넣어 봤는데,, 잘 안되네요..( ㅠ_ㅠ )

보니깐 파폭이랑 크롬이랑 동일하게 오른쪽으로 가있네.

마우스 드래그를 통해 로우 위치를 변경하는 기능

window.devicePixelRatio 기준으로

$().scrollTop(30) 을 설정할 때 $().scrollTop() 을 하면 30이 정상적으로 안나오는 문제 때문에 생김.

table 특정 컬럼 수정 후, 다른 행의 컬럼 수정 시, 동일 값이 바인딩 되는 현상 관련하여 향후 패치 계획이 있는지 궁금합니다.

데이터를 polling 하여 실시간으로 업데이트를 하는데,
브라우저 메모리가 계속 증가하는 현상이 나타납니다. 그래서 polling 시 x-table 에 update 하는 로직을 주석처리 후 테스트를 해봤더니 메모리 증가가 없었습니다.
위와 같은 현상은 JUI 홈페이지 Component 화면에서 직접 반복 update 를 했더니 같은 현상이 나타났습니다.

브라우저 heap dump 를 확인해 보니
[10] 만 남아있어야 하는데, 하기와 같이 그 이전의 데이터들이 heap 안에 남아있었습니다.
11013 :: " [4]Alvin18 81 LA " @661179
1025 :: " [7]Alvin2 389 LA " @711257
1055 :: " [9]Alvin17 490 LA " @190239
107 :: " [5]Alvin11 462 LA " @711707
1088 :: " [8]Alvin18 111 LA " @193333
110 :: " [6]Alvin0 846 LA " @711517
1106 :: " [8]Alvin7 933 LA " @193363
1142 :: " [5]Alvin9 85 LA " @711703
116 :: " [10]Alvin15 665 LA " @186825
1193 :: " [10]Alvin1 607 LA " @186853
1232 :: " [7]Alvin6 370 LA " @711265
...

해당 코드는 하기와 같습니다.

var xtable_1 = xtable("#xtable_1", {
          fields: [ "name", "age", "location" ],
          colshow: [ 0, 1, 2],
          sort: [ 0, 2 ],
          sortLoading: true,
          resize: true,
          buffer: "scroll",
          bufferCount: 20,
          scrollHeight: 300,
          event: {
                    colmenu: function(column, e) {
                               this.showColumnMenu(e.pageX - 25);
                    }
          },
          tpl: {
                    row: $("#tpl_row").html(),
                    none: $("#tpl_none").html(),
                    menu: $("#tpl_menu").html(),
                    loading: $("#tpl_loading").html()
          }
});

testIndex = 0;
xtable_1_submit = function() {
          testIndex++;

          var result = [];

          for(var i = 0; i < 1000; i++) {
                    result.push({ name: "[" + testIndex + "]Alvin" + i, age: Math.floor(Math.random() * 1000) + 1, location: "LA" });
          }

          xtable_1.update(result);

메모리 증가하지 않도록 하는 해결 방법 및 로직이 필요합니다.

윈도우 리사이징시 컬럼 크기가 맞지 않는 버그 수정

안녕하세요!
TABLE edit 활성화된 상태에서 테이블 클릭 시 editend에서 return false해도
table 데이터가 업데이트 되는 문제 해결하는 방법이 궁금합니다.

마우스 드래그로 로우 순서 바꾸는 기능

table에 input으로 데이터를 입력 받고 있습니다.

중간행 remove시 중간행 이후의 행들의 입력값이 초기화되는 현상이 있습니다.

xtable 마우스 오버이벤트 없나요?
공식 api문서에 찾아봐도 없어서요

table 에는 editRow, editEvent라는 옵션이 있어서 값을 수정할 수 있는데 xtable에도 그런 기능이 있나요?
그리고 더블클릭하는 열에 따라서 이벤트를 다르게 주고 싶은데 dblclick에서 행이 아닌 열에 관한 이벤트 함수가 있나요?

    let xtable = xtableUI("#xtable", {
      ...
        event: {
            dblclick: function (row, e) {

            }
        }
    });

xlsx 형식으로 export 하는 기능이 필요함.

• header 포함해서 export
• header 제외하고 export

window에 table을 생성 후에 작업을 완료하고 다시 그 window를 열었을때

grid에 데이터가 나오지 않습니다.

데이터 자체는 찍히는데 실제 grid에 표현을 못해주는거 같아요

찾아보니 2015년에 저랑 거의 흡사한 내용이 있는데 해결이 완료 되지 않고 닫혔더라구요

table.destroy나 table = null을 하라고 답변해주셨는데 당시 질문자님도 해결이 안된다고 하셨구요

혹시 방법을 알려주실 수 있을까요

1. 결과 값이 없도록 필터링 한다.
2. 정렬하면 모든 로우가 보여진다.

1. 로우를 전체 삭제한다.
2. 정렬하면 캐싱된 로우가 보여진다.

1. xtable
2. table