沉睡森林@漂在北京

本处文章除注明“转载”外均为原创,转载请注明出处。

  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 王总兵 阅读(4946) 评论(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功能如何

没有仔细研究 暂时也不会研究这个东西了  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: