正文
一、檢視/修改單行記錄
目的：單擊某行某個字段，檢視/編輯該行詳細資料。
1.1 效果截圖
<a target="_blank" href="http://blog.51cto.com/attachment/201106/151756345.png"></a>
1.2 實作代碼
前端代碼：7.1.aspx
var currentWindow,detailWindow,OpenDetailFunc,detailForm;
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '7.1.aspx?method=search',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'count',
root: 'result'
}, [
{ name: 'Name' },
{ name: 'Id' },
{ name: 'Email' },
{ name: 'Gender' }
])
});
//加載資料
store.load({
params:{ limit: 10 }
var dataColumns = new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer(), //顯示行号
{ header: "編 号", dataIndex: 'Id', sortable: true },
{ header: "名 稱", dataIndex: 'Name' },
{ header: "郵 箱", dataIndex: 'Email' },
{ header: "性 别", dataIndex: 'Gender',
renderer: function(value, cell, record) {
//alert(record.data.Age);
var GenderStr = record.data.Gender == 0 ? "女" : "男";
return '<a href="javascript:void(0);" onclick=javascript:OpenDetailFunc('+record.data.Id+',"'+record.data.Name+'","'+record.data.Email+'",'+record.data.Gender+'); style="cursor:hand">' + GenderStr + '</a>';
}
}
],
defaults: {
align: 'center'
}
//easy-ext.js
var grid = GridPanel(store,dataColumns,10,'<center style="curor:hand" onclick="window.location.reload();">表格檢視、修改單行記錄|統計</center>');
grid.width=800;
grid.render(Ext.getBody());
//-------------------------------------------檢視、修改單條記錄
var tbId = new NumberField('tbId','編 号');
var tbName = new TextField('tbName','名 稱');
var tbEmail = new TextField('tbEmail','郵 箱');
var cbGender = new ComboBox('cbGender','性 别',[[1,'男'],[0,'女']]);
detailForm = new Ext.FormPanel({
layout: 'form',
frame:true,
items:[ tbId, tbName, tbEmail, cbGender],
buttons: [
{ text: '修 改' },
{ text: '取 消' , handler : function(){ detailWindow.hide(); }}
]
//參數指派，顯示窗體
OpenDetailFunc = function(Id,Name,Email,Gender){
var form = detailForm.getForm();
tbId.value = Id;
tbName.value = Name;
tbEmail.value = Email;
cbGender.value = Gender;
detailWindow.show();
};
detailWindow = new Ext.Window({
title:"詳情",
closable:true,
iconCls:'add',
autoWidth:true,
autoHeight: true,
buttonAlign:'center',
closeAction:'hide',
plain:true,
//width:400,
//height:380,
items:[detailForm],
listeners: {
'show':function(){
this.center(); //螢幕居中
});
代碼說明：
a). GridPanel、NumberField以及ComboBox等參見源代碼easyext.js（系列第二篇文章也有專門介紹封裝）。
b). 這裡僅給出了修改的例子，沒有再多些一個顯示的，這裡考慮的是修改都出來了，顯示就不是什麼問題了。
二、統計
2.1 在3.0裡面之前官方沒有正式的統計插件，如需要可以參見本文底部相關文章來寫，想想當初要實作這個功能也是大費周章，這裡探讨另外一種靈活的形式來實作統計，對于熟悉寫背景的人來說比較簡單 :)
2.1.1 思路：
前端：隻用對增加一行顯示就行，比如本來是顯示12行，你讓他顯示13行，需要做特殊處理，比如紅字顯示統計資料可以在renderer裡面做判斷處理；
後端：自己寫代碼統計要統計的資料，然後把這個資料包裝一下放到傳回顯示資料的最後一條。
2.1.2 效果截圖
2.1.3 代碼片段
主要實作代碼（參見源代碼7.2.1.aspx.cs）：
/// <summary>
/// 将資料表轉換成JSON類型串
/// </summary>
/// <param name="dt">要轉換的資料表</param>
/// <param name="dispose">資料表轉換結束後是否dispose掉</param>
/// <returns></returns>
public static StringBuilder DataTableToJson(System.Data.DataTable dt, bool dt_dispose)
{
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.Append("[");//\r\n
//資料表字段名和類型數組
string[] dt_field = new string[dt.Columns.Count];
int i = 0;
string formatStr = "{{";
string fieldtype = "";
foreach (System.Data.DataColumn dc in dt.Columns)
{
dt_field[i] = dc.Caption.Trim();//ToLower().
formatStr += "'" + dc.Caption.Trim() + "':";//ToLower().
fieldtype = dc.DataType.ToString().Trim().ToLower();
if (fieldtype.IndexOf("int") > 0 || fieldtype.IndexOf("deci") > 0 ||
fieldtype.IndexOf("floa") > 0 || fieldtype.IndexOf("doub") > 0 ||
fieldtype.IndexOf("bool") > 0)
{
formatStr += "{" + i + "}";
}
else
formatStr += "'{" + i + "}'";
formatStr += ",";
i++;
}
if (formatStr.EndsWith(","))
formatStr = formatStr.Substring(0, formatStr.Length - 1);//去掉尾部","号
formatStr += "}},";
i = 0;
object[] objectArray = new object[dt_field.Length];
foreach (System.Data.DataRow dr in dt.Rows)
foreach (string fieldname in dt_field)
{ //對 \ , ' 符号進行轉換
objectArray[i] = dr[dt_field[i]].ToString().Trim().Replace("\\", "\\\\").Replace("'", "\\'");
switch (objectArray[i].ToString())
{
case "True":
{
objectArray[i] = "true"; break;
}
case "False":
objectArray[i] = "false"; break;
default: break;
i++;
i = 0;
stringBuilder.Append(string.Format(formatStr, objectArray));
if (stringBuilder.ToString().EndsWith(","))
stringBuilder.Remove(stringBuilder.Length - 1, 1);//去掉尾部","号
if (dt_dispose)
dt.Dispose();
return stringBuilder.Append("]");//\r\n
}
public override string Search()
int start = -1;
int.TryParse(Request.QueryString["start"], out start);
int limit = -1;
int.TryParse(Request.QueryString["limit"], out limit);
string id = Request.QueryString["id"];
IList<User> result = new List<User>();
if (string.IsNullOrEmpty(id))
result = GetPage(ConverToList(dataSource.Values), start, limit);
else
int uid;
if (int.TryParse(id, out uid))
if (dataSource.ContainsKey(uid))
result.Add(dataSource[uid]);
//統計
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("Email");
dt.Columns.Add("Name");
dt.Columns.Add("Gender");
dt.Columns.Add("Age");
int avg_Age = 0;
foreach (User item in result)
avg_Age += item.Age;
dt.Rows.Add(item.Id, item.Email, item.Name, item.Gender, item.Age);
if (result.Count > 0)
dt.Rows.Add("", "", "", "", string.Format("平均：{0}", avg_Age / result.Count));
return new StringBuilder().Append("{count:")
.Append(1000)
.Append(",result:")
.Append(DataTableToJson(dt, true))
// .Append(JavaScriptConvert.SerializeObject(result))
.Append('}')
.ToString();
相比之下我可能更加願意這種方式進行統計，在背景寫代碼也好控制，而前端幾乎可以不改動就能達到統計的效果。
a). 與1.2例子的背景相比，多增加了一個字段，Age。
b). 這裡用的DataTable，因為強類型不好指派為空，這裡也可以傳回特定的強類型，比如Id傳回-1就表示是統計列，然後在renderer裡面做判斷顯示。
2.2 3.0中的統計插件用
查了一圈，發現還是不支援簡單統計，必須分組統計，得使用Ext.data.GroupingStore才行，不過沒關系，咱們可以變通:)
2.2.1 截圖
2.2.2 實作代碼
var store = new Ext.data.GroupingStore ({
url: '7.2.2.aspx?method=search',
{ name: 'Gender' },
{ name: 'Age' },
{ name: 'groupField',convert:function(v){ return '資料';} }
]),
sortInfo:{field: 'Age', direction: "ASC"},
groupField:'groupField'
//自定義
// Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
// return v + (record.data.estimate * record.data.rate);
// };
var summary = new Ext.ux.grid.GroupSummary();
{ header: "性 别", dataIndex: 'Gender' },
{ header: "資料", dataIndex: 'groupField' },
//max,min,count,sum,average
{ header: "總年齡", dataIndex: 'Age',summaryType:'average'}
//,summaryType:'totalCost',groupable: false
var grid = new Ext.grid.GridPanel({
store: store,
cm: dataColumns,
renderTo: Ext.getBody(),
autoExpandColumn: 1,
border: true,
disableSelection: true,
frame: true,
loadMask:true,
width: 800,
view: new Ext.grid.GroupingView({
forceFit: true,
showGroupName: false,
enableNoGroups: false,
enableGroupingMenu: false,
hideGroupedColumn: true
plugins : summary,
//設定單行選中模式
selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
//columnLines: true,//顯示列線條
viewConfig: { forceFit: true }//使列自動均分
代碼說明：
a). 這種辦法就是不用服務端來進行統計，支援内置的5種統計，也支援自定義的統計，這個在代碼注釋裡面可以看得到。
b). 這裡是通過一個虛拟字段groupField來模拟分組的，這樣一來，就能滿足基本的統計了。
C). 注意sortInfo與groupField必須配置，然後必須使用Ext.data.GroupingStore。
本文轉自over140 51CTO部落格，原文連結：http://blog.51cto.com/over140/586538，如需轉載請自行聯系原作者
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)