2014年12月18日 星期四

[jqGrid] jqGrid 屬性


jqgrid 屬性http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

一、jqGrid 屬性:

1、datatype:
     local 本地
     json json數據格式
     jsonstring
     xml
     xmlstring
     javascript
     function
     clientSide

2、width,height:列表寬度/高度
     
3、colNames(字符串數組,如:['AA','BB']):

4:colModel 列模式
     {name:'', index:'', width:50, sorttype:'int',align:'right', sortable:false}
     name:列名
     sorttype:排序類型 如:int、float、date等
     align 對齊方式: left、right。
     sortable 是否可排序:true 、false

5、multiselect 是否可多選 true、false

6、caption 列表標題

7、url 數據請求連接

8、rowNum 顯示行數

9、rowList 列表顯示行數選擇列表

10、viewrecords: true,false 是否顯示記錄總數

11、onSelectRow:選中列表記錄操作
     onSelectRow:function(ids) {
     
     }

12、direction 列表文字的排序方向


二、jqgrid 方法:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

######################## 說明:########################
<table id="list"></table>
<div id="pager"></div>
########################################################


#################### 讀取列表屬性或值 ################
1、獲取選中記錄的行號:
     var row = jQuery("#list").jqGrid('getGridParam','selrow');

2、根據行號返回選中行的數據
     var rowData = jQuery("#list").jqGrid('getRowData', row);
     rowData.***     讀取選中記錄的屬性值“***”未行屬性,如rowData.id,返回行屬性id的值

3、根據行號刪除列表數據
     var su=jQuery("#list").jqGrid('delRowData', 12);     //刪除行號未12的記錄

4、新增記錄
     var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
     var su=jQuery("#list").jqGrid('addRowData', 99, datarow);     //99未知含義

5、讀取列表請求數據的url
     jQuery('#list').jqGrid('getGridParam', 'url'))

6、返回列表的默認排序列
     jQuery('#list').jqGrid('getGridParam', 'sortname')

7、返回列表默認的排序方式
     jQuery('#list')jqGrid('getGridParam', 'sortorder')

8、返回列表選中記錄
     jQuery('#list')jqGrid('getGridParam','selrow')

9、返回列表當前頁序號:
     jQuery('#list')jqGrid('getGridParam','page'))

10、返回列表選中記錄數
     jQuery('#list').jqGrid('getGridParam','rowNum')

11、返回選中記錄數據類型:
     jQuery('#list').jqGrid('getGridParam','datatype')

12、返回列表的記錄數:
     jQuery('#list').jqGrid('getGridParam','records')

#################### 設置列表屬性或值 ################
說明:讀取相應的改为set**就能夠設置列表屬性或值.

13、選中某一行記錄
     jQuery("#list2").jqGrid('setSelection',"1");     //選中該列表第一行數據



三、ColModel API
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options





建立新的javaweb工程,添加json相關的 jar包。

附上代碼,共以後查考。



Servlet生產json數據格式:
/**
*
*/
package org.rico.demo.jqgrid.demo.dataload;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
* @author rico
* jqgrid 初始列表數據-json數據格式
*/
public class DataLoadByJSon extends HttpServlet {
     private static final long serialVersionUID = 5546844758953964549L;

     /**
      * 說明:網上借來的數據
      * 鏈接:http://www.cnblogs.com/jancyxue/archive/2011/08/17/2141676.html
      *
      *
     * jqGrid默認期望返回的json對象格式要求如下:
     * {"page":"1","total":"2","records":"13",
     * "rows":[
     *                 {id:"1",cell:["1","jancyxue","男","jancyxue@163.com","410958040","江西餘幹"]},
     *                 {id:"2",cell:["2","linda","女","linda@163.com","111111111","湖南"]},
     *                 {id:"3",cell:["3","jason","男","jason@sina.com","222222222","湖北"]},
     *                 {id:"4",cell:["4","lucy","女","lucy@sina.com","33333333","北京"]}
     *        ]
     * }
     * 當然,在js中,可以通過jqGrid的jsonReader屬性來修改默認格式
     * 我們可以在jsonReader中定義repeatitems : false。這样,可以使用下面的數據格式(为了防止出錯,我們在寫colModel的時候如果實在不會就對應着下面的每個字段寫,就不容易出錯了:
     * "rows":[
     *                 {id:"1",engName:"jancyxue",gender:" 男",email:"jancyxue@163.com",QQ:"410958040",address:"江西餘幹"]},
     *                 {id:"2",engName:"linda",gender:" 女",email:"linda@163.com",QQ:"111111111","address:湖南"]},
     *                 {id:"3",engName:"jason",gender:" 男",email:"jason@sina.com",QQ:"222222222",address:"湖北"]},
     *                 {id:"4",engName:"lucy",gender:" 女",email:"lucy@sina.com",QQ:"33333333",address:"北京"]}
     *        ]
     * 就像這样colModel:[{name:'id',index:'id',width:55},{name:'engName',index:'engName',width:100},{name:'gender',index:'gender',width:180, sortable:false},{name:'email',index:'email',width:180},
             {name:'QQ',index:'QQ',width:280},{name:'address',index:'address',width:280}]
     *
     */
     
     @Override
     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          //模擬數據
          JSONObject jo = new JSONObject();
          Integer rows = Integer.valueOf(request.getParameter("rows"));
          Integer page = Integer.valueOf(request.getParameter("page"));
          System.out.println("####rows: " + rows + "####page: " + page);
         
          Integer totalSize = 100;
          jo.put("page", page);          //當前頁
         
          Integer totalPages = totalSize%rows==0?totalSize/rows:(totalSize/rows+1);
          jo.put("total", totalPages);          //總頁數
          jo.put("records", totalSize);     //總記錄數
         
          JSONArray ja = new JSONArray();
          JSONObject rowJO = null;
         
          int index = (page-1)*rows;
          int lastIndex = page*rows;
          if(lastIndex > 100) {
               lastIndex = 100;
          }
          for(int i=1+index; i<=lastIndex; i++) {
               rowJO = new JSONObject();
               rowJO.put("id", i + "");
               rowJO.put("name", "X" + i);
               rowJO.put("sex", "XX" + i);
               rowJO.put("phone", "XXX" + i);
               rowJO.put("email", "XXXX@126.com" + i);
               
               ja.add(rowJO);
          }
         
          jo.put("rows", ja);
          System.out.println(jo.toString());
         
          response.setCharacterEncoding("UTF-8");
          PrintWriter pw = response.getWriter();
          pw.write(jo.toString());
          pw.flush();
          pw.close();
     }

     @Override
     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          this.doGet(request, response);
     }
}



/**
*
*/
package org.rico.demo.jqgrid.demo.dataload;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* @author rico
* 導航到jqgrid載入數據頁面
*/
public class DataLoadIndexServlet extends HttpServlet {
     private static final long serialVersionUID = 7226355428393263783L;

     @Override
     public void doGet(HttpServletRequest req, HttpServletResponse resp)
               throws ServletException, IOException {
          System.out.println("導航到jqgrid載入數據頁面");
          req.getRequestDispatcher("/jqgrid/dataLoad/dataload_json.jsp").forward(req, resp);
     }

     @Override
     public void doPost(HttpServletRequest req, HttpServletResponse resp)
               throws ServletException, IOException {
          this.doGet(req, resp);
     }

}



<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jqgrid 載入數據</title>
<link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/commons/css/jquery-ui-1.8.20.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/commons/css/ui.jqgrid.css" />

<script type="text/javascript" src="${pageContext.request.contextPath}/commons/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/commons/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/commons/js/i18n/grid.locale-cn.js"></script>
<style type="text/css">
ul li {
     float: left; margin-left: 15px;
     font-size: 8pt;
}
</style>
</head>
<body>
     <div style="height: 50px;">
          <ul>
               <li><a href="###" onclick="getSelectedRowData();">讀取選中記錄</a></li>
               <li><a href="###" onclick="deleteRow();">刪除選中行</a></li>
               <li><a href="###" onclick="updateRow();">更新第一行數據</a></li>
               <li><a href="###" onclick="addRow();">新增數據</a></li>
               <li><a href="###" onclick="getSeletedRowIds();">獲取選中記錄的id</a></li>
               <li><a href="###" onclick="setSelectedRow();">選中第一行記錄</a></li>
          </ul>
     </div>
     <table id="list2"></table>
     <div id="pager2"></div>
</body>

<script type="text/javascript">
jQuery("#list2").jqGrid({
        url:'${pageContext.request.contextPath}/dataLoadByJSon',
     datatype: "json",
    colNames:['id','name', 'sex', 'phone','email'],
        colModel:[
             {name:'id',index:'id', width:55},
             {name:'name',index:'name', width:100},
             {name:'sex',index:'sex', width:80, align:"right"},
             {name:'phone',index:'phone', width:80, align:"right"},          
             {name:'email',index:'email', width:80,align:"right"}          
        ],
        jsonReader:{
        page:"page",
        total:"total",
        repeatitems:false
    },
    pager:jQuery('#pager1'),
        rowNum:10,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'id',
    viewrecords: true,     //是否顯示記錄總數
    sortorder: "desc",
    width:900,
    height:'400',
    //recordpos: 'left',
    multiselect: true,
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false, add:false, del:false});


/**獲取選中記錄數據*/
function getSelectedRowData() {
     var row = jQuery("#list2").jqGrid('getGridParam','selrow');
     if(row) {
          var selectedRow = jQuery("#list2").jqGrid('getRowData',row);
          alert("###id="+selectedRow.id+" ###name="+selectedRow.name+"...");
     } else {
          alert("未選取任何記錄.");
     }
}

/**刪除選中行*/
function deleteRow() {
     var row = jQuery("#list2").jqGrid('getGridParam','selrow');
     if(!row || row=='') {
          alert("未選取任何記錄.");return;
     }
     
     var delRow = jQuery("#list2").jqGrid('delRowData', row);
     if(delRow)
           alert("未實現相關的刪除操作 .");
}

/**更新第一行數據*/
function updateRow() {
     var rowData = jQuery("#list2").jqGrid('setRowData', 1, {id:"X!", name:"ricoXX", sex:"manXX"});
     if(rowData)
          alert("更新第一行數據成功.");
}

/**新增數據*/
function addRow() {
     var datarow = {id:"101",name:"rio",sex:"man",phone:"199876****",email:"XXX.126.com"};
     var su=jQuery("#list2").jqGrid('addRowData', 101, datarow);
     if(su)
          alert("新增數據成功。");
     else
          alert("新增數據發生錯誤。");
}

/**獲取選中記錄的id*/
function getSeletedRowIds() {
     var ids = jQuery("#list2").jqGrid('getGridParam', 'selarrrow');
     alert(ids);
}

/**選中第一行記錄*/
function setSelectedRow() {
     jQuery("#list2").jqGrid('setSelection',"1");
}

</script>
</html>


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
     <display-name>jqgridDemo</display-name>
     <welcome-file-list>
          <welcome-file>index.html</welcome-file>
          <welcome-file>index.htm</welcome-file>
          <welcome-file>index.jsp</welcome-file>
          <welcome-file>default.html</welcome-file>
          <welcome-file>default.htm</welcome-file>
          <welcome-file>default.jsp</welcome-file>
     </welcome-file-list>
     
     
     <!-- 導航到jqgrid載入數據頁面-->
     <servlet>
          <servlet-name>DataLoadIndexServlet</servlet-name>
          <servlet-class>org.rico.demo.jqgrid.demo.dataload.DataLoadIndexServlet</servlet-class>
     </servlet>
     
     <servlet-mapping>
          <servlet-name>DataLoadIndexServlet</servlet-name>
          <url-pattern>/dataLoadIndexServlet</url-pattern>
     </servlet-mapping>
     
     <!-- jqgrid載入數據-json格式 -->
     <servlet>
          <servlet-name>DataLoadByJSon</servlet-name>
          <servlet-class>org.rico.demo.jqgrid.demo.dataload.DataLoadByJSon</servlet-class>
     </servlet>
     
     <servlet-mapping>
          <servlet-name>DataLoadByJSon</servlet-name>
          <url-pattern>/dataLoadByJSon</url-pattern>
     </servlet-mapping>
     
</web-app>


0 意見:

張貼留言

 

MangoHost Copyright © 2009 Cookiez is Designed by Ipietoon for Free Blogger Template