jqGrid试用日记

主要的代码如下：

<% @ 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 " >

其中，

jqGrid试用日记

你可能感兴趣的:(jqGrid试用日记)