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>
訂閱：
張貼留言 (Atom)
0 意見:
張貼留言