2012-11-23

scripts] ms sql server total size check


'// sql server
'// Displays the total size of a SQL Server database
'//

strDBServerName = "database server name"
strDBName = "ScriptingGuysTestDB"

Set objSQLServer = CreateObject("SQLDMO.SQLServer")
objSQLServer.LoginSecure = True
objSQLServer.Connect strDBServerName

Set objDB = objSQLServer.Databases(strDBName)
WScript.Echo "Total Size of Data File + Transaction Log of DB " & strDBName & ": " & objDB.Size & "(MB)"

작성자: 시간: 댓글 없음:
라벨: , , , , ,

scripts] smtp 서비스 사용해서 메일 보내기


'//
'// smtp 서비스 사용해서  메일 보내기
'// ms technet site 내용.
'// 메일 보내기 테스트

Set objEmail = CreateObject("CDO.Message")

objEmail.From = "send email address"
objEmail.To = "receive email address"
objEmail.Subject = "메일 보내기 테스트 입니다/"
objEmail.Textbody = "내용을 만들어서 보내세요."
objEmail.Send

작성자: 시간: 댓글 없음:
라벨: , , ,

javascript] array를 이용한 중복제거


//TIPS
//[JS] Array 중복제거하기(2009/06/01)
//written by Kim Yeonview : 36
//
Array.prototype.removeSame = function() {

var oldArray = this;
var b = [];
var j = 0;
oldArray.sort();
while(oldArray.length > 0) {

var newKey = oldArray.shift();
if(j == 0) {
b.push(newKey);
j++;
} else if(b[j-1] != newKey) {
b.push(newKey);
j++;
}
}

return b;

};

작성자: 시간: 댓글 없음:
라벨: , ,

jquery] jquery 사용 가이드




출처 : http://www.anyframejava.org/node/1061


jQuery 사용 가이드

Submitted by sooyeon.park on 월, 06/07/2010 - 09:03.
안녕하세요. kk3134님,
추후 릴리즈될 Anyframe 4.5.0 버전에서 jQuery 1.4.2 버전을 Integration한 jQuery Anyframe Plugin을 제공할 예정입니다.
필요 파일과 샘플 코드 그리고 사용가이드를 제공할 예정입니다.
(Grid, UI(tab), Tree, Autocomplete, Popup, DropDownList 제공 예정)
현재 바로 jQuery를 사용하고 싶으시다면, 아래와 같이 JSP 페이지에서 사용하고자 하는 jQuery Plugin에 대한 Javascript 파일 및 CSS 파일을
포함시켜야합니다. jQuery 또한 core 기능을 제공하는 jquery-1.4.2.min.js 외 나머지 autocomplete, tree, popup, grid 등의 기능을
Plugin 형태로 제공하므로 원하는 기능을 선택하여 포함시키도록 합니다.
  <!-- for jquery -->

  <script type="text/javascript" src="/jquery/jquery-1.4.2.min.js">



  <!-- jquery:autocomplete -->

  <link rel="stylesheet" type="text/css" href="/jquery/autocomplete/jquery.autocomplete.css">

  <script type="text/javascript" src="/jquery/autocomplete/jquery.autocomplete.js">

  <script type="text/javascript" src="/jquery/autocomplete/jquery.bgiframe.min.js">  

  

  <!-- jquery:jstree-0.9.9 -->

  <script type="text/javascript" src="/jquery/jstree/lib/jquery.cookie.js">

  <script type="text/javascript" src="/jquery/jstree/lib/jquery.metadata.js">

  <script type="text/javascript" src="/jquery/jstree/jquery.tree.js">

  <script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.contextmenu.js">

  <script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.cookie.js">



  <!-- jquery ui, jqGrid -->

  <script type="text/javascript" src="/jquery/jqgrid/i18n/grid.locale-en.js">

  <link href="/jquery/jquery-ui/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> 

  <script type="text/javascript" src="/jquery/jquery-ui/jquery-ui-1.7.2.custom.min.js">

  <link href="/jquery/jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 

  <script type="text/javascript" src="/jquery/jqgrid/jquery.jqGrid.min.js">

 

  <!-- jquery popup -->

  <script type="text/javascript" src="/jquery/nyromodal/js/jquery.nyroModal-1.6.2.pack.js">

  <link href="/jquery/nyromodal/styles/nyroModal.css" rel="stylesheet" type="text/css" />

  

  <!-- jquery tab -->

  <link href="/jquery/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css" />

            

  <!-- jquery uploadify -->

  <script type="text/javascript" src="/jquery/uploadify/swfobject.js">

  <script type="text/javascript" src="/jquery/uploadify/jquery.uploadify.v2.1.0.min.js">

     

  <!-- jquery image dropdown -->

  <script type="text/javascript" src="/jquery/dropdown/msdropdown/js/jquery.dd.js">

  <link href="/jquery/dropdown/msdropdown/dd.css" rel="stylesheet" type="text/css" />
이 중 간단한 Autocomplete 기능을 예로 들어보면, 아래와 같은 간단한 코드로 Auto Complete 기능을 적용하실 수 있습니다.
- 필요파일) jquery.js(ver. 1.4.2), jquery.autocomplete.js, jquery.bgiframe.js (이상 ver. 1.1), jquery.autocomplete.css
$(“#searchKeyword”).autocomplete(

   ””, {

   width : 200,

   scrollHeight : 200,

   selectFirst:true,

   mustMatch:true,

   matchCase:true,

   autoFill:true,

   scroll: true

 });
위와같이 url을 지정해 주면 바로 autocomplete 기능을 사용할 수 있습니다.
jquery-autocompletejquery-autocomplete
»
작성자: 시간: 댓글 없음:
라벨: ,

jquery] jquery jqgrid 설정



원본 출처 : http://dayg.tistory.com/239?srchid=BR1http%3A%2F%2Fdayg.tistory.com%2F239


http://www.trirand.com/blog/?page_id=6 에서 기능별 js파일을 선택하여 zip파일 다운로드.

압축을 풀면 세가지 폴더가 나온다.

jquery.jqGrid-3.6.5/js : 
jquery.jqGrid.min.js - jqGrid의 모든 기능이 포함된 압축버전, 배포시 사용
/i18n/grid.locale-en.js - 언어별 locale파일이 있는 i18n폴더. 난 rid.locale-en.js파일을 사용했다.

jquery.jqGrid-3.6.5/css: grid에서 사용하는 css


jquery.jqGrid-3.6.5/src: src폴더는 디버깅을 위한 비압축된 기능별 스크립트 파일이 포함되어있다. 개발시 사용

jqGrid 디버깅을 위한 설정

jquery.jqGrid-3.6.5/src/grid.loader.js
- 비압축된 js파일들을 include해주는 스크립트다. 소스에서 pathtojsfiles라는 변수에 src폴더의 js파일들의 경로를      설정하고, 이 파일을 include하면 된다.
 

메시지: '$.jgrid.formatter.integer'은(는) null 이거나 개체가 아닙니다.
줄: 711
문자: 5
코드: 0
URI: http://61.250.201.238:8080/memberManagement/js/jqgird_3_6_5/grid.base.js

위 에러는 locale파일의 경로가 틀렸을 경우에 발생한다. 

작성자: 시간: 댓글 없음:
라벨: , ,

jquery] jquery 튜토리얼




jquery  설명 사이트 :  http://godffs.tistory.com/category/ASP.NET/jQuery


[jQuery in Action 내용중]

Selector : html 내의 원하는 작업 대상 엘리먼드를 선택할 수 있는 방법

$("ELEMENT") -> 기본문법
$("p") -> html 내의 모든 p ELEMENT
$("p a") -> html 내의 모든 p ELEMENT 내의 a ELEMENT
$("p:even") ->html 내의 p ELEMENT 중 짝수번째 
$("tr:nth-child(1)") -> html 내 모든 테이블 중 첫번째 tr
$("body > div") -> body 아래 첫번째 div
$("a[href$=pdf]") -> pdf 파일이 링크된 a ELEMENT ($는 끝이 pdf로 끝나는 , 반대는 ^)
$("a[href^=http://]") -> a ELEMENZT 중 href attribute가 http://로 시작하는 
$("body > div:has(a)") -> body 내 div 중 a ELEMENT를 포함하고 있는 div
$("form[method]") -> method attribute를 가진 모든 form ELEMENT
$("input[type=text]") -> type이 text인 모든 input 
$("a[href*=jquery.com] -> href에 jquery.com이 포함된

li:has(a) <> li a

Selector 참고 링크 : http://docs.jquery.com/Selectors

CSS Selector
#someID -> someID를 가지고 id로 가지고 있는 ELEMENT
.someClass -> someClass를 class로 가지고 있는 모든 ELEMENT
a#someID.someClass -> a 태그 중 id가 someID이면서 class가 someClass인 
$("p a.someClass") ->p ELEMET 내에 있는 a 태그 중 class가 someClass인 

a:first
a:even
a:odd
li:last-child


[jQuery in Action 내용중]

jQuery로 만들어진 기본 유틸리티

$.trim("string") 

아래의 세 개가 동일한 효과를 나타내나, 맨 아래가 제일 단순함
window.onload = function() {
$("table tr:nth-child(even)").addClass("class집합");
};  --> 페이지가 모두 로드된 다음 실행되므로, 이미지 등이 로딩 모두 로딩될 때까지 기다려야 하므로 체감 속도가 느리다. 

$(document).ready(funtion() {
$("table tr:nth-child(even)").addClass("class집합");
};  --> DOM 트리가 로드된 다음 실행 되어 위보다 상대적으로 빠름

$(function() {
$("table tr:nth-child(even)").addClass("class집합");
};




JQuery 사용해보기.
프로토타입, 도조 등 많은 비슷한 스크립트 라이브러리들이 있지만 요세 대세? 가벼우면서 막강한 JQuery를 사용해보자.
각 포털사이트에서 JQuery를 검색해보면 JQuery는 홈페이지에서 다운로드 할 수 있다.

해당 엘리먼트 접근하기
일반 :document.getElementById("id");
JQuery : $("#id");
   - 엘리먼트의 ID 접근시 #, class 접근시 .

해당 엘리먼트의 값 접근하기
일반 : document.getElementById("id").value;
JQuery : $("#id").val();
   - 엘리먼트의 값을 대입하고 싶다면 $("#id").val("값");

해당 엘리먼트의 개체를 비교하여 true/false를 알려주는 메소드
일반 : document.getElementById("id").checked;
JQuery : $("#id").is(':checked');
   - 체크박스 및 라디오버튼에 체크상태인지를 boolean 형으로 반환
   - $("#id").is(".orange, .blue, lightblue");  id의 class 속성중 orange, blue, lightblue 가 하나라도 있으면 true

해당 엘리먼트의 CSS 속성 부여하기
일반 : document.getElementById("id").style.border = "4px solid yellow");
JQuery : $("#id").css("border", "4px solid yellow");
    - 첫번째인자는 속성이름, 두번째인자는 속성값을 넣으면 된다.

해당 엘리먼트의 display 속성 부여하기
일반 : document.getElementById("id").style.display = "none";
JQuery : $("#id").hide(); , $("#id").show();
    - hide 숨김, show 보임, hide, show 안에 인자를 slow, normal, fast 중 하나로 보임숨김의 속도를 조절 할 수 있다.
    - 아니면 수치로 1000분의 1초로 할 수 있음. show(950)

체크박스의 전체선택 / 해제
일반
functionselectAll() {
    var blnChecked = document.getElementById("allCheck").checked;      // 전체선택 체크박스의 상태
    checkBoxes = document.getElementsByName('delCheck');                // 태그이름중 delCheck인 엘리먼트를 배열로 얻음

    for(var i=0; i<checkBoxes.length; i++) {
     objCheck = checkBoxes[i];
        if (objCheck) {
            objCheck.checked = blnChecked;
  }
    }
}

JQuery
$(document).ready(function() {                     
  $('#allCheck').click(function() {                    // 전체선택 체크박스 선택 이벤트
    if($('#allCheck').is(':checked')){                // 전체선택 체크박스 체크상태
      $('.delCheck').each(function(){                // 여러개의 체크박스 의 class 속성의 값이 delCheck 인걸 가져옴
        $(this).attr('checked', 'checked');           // 가져온 체크박스를 checked
        });
     }else{                                                     // 전체선택 체크박스 미체크상태
       $('.delCheck').each(function(){
       $(this).attr('checked','');                         // 가져온 체크박스를 미체크상태로
       });
     }
   });  
});

엘리먼트의 존재여부를 체크하기
JQuery : if($("#id").length > 0)     
    - 엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 JQuery는.. 객체의 길이를 체크해서 존재여부를 체크한다.






<script src="./jquery.js"></script> 이런식으로 넣어주면 이제 모든 준비가 끝났다.


그럼 간단하게 제이쿼리에 맛만 보고 글을 마치겠습니다.


자바스크립트에서 해당 ID를 찾을 쓰는 구문을 제이쿼리로 한다면
document.getElementById("test") -> $("#test")

자바스크립트로 스타일을 변경하고 싶을때
document.getElementById("test").style.display = 'none' -> $("#test").css("display","none")

자바스크립트로 select box 안에 선택된 값을 찾을때
document.getElementById("test").options[document.getElementById("test").selectedIndex].value
-> $("#test option:selected").val()

자바스크립트로 checkbox 중 선택된거 알아올때
var ck = document.getElementByName("test");
var str = "";
for(var i = 0;i<ck.length;i++){
    if(ck[i].chekced)
        str += ck[i].value + "|";
}
->
var str = "";
$("#test:checked").each(
    str += $(this).val() + "|";
);




jQuery 함수 $(...)
jQuery(expression,context)
CSS 셀렉터를 받아 매치된 엘리먼트 집합의 jQuery 객체를 리턴한다.

예제1
div 엘리먼트 안의 모든 p 엘리먼트를 추출하여 테두리를 붙인다.
$("div > p").css("border", "1px solid gray");
예제2
document 첫번째 form 안에 있는 모든 input 태그 타입이 radio 인 것을 추출한다.
$("input:radio", document.forms[0]);
예제3
AJAX 응답으로부터 받은 XML에서 모든 div를 추출한다
$("div", xml.responseXML);
jQuery(html)
예제1
div를 비롯한 콘텐츠를 동적으로 생성하고 body에 추가한다.
$("<div><p>Hello</p></div>").appendTo("body")
예제2
input 요소를 type 요소없이 만들 수 없다. 
이것은 Microsoft의 read / write - once 규칙에 따른 것으로, 자세한 내용은 MSDN을 참조한다.
// IE에서 작동하지 않음
$("<input/>").attr("type", "checkbox");
// IE에서 작동
$("<input type='checkbox'/>");
jQuery(elements)
이 함수의 인수는 XML Documents와 Window 개체와 같이 DOM 엘리먼트가 아닌것도 받아들인다.
예제1
body의 배경색을 바꾼다 (css 메서드는 DOM Element에 없는 jQuery개체이다)
$(document.body).css( "background", "black" );
예제2
myForm 내의 모든 엘리먼트를 표시하지 않는다 ( 배열에는 모든 것을 한꺼번에 표시하지 않는 hide 함수는 존재하지 않는다)
$(myForm.elements).hide()
jQuery(callback)
$(document).ready()의 약어
DOM Document로드가 끝난 때 바인딩 해 놓은 함수가 실행된다. 
이 함수는 $ (document) ready ()와 같게 동작한다.
이 함수는 기술 적으로는 다른 $ () 함수와 마찬가지로 모두 가능하다, 쓰임새는 없다.
예제1
DOM 준비가 가능하면 작업을 수행한다.
$(function(){
  // Document is ready
});
예제2
$별칭을 사용하여 jQuery 코드가 안정적으로 동작하므로 전역 변수에 의지하지 않고 인수 $를 기술하도록한다. 
jQuery(function($) {
  // Your code using failsafe $ alias here...
});
작성자: 시간: 댓글 없음:
라벨: , ,

jquery] jqgrid 속성들



출처 : http://devildung.springnote.com/pages/4796171

jQuery('#grid_selector').jqGrid( options )

options에 해당하는 속성들.

Property
Description
url
tells us where to get the data. Typically this is a server-side function with a connection to a database which returns the appropriate information to be filled into the Body layer in the grid
- 데이터를 가지고 와야할 url을 지정하는 곳. DB연결 동시에 적합한 정보를 body부분의 grid에 채워주는 server-side 기능이다.
datatype
this tells jqGrid the type of information being returned so it can construct the grid. In this case we tell the grid that we expect xml data to be returned from the server, but other formats are possible. For a list of all available datatypes refer to API Methods
- grid가 생성될때 리턴된 정보의 타입을 적는 곳. 이 경우 서버로부터 xml 데이터를 가져와 처리가능하고 다른 형식(타입)도 가능하다. 자세한 것은 API 메소드 보고 알아서 하라.
mtype
tells us how to make the ajax call: either 'GET' or 'POST'. In this case we will use the GET method to retrieve data from the server
- GET 방식으로 호출할지 POST로 호출할지를 적는 곳. 대부분 GET으로 이용한다.
colNames
an array in which we place the names of the columns. This is the text that appears in the head of the grid (Header layer). The names are separated with commas
- 컬럼의 이름을 지정하는 곳. Header Layer에 표시된다.
colModel
an array that describes the model of the columns. This is the most important part of the grid. Here I explain only the options used above. For the complete list of options see colModel API:
name
the name of the column. This name does not have to be the name from database table, but later we will see how we can use this when we have different data formats
- 컬럼의 이름. 이름은 DB Table의 이름이 될 수 없으며, 추후 서로 다른 타입의 데이터 타입의 정보를 가지고 있을때 어떻게 사용할 수 있는지 볼 수 있다.
index
the name passed to the server on which to sort the data (note that we could pass column numbers instead). Typically this is the name (or names) from database -- this is server-side sorting, so what you pass depends on what your server expects to receive
- 데이터 정렬을 위한 인덱스. (DB의 테이블의 컬럼명을 따른다.)
width
the width of the column, in pixels
align
the alignment of the column
sortable
specifies if the data in the grid can be sorted on this column; if false, clicking on the header has no effect
pager
defines that we want to use a pager bar to navigate through the records. This must be a valid html element; in our example we gave the div the id of "pager", but any name is acceptable. Note that the Navigation layer (the "pager" div) can be positioned anywhere you want, determined by your html; in our example we specified that the pager will appear after the Body layer.
- 여러 데이터를 페이지 bar 하기 위해 선언하는 것. 반드시 유효한 element 여야 한다.
Navigation layer( Div : pager ) 를 이용하여 원할때 어디서든지 사용 가능하다.
rowNum
sets how many records we want to view in the grid. This parameter is passed to the url for use by the server routine retrieving the data
- grid에 몇개의 데이터를 보여 줄 것인지 지정 하는 것.
rowList
an array to construct a select box element in the pager in which we can change the number of the visible rows. When changed during the execution, this parameter replaces the rowNum parameter that is passed to the url
- pager의 select box가 생성될때 배열로 볼수 있는 데이터의 수를 지정한다. 갯수가 바뀌어 실행이 되면 rowNum 파라미터가 자동적으로 바뀌게 되어 url로 전송이 되어 다시 데이터를 가져온다.
sortname
sets the initial sorting column. Can be a name or number. This parameter is added to the url for use by the server routine
- 초기화 될때 sort할 컬럼을 지정한다. 숫자 or 컬럼 이름일 수 있고, 서버 루틴 사용을 위한 파라미터에 추가되는 것(?)
sortorder
sets the sorting order. This parameter is added to the url
- 정렬 방법 (desc | asc)
viewrecords
defines whether we want to display the number of total records from the query in the pager bar
- 총 레코드 수를 pager bar에 표시할 것 인지 지정하는 것.
imgpath
the path to the images needed for the grid. The path should not end with '/'
- 생략
caption
sets the caption for the grid. If this parameter is not set the Caption layer will be not visible
- Grid의 제목을 설정하는 것. 이 부분이 없으면 제목은 보여지지 않는다.



작성자: 시간: 댓글 없음:
라벨: , ,

jquery] jqgrid 예제




출처 : http://kdonghwa.tistory.com/185

파일 : jQueryGrid.zip

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

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







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>

    <div id="rsperror" title="서버에러나오는곳"></div>


    <input type="button" value="선택된Row 데이터가져오기" id="a1" />
    <input type="button" value="Row삭제" id="a2" />
    <input type="button" value="마지막Row추가" id="a3" />
    <input type="button" value="id가 13인 Row선택하기" id="a4" /><br />
    <input type="button" value="tax컬럼 숨기기" id="a5" />
    <input type="button" value="tax컬럼 나타내기" id="a6" />
    <input type="button" value="id가 13 에디팅하기" id="a7" />
    <input type="button" value="저장" id="a8" />
    <input type="button" value="취소" id="a9" /><br />
    <input type="button" value="header값 스타일변경" id="a10" />
    <input type="button" value="셀값 스타일변경" id="a11" />
    <input type="button" value="데이타초기화" id="a12" />
    <input type="button" value="그리드 width/height조절" id="a13" /><br />
  
    <input type="button" value="HTML 테이블을 그리드화하기" id="a14" />
</body>
</html>


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"
            ]
        }
    ]
}


선택된 Row
jQuery("#grid_id").getGridParam("selrow");

선택된 Row 해제
jQuery("#grid_id").resetSelection();

새 Row 선택
jQuery("#grid_id").setSelection("2");

Row 삭제
jQuery("#grid_id").delRowData("2");

Row 수정
jQuery("#grid_id").setRowData("rowid", {myname:"myvalue"});

Row 추가
addRowData( rowid, data, position, srcrowid )

myfirstrow = { invid:"1", invdate:"2007-10-01", note:"note", amount:"200.00", tax:"10.00", total:"210.00"} jQuery("#list").addRowData("1", myfirstrow);

position: 'first', 'last', 'before', 'after'
srcrowid : position이 'before', 'after'일때만 설정함

출처 : http://techbug.tistory.com/158
작성자: 시간: 댓글 없음:
라벨: , ,

jquery] jqgrid plugin 사용



원본출처 :  http://dev.henjjang.com/414

jqGrid를 기억하고자 이번 포스팅을 작성한다. jqGrid 사이트 와 데모사이트를 통해서 관련된 여러정보를 얻을 수 있지만 사용했던것을 정리하지 않으면 기억했던것을 또 찾아야 하는 일이 되풀이 되곤한다.

버전

- 최근(2010.07.12)에 릴리즈 된 버전이 3.7.2 버전이다. 3.7.2 버전에서 변화된 내용은 다음에서 확인할 수 있다. 3.7 버전은 다음의 내용을 담고 있다.

 
+ Load array data at once
+ Load at once from server
+ Single search
+ Multiple search
+ Virtual scrolling
+ Toolbar search
+ Add/edit/delete on local data
 

- 2010.8월 Grouping 이 가능한 jqGrid 3.8 Beta 버전을 공개했다.



jqGrid 시작하려면

 
- jqGrid 를 시작하려면 jQuery를 알아야 한다. javascript 프레임워크, 또는 라이브러리라고 부를 수 있는 jQuery 에 대해서는 추후 정리해야겠다. 

 
<!-- BEGIN: load jQuery UI theme -->
<link type="text/css" href="./css/themes/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" /><!-- END: load jQuery UI theme -->
<!-- BEGIN: load jQuery -->
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
<!-- END: load jquery -->

<!-- BEGIN: load jQuery UI-->
<script type="text/javascript" src="./js/jquery-ui-1.8.2.custom.min.js"></script>
<!-- END: load jQuery UI-->
 
[code 1 : jquery theme, jquery ui, jquery 선언부]

- [code 1] 은 ui-lightness 테마를 적용하고, jquery ui, jquery 관련되어 선언하는 부분이다. 





jqGrid 시작하기

 
- jqGrid 시작하기


jqGrid 다루기

 
- jqGrid 다루기

* id가 13 인 값을 선택한다.
jQuery("#list9").jqGrid('setSelection',"13");<font class="Apple-style-span" color="#333333" face="굴림"><span class="Apple-style-span" style="line-height: 18px; white-space: normal;"><font class="Apple-style-span" color="#222222" face="monospace"><span class="Apple-style-span" style="line-height: 15px; white-space: pre;"><br /> </span></font></span></font>

참고사이트

 
- jQuery Grid Plugin site
- jQuery Demos

작성자: 시간: 댓글 없음:
라벨: , ,
피드 구독하기: 글 (Atom)