沉睡森林@漂在北京

          本處文章除注明“轉載”外均為原創,轉載請注明出處。

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            152 隨筆 :: 4 文章 :: 114 評論 :: 0 Trackbacks

          主要的代碼如下:
          <%@ page contentType="text/html;charset=UTF-8" %>
          <%@ include file="/commons/taglibs.jsp" %>
          <html>
          <head>
          <%@ include file="/commons/meta.jsp" %>
          <title>User Manage</title>

          <link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/scripts/styles/jqGrid/themes/basic/grid.css"/>" />
          <link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/scripts/styles/jqGrid/themes/jqModal.css"/>" />

          <script src="<c:url value="/scripts/plugIn/jqGrid/jquery.jqGrid.js"/>" type="text/javascript"></script>
          <script src=
          "<c:url value="/scripts/plugIn/jqGrid/jqModal.js"/>" type="text/javascript"></script>
          <script src=
          "<c:url value="/scripts/plugIn/jqGrid/jqDnR.js"/>" type="text/javascript"></script>
          <script src=
          "<c:url value="/scripts/plugIn/corner/jquery.corner.js"/>" type="text/javascript"></script>
                    

          </head>
          <script type=
          "text/javascript">


          jQuery(document).ready(function(){ 
              //var _documentWidth = $(document.body).innerWidth();
              //alert('_documentWidth2=>'+_documentWidth);
              
            jQuery(
          "#list").jqGrid({
              url:'${ctx}/module/yhqxgl/userinfo/data-xmlmap.xml',
              datatype: 'xml',
              mtype: 'GET',
              xmlReader: { 
                    root:
          "result"
                    row:
          "invoice"
                    page:
          "invoices>currentpage"
                    total:
          "invoices>totalpages"
                    records:
          "invoices>totalrecords"
                    repeatitems:false, 
                    id:
          "asin"
              },
              colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
                colModel :[ 
                           {name:'invid', index:'invid', width:55, xmlmap:
          "invoiceno"}, 
                           {name:'invdate', index:'invdate', width:90, xmlmap:
          "invoicedate"}, 
                           {name:'amount', index:'amount', width:80, align:'right', xmlmap:
          "invoiceamount"}, 
                           {name:'tax', index:'tax', width:80, align:'right', xmlmap:
          "invoicetax"}, 
                           {name:'total', index:'total', width:80, align:'right', xmlmap:
          "invoicetotal"}, 
                           {name:'note', index:'note', width:150, sortable:false, xmlmap:
          "notes"
               ],  
              pager: jQuery('#pager'),
              rowNum:10,
              rowList:[10,20,30],
              sortname: 'invid',
              sortorder: 
          "desc",
              viewrecords: true,
                multiselect: true,
            //multikey: 'ctrlKey', //不設置這個值時可以連續的選中記錄
                 multiboxonly :true,
              width:800,
              height: 'auto', 
              hidegrid: false, 
              imgpath: '${ctx}/scripts/styles/jqGrid/themes/basic/images',
              caption: 'My first grid',
              loadError : function(xhr,st,err) { 
                  $(
          "#tblMasterMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
              },
              ondblClickRow : function(rowid) { 
                  //$(
          "#tblDetails").editGridRow(rowid,editdtprm);
                  alert('ondblClickRow rowid=>'+rowid);
              },
              onRightClickRow :  function(rowid){
                  alert('onRightClickRow rowid=>'+rowid);
              },
              onSelectRow :  function(rowid){
                  alert('onSelectRow rowid=>'+rowid);
              },
              onSortCol : function(index, colindex, sortorder){
                  alert('onSortCol index=>'+index +
          " colindex=>"+colindex +"  sortorder=>"+sortorder);
              }
            }); 


            //block-query
            $(
          "#queryForm").corner("bevel 8px")
            
          });

           

          </script>
          <body>
              <div id=
          "queryForm"  style="height:200px;width:100px;background-color:red"></div>

              <table id=
          "list" class="scroll" width="100%"></table> 
              <div id=
          "pager" class="scroll" style="text-align:center;"></div> 
              <div id=
          "tblMasterMessage"></div>

          </body>
          </html>


          其中,
          <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          <meta http-equiv="Cache-Control" content="no-store"/>
          <meta http-equiv="Pragma" content="no-cache"/>
          <meta http-equiv="Expires" content="0"/>

          <script>
          var _contextPath = '${ctx}';
          </script>

          <script src="<c:url value="/scripts/jquery/jquery.js"/>" type="text/javascript"></script>
          <link href=
          "<c:url value="/scripts/styles/default.css"/>" type="text/css" rel="stylesheet">

          其中,

          function jqGridInclude()
          {
             
          // var pathtojsfiles = "/greatwall/scripts/plugIn/jqGrid/"; // need to be ajusted 
              var pathtojsfiles = _contextPath + "/scripts/plugIn/jqGrid/";
              
              
          // set include to false if you do not want some modules to be included
              var combineIntoOne = false;
              
          var combinedInclude = new Array();
              
          var combinedIncludeURL = "combine.php?type=javascript&files=";
              
          var minver = true;
              
          var modules = [
                  { include: 
          true, incfile:'grid.locale-en.js',minfile: 'min/grid.locale-en-min.js'}, // jqGrid translation
                  { include: true, incfile:'grid.base.js',minfile: 'min/grid.base-min.js'}, // jqGrid base
                  { include: true, incfile:'grid.common.js',minfile: 'min/grid.common-min.js' }, // jqGrid common for editing
                  { include: true, incfile:'grid.formedit.js',minfile: 'min/grid.formedit-min.js' }, // jqGrid Form editing
                  { include: true, incfile:'grid.inlinedit.js',minfile: 'min/grid.inlinedit-min.js' }, // jqGrid inline editing
                  { include: true, incfile:'grid.celledit.js',minfile: 'min/grid.celledit-min.js' }, // jqGrid cell editing
                  { include: true, incfile:'grid.subgrid.js',minfile: 'min/grid.subgrid-min.js'}, //jqGrid subgrid
                  { include: true, incfile:'grid.treegrid.js',minfile: 'min/grid.treegrid-min.js'}, //jqGrid treegrid
                  { include: true, incfile:'grid.custom.js',minfile: 'min/grid.custom-min.js'}, //jqGrid custom 
                  { include: true, incfile:'grid.postext.js',minfile: 'min/grid.postext-min.js'}, //jqGrid postext
                  { include: true, incfile:'grid.tbltogrid.js',minfile: 'min/grid.tbltogrid-min.js'}, //jqGrid table to grid 
                  { include: true, incfile:'grid.setcolumns.js',minfile: 'min/grid.setcolumns-min.js'} //jqGrid setcolumns
              ];
              
          var filename;
              
          for(var i=0;i<modules.length; i++)
              {
                  
          if(modules[i].include === true) {
                      
                      
          if (minver == true
                          filename 
          = pathtojsfiles+modules[i].incfile;
                      
          else 
                          filename 
          = pathtojsfiles+modules[i].minfile;
                      
                      
          if (combineIntoOne !== true) {
                          IncludeJavaScript(filename);
                      } 
          else {
                          combinedInclude[combinedInclude.length] 
          = filename;
                      }
                  }
              }
              
          if ((combineIntoOne === true&& (combinedInclude.length>0) ) {
                  
          var fileList = implode(",",combinedInclude);
                  IncludeJavaScript(combinedIncludeURL
          +fileList);
              }
              
          function implode( glue, pieces ) {
              
          // http://kevin.vanzonneveld.net
              //original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
              //example 1: implode(' ', ['Kevin', 'van', 'Zonneveld']);
              //returns 1: 'Kevin van Zonneveld'
                  return ( ( pieces instanceof Array ) ? pieces.join ( glue ) : pieces );
              };
              
              
          function IncludeJavaScript(jsFile)
              {
                  
          var oHead = document.getElementsByTagName('head')[0];
                  
          var oScript = document.createElement('script');
                  oScript.type 
          = 'text/javascript';
                  oScript.src 
          = jsFile;
                  oHead.appendChild(oScript);        
              };
          };

          jqGridInclude();

          posted on 2009-03-20 15:56 王總兵 閱讀(5085) 評論(3)  編輯  收藏 所屬分類: ExtjQuery

          評論

          # re: jqGrid試用日記 2009-03-20 15:56 王兵
          <?xml version ="1.0" encoding="utf-8"?>
          <invoices>
          <currentpage>1</currentpage>
          <totalpages>10</totalpages>
          <totalrecords>20</totalrecords>
          <result>
          <invoice>
          <asin>1</asin>
          <invoiceno>data1</invoiceno>
          <invoicedate>data2</invoicedate>
          <invoiceamount>data3</invoiceamount>
          <invoicetax>data4</invoicetax>
          <invoicetotal>data5</invoicetotal>
          <notes>data6</notes>
          </invoice>
          <invoice>
          <asin>2</asin>
          <invoiceno>data2</invoiceno>
          <invoicedate>data2</invoicedate>
          <invoiceamount>data2</invoiceamount>
          <invoicetax>data2</invoicetax>
          <invoicetotal>data2</invoicetotal>
          <notes>data2</notes>
          </invoice>
          <invoice>
          <asin>4</asin>
          <invoiceno>data2</invoiceno>
          <invoicedate>data2</invoicedate>
          <invoiceamount>data2</invoiceamount>
          <invoicetax>data2</invoicetax>
          <invoicetotal>data2</invoicetotal>
          <notes>data2</notes>
          </invoice>
          </result>
          </invoices>  回復  更多評論
            

          # re: jqGrid試用日記 2009-07-10 01:37 thedilab
          我將jqGrid 整合與cakephp一起使用,這樣由cakephp充當后臺角色。
          如果你感興趣,可以在這里找到demo
          http://www.the-di-lab.com/?page_id=47  回復  更多評論
            

          # re: jqGrid試用日記 2009-07-10 11:02 王兵
          @thedilab
          我最近在做一個將ext進行標簽化的工作 上面的jquery例子只是想試試jquery的grid功能如何

          沒有仔細研究 暫時也不會研究這個東西了  回復  更多評論
            

          主站蜘蛛池模板: 金昌市| 上虞市| 萍乡市| 麻阳| 沾益县| 肥东县| 琼中| 平遥县| 吉水县| 独山县| 杨浦区| 广东省| 两当县| 阿城市| 虞城县| 鹤峰县| 九寨沟县| 融水| 鹤庆县| 石阡县| 大关县| 玉山县| 乌海市| 吴堡县| 县级市| 梅州市| 肇源县| 论坛| 江北区| 黑河市| 威信县| 怀宁县| 合作市| 达拉特旗| 黄龙县| 金华市| 五莲县| 神农架林区| 获嘉县| 随州市| 茂名市|