jqGrid로 리스트을 뿌려주는 작업을 하는데, jQuery().ready 이벤트에서 뿐만 아니라 사용자 이벤트를 받아서 동적으로 처리하는 방법입니다.

며칠간  삽질 했네요...구글링 해도 별로 내용도 없고...헐~~~..

일단 제가 한 방법은 특정 사용자가 이벤트를 발생시켰을 때 마다 해당 jqGrid에 데이터를 갱신하는 것입니다.

본론으로 들어가면,

1.  ready 이벤트에서 jqGrid을 생성합니다.
    단, read 이벤트에서는 할게 없으므로 postData는 값을 설정할  필요가 없습니다.


<script type="text/javascript">
    jQuery().ready(function () {
        jQuery("#list1").jqGrid({
            url: "/_layouts/LibDocumentHandler.aspx",
            datatype: "xml",
            postData: {  //postData 데이터가 read에 필요없어서 공백으로 처리.
                WebId: '',
                ListId: '',
                FolderId: '',
                RowCount: 0,
                CurrentPage:0
            },                        
            colNames: ['FileName', 'Author', 'UpdateDate'],
            colModel: [
                 { name: 'fileName', index: 'fileName', width: 150 },
                 { name: 'author', index: 'author', width: 125 },
                 { name: 'date', index: 'date', width: 125 }
                ],
            rowNum: 10,           
            autowidth: true,
            rowList: [10, 20, 30],
            //pager: jQuery('#pager1'),
            sortname: 'fileName',
            viewrecords: false,
            sortorder: "desc",
            height: "328",
            caption: "XML Example"
        }); 
    });


2.  이벤트 발생시에 수행생할 함수를 정의합니다.

    var ShowListFiles2 = {
        name: function (WebId, ListId, FolderId) {

                      $("#list1").clearGridData();  // 이전 데이터 삭제
                      $("#list1").setGridParam({ postData: { WebId: WebId, ListId: ListId, FolderId: FolderId, RowCount: RowCount, CurrentPage: CurrentPage} }).trigger("reloadGrid");  // Postdata을 넘겨주고 url로 지정된 ajax 호출하고 Grid을 Reload 시킴.
               
        }
    } 
   
</script>

3. 필요할 때마다 정의한 함수 호출

  
  .bind("select_node.jstree", function (event, data) {
            ShowListFiles2.name(libSPWebId, libSPListId, data.rslt.obj[0].id);               
       })

※※ 주의할 점 ( 제가 며칠간 삽질한 것입니다. 나만 그런지 몰라도.....)
ajax 응답 페이지가 만일 XML을 리턴한다면 ContentType을 반드시 아래와 같이 추가합니다.  그냥 XML 덩어리이까, 걍 XML 문자열만 출력해도 되겠지 했는데...... 안되더군요..... 원래 기본이지만(역쉬 기본을 지켜야되..~~~~) 

Response.ContentType = "text/xml;charset=utf-8";
Response.Write(xmlDoc.OuterXml);

 


대부분 document.write 함수를 이용해서 object tag을 뿌리는데요.
다른 방법을 소개할까 합니다. 사용자 이벤트로 그 때 동적으로 ActiveX을 그려주는 방식으로요.

[샘플]
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <title>New Document </title>

    <meta name="Generator" content="EditPlus">

    <meta name="Author" content="">

    <meta name="Keywords" content="">

    <meta name="Description" content="">

</head>

 

<script language="javascript">
// DOM Method로 Object Tag을 추가하고 그 자식으로 Param을 추가함.

function ControlTest()

{

        var tmpBodyAreaContents;

        var divBodyArea = document.getElementById('BodyArea');      

        tmpBodyAreaContents = divBodyArea.innerHTML;

        divBodyArea.innerHTML = '';

        //divBodyArea.innerHTML = tmpBodyAreaContents;      


        // Object 개체 생성

          var myObjectElement = document.createElement('<object id="fuAttachFile" classid="clsid:49B8379B-A71A-4BB2-9A43-F5327E378D5A" width="100%" height="100%"></object>');

      var myParam1 = document.createElement('<PARAM NAME=Language value="KOR">');

      var myParam2 = document.createElement('<PARAM NAME=ViewStyle value="0">');

      var myParam3 = document.createElement('<PARAM NAME=URI value="/CmnApv/File/Upload.aspx">');

      var myParam4 = document.createElement('<PARAM NAME=Host value="localhost">');

      var myParam5 = document.createElement('<PARAM NAME=DocID value="121212">');

      var myParam6 = document.createElement('<PARAM NAME=ReadMode value="0">');


// param 개체를 Object에 추가함.

      myObjectElement.appendChild(myParam1);

      myObjectElement.appendChild(myParam2);

      myObjectElement.appendChild(myParam3);

      myObjectElement.appendChild(myParam4);

      myObjectElement.appendChild(myParam5);

      myObjectElement.appendChild(myParam6);

     

      divBodyArea.appendChild(myObjectElement);

}

 

function WriteObject() {

    document.write("<OBJECT ID='fuAttachFile' classid='clsid:49B8379B-A71A-4BB2-9A43-F5327E378D5A' width='100%' height='100%' style='border-color:silver; border:1px'>");

    document.write("<param name='ViewStyle' value='0' />");

    document.write("<param name='DocID' value='1212' />");

    document.write("<param name='ReadMode' value='0' />");

    document.write("<param name='Host' value='localhost' />");

    document.write("<param name='Port' value='80' />");           

    document.write("</object");

}

 

</script>

 

<body>

    <div id="BodyArea" style="width: 300px; height: 200px">

        <script type="text/javascript">WriteObject();</script>

    </div>

    <input type="button" value="컨트롤테스트" onclick="ControlTest();" />

</body>

</html>