데꾸벅의 생각들

jQuery Grid Plugin : jqGrid

Scripter/jQuery / 2009. 4. 6. 23:55

jQuery로 프로젝트 수행중 extjs의 grid기능을 맘껏 쓸수 없을까 하다가 데꾸벅! jqGrid라는 아주 좋은 녀석을 발견하였다.

여러가지 테마를 사용할수 있지만 구미에 맞도록 CSS를 바꿔 보았다. extjs의 경우 UI자체를 수정하기가 어려운 반면 이녀석은 상당히 수월하게 바꿀수 있었다.

소스다운로드 :

jQueryGrid.zip

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>서학리조트 컨텐츠</title>
<link rel="stylesheet" type="text/css" href="style/css/contents.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style/css/grid.css" media="screen" />
<script type="text/javascript" src="style/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="style/js/jquery.jqGrid.js" charset="utf-8"></script>
<script type="text/javascript" src="style/js/contents_04.js" charset="utf-8"></script>
</head>
<body>
<table class="tbl_tit02"><tr><td>담보 사항</td></tr></table>
<div class="gridJ" style="width:780px"><table id="gridList" class="scroll" ></table></div>

js file

var lastsel3;

$(document).ready(function(){

    $("#gridList").jqGrid({
        url:'server.json',
        mtype: 'GET',
        datatype: "json",
        colNames:['인벤토리','날짜', '고객', '수량','세금','합계','비고'],
        colModel:[
        {name:'id',index:'id', width:100,align:"center",key:true},
        {name:'invdate',index:'invdate', width:120,editable:true,sorttype:"date",formatter:'date', formatoptions:{srcformat:"Y-m-d",newformat:"d-M-Y"}},
        {name:'name',index:'name asc, invdate', width:100,editable:true,editoptions:{size:"20",maxlength:"30"}},
        {name:'amount',index:'amount', width:100, align:"right",editable:true,editable:true,editrules:{number:true,minValue:100,maxValue:350},formatter:'currency',formatoptions:{thousandsSeparator:","}},
        {name:'tax',index:'tax', width:100, align:"right",editable:true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
        {name:'total',index:'total', width:100,align:"right",editable:true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
        {name:'note',index:'note', width:150, sortable:false,editable:true,edittype:"textarea", editoptions:{rows:"1",cols:"20"}}
        ],
        rowNum:30, <-- 가끔씩 이넘이 말썽부릴때가... -1로 해놓으면 가져온 데이타 모두 뿌려줍니다
        height:278,
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        multiselect: false,//앞에 체크박스처리
        multikey: "",//multikey: "ctrlKey/shiftKey",
        editurl: "server.json",
        /*onSelectRow: function(id){ //row가 선택되었을 경우
      if(id && id!==lastsel3){
       jQuery('#gridList').restoreRow(lastsel3);
       jQuery('#gridList').editRow(id,true,pickdates);
       lastsel3=id;
      }
     },*/
        /*jsonReader: {//스크롤할때마다 가져오기
      repeatitems : true,
      cell:"",
      id: "0"
    },*/
       afterInsertRow: function(rowid, aData){
        switch (aData.name) {
          case 'Client 1':
           jQuery("#gridList").setCell(rowid,'total','',{color:'green'});
          break;
          case 'Client 2':
           jQuery("#gridList").setCell(rowid,'total','',{color:'red'});
          break;
          case 'Client 3':
           jQuery("#gridList").setCell(rowid,'total','',{color:'blue'});
          break;

        }
        },
        loadError : function(xhr,st,err) {
        jQuery("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
        },
        imgpath: 'style/grid'
    });

    $("#a1").click( function(){
    var id = jQuery("#gridList").getGridParam('selrow');
    if (id) {
      var ret = jQuery("#gridList").getRowData(id);
      alert("id="+ret.id+" invdate="+ret.invdate+"...");
    } else { alert("Row를 선택해주세요");}
    });
    $("#a2").click( function(){
    var su=jQuery("#gridList").delRowData(12);
    if(su) alert("id가 12인 Row삭제"); else alert("이미 지워졌삼~");
    });
    $("#a3").click( function(){
    var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
    var su=$("#gridList").addRowData(99,datarow);
    if(su) alert("마지막Row추가 성공- 서버쪽 업데이트처리해주세요"); else alert("처리가 되지 않았음.");
    });

    $("#a4").click( function() {
        $("#gridList").resetSelection();
    $("#gridList").setSelection("13");
    });

    $("#a5").click( function() {
    $("#gridList").hideCol("tax");
    });
    $("#a6").click( function() {
    $("#gridList").showCol("tax");
    });

    jQuery("#a7").click( function() {
    jQuery("#gridList").editRow("13");
    this.disabled = 'true';
    jQuery("#a8,#a9").attr("disabled",false);
    });
    jQuery("#a8").click( function() {
    jQuery("#gridList").saveRow("13");
    jQuery("#a8,#a9").attr("disabled",true);
    jQuery("#a7").attr("disabled",false);
    });
    jQuery("#a9").click( function() {
    jQuery("#gridList").restoreRow("13");
    jQuery("#a8,#a9").attr("disabled",true);
    jQuery("#a7").attr("disabled",false);
    });

    jQuery("#a10").click( function() {
    $("#gridList").setLabel("tax","Tax Amt",{'font-weight': 'bold','font-style': 'italic'});
    });

    jQuery("#a11").click( function() {
    $("#gridList").setCell("12","tax","",{'font-weight': 'bold',color: 'red','text-align':'center'});
    });

    jQuery("#a12").click( function() {
    $("#gridList").clearGridData();
    });

    jQuery("#a13").click( function() {
    $("#gridList").setGridWidth(500);
    $("#gridList").setGridHeight(400);

});

    jQuery("#a14").click(function (){
    tableToGrid("#htmlGrid");
    $("#htmlGrid").setGridWidth(810);
    });

});

function pickdates(id){
alert(id);
}

server.json

{
    "page": "1",
    "total": 27,
    "records": "13",
    "rows": [
        {
            "id": "5",
            "cell": [
                "5",
                "2007-10-06",
                "Client 3",
                "200.00",
                "0.00",
                "200.00",
                null
            ]
        },
        {
            "id": "4",
            "cell": [
                "4",
                "2007-10-05",
                "Client 2",
                "120.00",
                "12.00",
                "134.00",
                null
            ]
        },
        {
            "id": "3",
            "cell": [
                "3",
                "2007-10-05",
                "Client 1",
                "50.00",
                "10.00",
                "60.00",
                null
            ]
        },
        {
            "id": "2",
            "cell": [
                "2",
                "2007-10-05",
                "Client 3",
                "100.00",
                "0.00",
                "100.00",
                "no tax"
            ]
        },
        {
            "id": "1",
            "cell": [
                "1",
                "2007-10-04",
                "Client 3",
                "150.00",
                "0.00",
                "150.00",
                "no tax"
            ]
        }
    ]
}

소스사용은 자유이나 태클달지 맙시다 ^^ 현재버전의 jqGrid와 틀립니다..

저작자표시 비영리 동일조건

'Scripter > jQuery' 카테고리의 다른 글

ext의 border-layout과 같은 jQuery UI.Layout Plugin (0)	2009.01.14
jQuery pageSlide (0)	2009.01.12
jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기 (1)	2008.09.03
jQuery Loading바 구현하기 (2)	2008.07.08

Post by 넥스트리소프트 데꾸벅(techbug)

, |

ext의 border-layout과 같은 jQuery UI.Layout Plugin

Scripter/jQuery / 2009. 1. 14. 21:42

ExtJS의 border-layout 과 같은 효과를 내는 jQuery플러그인이 나와서 소개합니다.

UI.Layout 플러그인 제작자이며 초기프로젝트 제한자인 Kevin Dalman씨 또한 extJS border-layout을 보고 감명받아 jQuery Plug-in을 만들었다고 하며, 간단한 헤더레이아웃이나 사이드에서 부터 툴바, 메뉴, 헬프패널, status bars, sub-forms등을 가지고 있는 복잡한 애플리케이션까지 원하는 어떤 레이아웃도 만들수 있다고 하네요 ^^;

라이센스제한은 듀얼라이센스로 GPL과 MIT 라이센스를 따르고 있습니다. 아무렇게나 써도 된다는 것이네요 다만 제작자들이 원하는것은 사용해보고 괜찮으면 jQuery 플러그인사이트에서 "rate it" 투표나 해달라는거네요.. ㅡ"ㅡ;

jQuery stable version : 1.2.6

jQuery UI 1.5.2

UI.Layout Plugin 1.2.0

jquery.layout.all.techbug.zip

extjs의 기본 border-layout

솔직히 jQuery의 레이아웃매니저가 사용하기는 더 어렵게 느껴지는 이유는 무얼까요?

'Scripter > jQuery' 카테고리의 다른 글

jQuery Grid Plugin : jqGrid (16)	2009.04.06
jQuery pageSlide (0)	2009.01.12
jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기 (1)	2008.09.03
jQuery Loading바 구현하기 (2)	2008.07.08

Post by 넥스트리소프트 데꾸벅(techbug)

, |

jQuery pageSlide

Scripter/jQuery / 2009. 1. 12. 13:03

Web2.0이 대두되면서 기존의 레거시한 웹UI보다 조금은 다이나믹하고 다양한 Layout들이 나오기 시작했다.
탑-레프트-컨텐츠-푸터 방식의 eye-tracking이 중시되던 UI에서 기술적으로 많이 향상되기 시작하면서 다양한 메뉴와 UI화면들이 표현되기 시작했다.

마우스에 의한 각각의 메뉴표현 방식 : Ubiquity Pane in Mouse

구현기술향상에 의한 다양한 UI를 소화하기 위해서 위의 그림과 같이 여러가지 메뉴가 만들어 졌다.
그중에 Firefox Mobile의 메뉴를 jQuery Plugin으로 구현한 소스가 있어 소개한다.
(위 메뉴중 2줄 좌측 Tray Menu)
복잡하고 표현하기 힘든 UI의 경우 잠시 페이지를 숨겼다 오른쪽 panel에서 보여줄때 상당히 유용할듯.(extjs의 panel collapse, expand와 기능이 비슷하나 jQuery pageSlide의 경우는 a 링크에 표현된 페이지를 오른쪽에서 보여준다는 면에서 다르다)

[사용법]

Demo-Source, Project Homepage

jquery-pageslide-demo-0.2.zip

'Scripter > jQuery' 카테고리의 다른 글

jQuery Grid Plugin : jqGrid (16)	2009.04.06
ext의 border-layout과 같은 jQuery UI.Layout Plugin (0)	2009.01.14
jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기 (1)	2008.09.03
jQuery Loading바 구현하기 (2)	2008.07.08

Post by 넥스트리소프트 데꾸벅(techbug)

, |

jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기

Scripter/jQuery / 2008. 9. 3. 11:08

오늘자 ajaxian에 올라온 포스트 중에 jQuery Tip으로 링크에 걸린 파일사이즈를 자동으로 알아낸뒤 링크뒤에 출력해주는 포스팅을 번역해서 올려본다.
이미 올려져 있는 소스의 파일사이즈를 알아내 오는것으로 파일업로드시 파일사이즈 체크는 달리 해야 한다.

jQuery(function($){
$('a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]').each(function(){
// looking at the href of the link, if it contains .pdf or .doc or .mp3
var link = $(this);
var bits = this.href.split('.');
var type = bits[bits.length -1];

var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";

// then call the json thing and insert the size back into the link text
$.getJSON(url, function(json){
if(json.ok && json.headers['Content-Length']) {
var length = parseInt(json.headers['Content-Length'], 10);

// divide the length into its largest unit
var units = [
[1024 * 1024 * 1024, 'GB'],
[1024 * 1024, 'MB'],
[1024, 'KB'],
[1, 'bytes']
];

for(var i = 0; i <units.length; i++){

var unitSize = units[i][0];
var unitText = units[i][1];

if (length>= unitSize) {
length = length / unitSize;
// 1 decimal place
length = Math.ceil(length * 10) / 10;
var lengthUnits = unitText;
break;
}
}

// insert the text directly after the link and add a class to the link
link.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');
link.addClass(type);
}
});
});
});

소스에서 굵게 표시된 json.headers 를 이용해서 컨텐츠의 사이즈를 알아온뒤 link.after메쏘드로 화면에 출력해 주었다...
너무도 간단하게.. ㅡ.,ㅡ;

invalid-file

샘플사이트 : http://natbat.net/code/clientside/js/addSizes/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>addSizes</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="addSizes.js" type="text/javascript"></script>
</head>
<body>
<h1>addSizes</h1>
<p>This is a link to a remote <a href="http://clearleft.com/worksheet/client-worksheet.doc">doc</a> file.</p>
<p>This is a link to a remote <a href="http://www.onyx.com/pdf/CustomerMgmtBrochure.pdf">pdf</a> file.</p>
<p>This is a link to a remote <a href="http://media.giantbomb.com/podcast/giantbombcast-071708.mp3">mp3</a> file.</p>

<p>This is a link to a local <a href="media/test.doc">doc</a> file.</p>
<p>This is a link to a remote <a href="media/test.pdf">pdf</a> file.</p>
<p>This is a link to a remote <a href="media/test.mp3">mp3</a> file.</p>
</body>
</html>

[ 다른 방법 : jQuery와 같이 3-party library를 사용하지 않고 단순 xhr을 이용한 방법 ]

function filesize (url) {

var req = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

if (!req) throw new Error('XMLHttpRequest not supported');

req.open ('HEAD', url, false);

req.send (null);

if (!req.getResponseHeader) {

try {

throw new Error('No getResponseHeader!');

} catch(e){

return false;

}

} else if (!req.getResponseHeader('Content-Length')) {

try {

throw new Error('No Content-Length!');

} catch(e){

return false;

}

} else {

return req.getResponseHeader('Content-Length');

}

사용법 : filesize('파일주소');

테스트샘플

<html>

<body>

function filesize (url) {

var req = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

if (!req) throw new Error('XMLHttpRequest not supported');

req.open ('HEAD', url, false);

req.send (null);

alert("전체 헤더======================\n\n"+req.getAllResponseHeaders());

try{

if(!req.getResponseHeader('Content-Length')) alert(req.getResponseHeader('Content-Length') + 'bytes');

}catch(e){

alert("에러");

}

</script>

<button onclick="filesize('https://t1.daumcdn.net/cfile/tistory/190E4E1249F6B2D7E2');" >이미지 파일사이즈</button><br />

<button onclick="filesize('http://techbug.tistory.com/122');" >웹페이지 파일사이즈(Entity header가 없는경우)</button><br />

<button onclick="filesize('http://www.webmasterworld.com/forum91/1920.htm');" >웹페이지 파일사이즈(Entity header가 있는경우)</button><br />

</body>

</html>

이경우 맨위의 버튼은 이미지 파일사이즈를 가져오는 것이라 content-Length가 표시되지만 아래의 경우 text/html의 content-length가 되지 않아 사이즈를 정할수 없다.

보통 HTTP header의 경우 (특히 Entity-Header)의 경우는 request를 보내는 브라우저의 종류에 따라 보내주는 정보가 틀려서 content-length를 구하는 방법이 어렵다.

위에서 보는 바와 같이 똑같이 웹페이지 파일사이즈를 정하는데 text/html일 경우 Fiddler나 다른 HTTP Header정보를 볼수 있는 프로그램으로 보면 서로 달리 나오는것을 확인할수 있다.

파일업로드시 용량을 체크하려면 File System Object 를 사용해야 한다.

스크립트 보안 메세지가 뜨는 단점이 있다.

<html>

<head>

function A(){

var oas = new ActiveXObject("Scripting.FileSystemObject");

var d = document.a.b.value;

var e = oas.getFile(d);

var f = e.size;

alert(f + " bytes");

}

</script>

</head>

<body>

</form>

</body>

</html>

'Scripter > jQuery' 카테고리의 다른 글

jQuery Grid Plugin : jqGrid (16)	2009.04.06
ext의 border-layout과 같은 jQuery UI.Layout Plugin (0)	2009.01.14
jQuery pageSlide (0)	2009.01.12
jQuery Loading바 구현하기 (2)	2008.07.08

Post by 넥스트리소프트 데꾸벅(techbug)

, |

jQuery Loading바 구현하기

Scripter/jQuery / 2008. 7. 8. 21:59

이미 아는 사람들은 다아는 로딩바 원하는 형태로 만들기 사이트(http://www.ajaxload.info/)에서 좋은 Loading Indicator(Spinner)를 구한 다음에 아래와 같이 간단히 구현할 수 있다.

jQuery(function($){
// Create img dom element and insert it into our document
var loading = $('<img alt="loading" src="/images/loading.gif" />')
.appendTo(document.body).hide();
// Make the image appear during ajax calls
$(window).ajaxStart(loading.show);
$(window).ajaxStop(loading.hide);
});

참고적으로 요기도 보아두면 좋아요~~
jQuery를 모르는 분들은 여기서 부터 시작하세요

'Scripter > jQuery' 카테고리의 다른 글

jQuery Grid Plugin : jqGrid (16)	2009.04.06
ext의 border-layout과 같은 jQuery UI.Layout Plugin (0)	2009.01.14
jQuery pageSlide (0)	2009.01.12
jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기 (1)	2008.09.03

Post by 넥스트리소프트 데꾸벅(techbug)

, |

카테고리

최근에 올라온 글

최근에 달린 댓글

링크

'Scripter/jQuery'에 해당되는 글 5건

jQuery Grid Plugin : jqGrid

'Scripter > jQuery' 카테고리의 다른 글

ext의 border-layout과 같은 jQuery UI.Layout Plugin

'Scripter > jQuery' 카테고리의 다른 글

jQuery pageSlide

'Scripter > jQuery' 카테고리의 다른 글

jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기

'Scripter > jQuery' 카테고리의 다른 글

jQuery Loading바 구현하기

'Scripter > jQuery' 카테고리의 다른 글

티스토리툴바