JQGrid 簡單範例 搭配asp.net WCF

Jqgrid

簡介：

是一個Ajax-enabled（具有非同步傳呼的能力）的client-side Grid控制項，程式語言採用JavaScript並引用Jquery函式庫，能與不同的server-side技術整合（例如：PHP、ASP）。

需求：

要讓Jqgrid正常可運作，至少需要

1. jqGrid plugin,

2. jQuery library, version 1.1.4 or later, and

3. 接收資料要求及傳回資料的server端處理程式

實例：

1. 下載Jqgrid並在Vs2008裡引用

A. 下載http://trirand.com/jqgrid/jqGrid.zip

B. 解壓縮並加入網站專案內

C. 在程式內引用

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.jqGrid.js" type="text/javascript"></script>

2. 產生放置jqgrid控制項的容器的HTML碼

//記錄的顯示容器table

<table id="list" class="scroll" cellpadding="0" cellspacing="0">

</table>

//頁數及其他按鈕的位置

<div id="pager" class="scroll" style="text-align: center;">

</div>

3. 產生jqgrid instance及相關參數

//在頁面load以後

jQuery(document).ready(function() {

//jqGrid在上方的id=list的table裡顯示資料

jQuery("#list").jqGrid({

//要求接收的目的

url: 'ccnhttpservice.svc/Dowork',

//資料的格式

datatype: "json",

//要求傳送的TYpe

mtype: 'get',

//要顯示的欄位抬頭

colNames: ['Status', 'CCNNO', 'IssuedName', 'ReturnDate'],

//要顯示的資料及其形式及格式化，很方便

//官網有更詳細的格式化語法  colModel Properties

colModel: [

{ name: 'Status', index: 'Status', width: 80, align: 'right', size: 10, edittype: 'select', formatter: 'select', editoptions: { value: "10:草稿;20:進行中;80:結案;90:作廢"} },

{ name: 'CCNNO', index: 'CCNNO', width: 80, size: 10 },

{ name: 'IssuedName', index: 'IssuedName', width: 120, size: 10 },

{ name: 'ReturnDate', index: 'ReturnDate', width: 150, align: 'right', size: 10, datefmt: 'yyyy-mm-dd' } ],

//指定Jqgrid要顯示每頁資訊的容器

pager: jQuery('#pager'),

//預設每頁要顯示多少筆

rowNum: '15',

//自定每頁要顯示多少筆，在這我設定有15,30,45

rowList: [15, 30, 45],

//預設排序的欄位，Client端送出給SERVER端的要求會包含這兩個的設定

sortname: "CCNNO",

sortorder: "desc",

//table 標題、高度、寬度

caption: 'Form LIST',

height: 450, width: 950,

//設定事件處理函數，這裡自訂當我doube click 每一筆row時處理的函數。

//Jqgrid所提供的其他事件詳細說明：Events

ondblClickRow: function(id) {

var MyString = new String(id);

……………

if ()

{ location.href = editN; }

else { location.href = editY; }

}).

//JqGrid導覽列的位置，預設按鈕的屬性

//官網上關於導覽列使用的詳細說明： Properties, Events and Methods

navGrid('#pager', { edit: false, add: false, del: false }).

//產生自定按鈕及設定位置，賦予這自定按鈕click事件

//官網上關於自訂按鈕使用的詳細說明：Custom Buttons

navButtonAdd('#pager', {

caption: "Add", title: "新增一筆資料",

onClickButton: function() { var btn = document.getElementById("action"); btn.click(); }, position: "first" }) });

4. 撰寫server程式碼來接收要求及產生需要的資料

Client端(jqgrid)預設送出的要求標頭:

//下面得例子是要求第一頁，每頁15，依CCNNO做DESC排序

page:1,rows:15,sidx:CCNNO,sord:desc

jqgrid接收server端送回來的資料格式(前面設json)為以下樣式(依我的例子)：

所以Server端就是要組出下面的Json資料格式送回來就對了：

{"page":"1","records":"8","rows":[{"cell":["20","XXXXX_PENG","20090706"],"id":"09070120095005697f83ebf2b84c1fb4cdc20dd3fdc807"},{"cell":["20","XXXX_PENG","20090430"],"id":"0904072009500537b6f4a85cf34a24bfbece750a8773da"}],"total":"1"}

page:第幾頁

records:有幾筆記錄

total:總共幾頁

rows:為一陣列[“cell”:”status, CCNNO, IssuedName, ReturnDate”,id:””],

cell的值代表資料庫所傳回的每筆記錄；

id是要傳回去給client端當辨識用的,例如要知道你按了哪筆記錄。

接下來就撰寫server端的程式碼('ccnhttpservice.svc/Dowork')

，組出這些格式的資料傳回給client端：

A. 算共有幾頁 count：資料庫符合條件的比數（Records）rows:預定每頁顯示的筆數(15)

{ total_pages = (int)Math.Ceiling((Decimal)(count / (decimal)rows)); } （Total）

B. page為要求的頁數，例如傳送的要求是要看第二頁

if (page > total_pages) { page = total_pages; } //要求的頁數不能超過總頁數

int start = rows * page - rows; （15*2-15）所以從第15筆開始（為了要計算totalrows用的）

if (start < 0) { start = 0; }

int totalrows = rows + start; 到第30筆（sql語法要用）

所以這串要求是要求傳回第二頁，第二頁記錄是第16-30

C. 我要怎麼傳回第16-30，下面示範取3-6筆的概念，當然有其他的想法

Id name

1 a

2 b

3 c

4 d

5 e

6 f

(Select top 6 * form example order by id desc) as a

6f 5e 4d 3c 2b 1a

(Select top 4 * from a) as b

6f 5e 4d 3c

Select * from b order by id

3c 4d 5e 6f

D. 產生要傳回資料的json格式

[DataContract]

public class CCNRecords

{ [DataMember] public List<ccnrow> rows;

[DataMember] public string page;

[DataMember] public string total;

[DataMember] public string records;}

[DataContract]

public class ccnrow

{ [DataMember] public string id;

[DataMember] public string[] cell;}

E. 填入資料傳回給jqgrid

CCNRecords ccn = new CCNRecords();

ccn.rows = new List<ccnrow>();

ccn.page = page.ToString();

ccn.records = count.ToString();

ccn.total = total_pages.ToString();

return getData(cmdSelect, ccn);

//getData函數

while (reader.Read())

{ ccnrow _row = new ccnrow();

_row.cell = new string[11];

_row.id = reader["CCNNO"].ToString().Trim() + reader["Status"].ToString().Trim() + reader["IssuedBy"].ToString().Trim() + reader["recordid"].ToString().Trim();

for (int i = 0; i < 11; i++){_row.cell[i] = reader[i].ToString().Trim();}

ccn.rows.Add(_row);}

最後結果：

 

我是用WCF。