jqGrid 사용 노트:1.시작

4935 단어 JavaScriptAjaxUI
근원
공식 다운로드 주소
http://www.trirand.com/blog/?page_id=6
문서 주소
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
DEMO 주소
http://trirand.com/blog/jqgrid/jqgrid.html
내 파일 디 렉 터 리:
  • root:jqGrid(설명:아래 디 렉 터 리 는 다운로드 한 ZIP 파일 의 압축 을 풀 어 형 성 된 디 렉 터 리)
  •       jqGrid / css
  •       jqGrid / js
  •       jqGrid / plugins
  •       jqGrid / src
  •       jqGrid/demo(디 렉 터 리 를 새로 만 들 었 습 니 다.제 예 는 이 디 렉 터 리 에 있 습 니 다)
  • 첫 번 째 단계:필요 한 인용 파일 추가
    파일 이름 index.html
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My First Grid</title>
     
    <link rel="stylesheet" type="text/css" media="screen" href="../css/ui-lightness/jquery-ui-1.10.2.custom.css"  />
    <link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />
    
    <style>
    html, body {
        margin: 0;
        padding: 0;
        font-size: 75%;
    }
    </style>
     
    <script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="../js/i18n/grid.locale-en.js" type="text/javascript"></script>
    //          ,         ,  : jquery.jqGrid.src.js
    <script src="../js/jquery.jqGrid.min.js" type="text/javascript"></script>
     
    </head>
    <body>
    ...
    </body>
    </html>
    

    비고:
    jquery-ui-1.7.1.custom.css 는 다운로드 가 필요 합 니 다.다음 주소 에서 필요 한 테 마 를 선택 하 십시오.
    http://jqueryui.com/themeroller/#themeGallery
    STEP 2:기본 작업 원리 이해
    기본 작업 원리:클 라 이언 트 전시,서버 조작.Ajax 기술 을 사용 하여 클 라 이언 트 와 서버 에서 데 이 터 를 전달 하고 클 라 이언 트 에서 열 모델(colModel)을 형성 하 며 서버 조작(SSM,server-side manipulation)을 통 해 데이터 베 이 스 를 실제 조작 합 니 다제목 표시 줄(Caption layer),헤더(Header layer),표 신(Body layer),네 비게 이 션 표시 줄(Navigation layer)STEP 3:첫 번 째 시험
    첨부 파일 을 참조 하 십시오.저 는 LOCAL 의 데이터 형식(dataType)을 사용 합 니 다.
    STEP 4:dataType 이 xml 이면
    1.형식:
    
    <?xml version ="1.0" encoding="utf-8"?>
    <rows>
      <page> </page>
      <total> </total>
      <records> </records>
        <row id = 'unique_rowid'>
          <cell> cellcontent </cell>
          <cell> <![CDATA[<font color='red'>cell</font> content]]> </cell>
            …
        </row>
        <row id = 'unique_rowid'>
          <cell> cellcontent </cell>
          <cell> <![CDATA[<font color='red'>cell</font> content]]> </cell>
            …
        </row>
          …
    </rows>
    

    2.예:
    
    // we should set the appropriate header information. Do not forget this.
    header("Content-type: text/xml;charset=utf-8");
     
    $s = "<?xml version='1.0' encoding='utf-8'?>";
    $s .=  "<rows>";
    $s .= "<page>".$page."</page>";
    $s .= "<total>".$total_pages."</total>";
    $s .= "<records>".$count."</records>";
     
    // be sure to put text data in CDATA
    while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
        $s .= "<row id='". $row['invid']."'>";            
        $s .= "<cell>". $row['invid']."</cell>";
        $s .= "<cell>". $row['invdate']."</cell>";
        $s .= "<cell>". $row['amount']."</cell>";
        $s .= "<cell>". $row['tax']."</cell>";
        $s .= "<cell>". $row['total']."</cell>";
        $s .= "<cell><![CDATA[". $row['note']."]]></cell>";
        $s .= "</row>";
    }
    $s .= "</rows>"; 
    

    좋은 웹페이지 즐겨찾기