노군의 일상사

Jquery를 이용한 플러그인중에서 edit in place가 지원되는 플러그인을 찾다가 jeditable이라는 것을 발견했습니다. 테이블, div등의 테그로 된 내용중 일부를 클릭으로 수정창을 나오게 한다음에 수정을 할 수 있게 해주는 플러그인 입니다.

홈페이지 : http://www.appelsiini.net/projects/jeditable

깔끔하고 실습용 예제가 잘 나와 있어서 적용하는데는 문제가 없었습니다. 하지만 적용을 하고 보니 페이지가 양이 적은 곳은 상관이 없는데 테이블의 행이 70라인이 넘어가는 페이지는 IE에서 로드가 느린감이 있었습니다. 그래서 다른 브라우저에서도 그런가 했더니 FF에서는 정상적으로 빠르게 표시가 되었습니다.
가져다 쓰는 입장이라 수정을 할 줄 몰라 헤매던중 구글신의 도움을 빌으니 답이 있었습니다.
http://tln.kr/n8j0 를 찾아가보면 맨 밑에 답이 있습니다. 이분도 IE에서 로딩이 느림을 물어봤는데 플러그인 제작자가 밑에 손수 답글을 달아 주었네요.

웹페이지가 로드시 바로 이벤트를 지정하지 않고 bind를 이용해서 이벤트가 발생할 때 trigger를 이용해서 사용할 수 있도록 하라고 되어 있더군요. 처음에는 적용을 했는데 안되서 이걸 왜 올렸지 했는데 아마도 제가 복사 & 붙여넣기 하면서 몇가지를 빼먹었는지 다 지우고 천천히 치니 정상적으로 실행이 되더군요.  아래는 간단하게 수정한 코드입니다. <td>부분을 더블클릭해야만 jeditable 이벤트가 발생해서 수정 할 수 있습니다.
자료를 넘기면서 기존 값도 같이 넘겨주기 위해 submitdata를 넣어주었는데 잘 전달 되네요.

1
2
3
4
5
6
7
8
9
10
11
12
13

    $(function(){
      $(".Editable").bind("dblclick",function(){
        $(this).editable("EditSave.php", { 
          indicator : "<img src='images/indicator.gif'/>",
          onedit : function(settings, self) { 
            $(this).html($(this).text()); },
          placeholder : '',
          event : 'edit',
          name : 'new_value',
          submitdata : {original_value: $(this).text()}
       }).trigger("edit"); 
      });
    });

onedit 부분은 수정하는 부분에 link가 있는데 순수 값만 나오게 하고 싶어서 한 코드입니다.
jeditable은 적용된 class에 내용이 없으면 자동으로 ‘Click to me!!’가 나와서 placeholder에 값을 ”로 주니 깔끔하게 공백으로 나옵니다.

No related posts.