Ext.Grid之记录用户使用习惯—隐藏列
Ext.Grid的强大功能想必用过Ext的都体会到，可以隐藏列，可以拖放，可以排序等等，但是如果用户隐藏了某一些列后，下次登录时还是要看到上次隐藏后的列该怎么办呢？这就涉及到一个用户使用习惯的问题。想到记录用户习惯，当然首选使用Cookie。但是问题来了，在什么时候记录Cookie？什么事件触发后我们去写Cookie？其实最完美的当然就是在隐藏列这一事件（暂且叫它事件吧，具体的我也不太清楚Ext隐藏列的原理）触发时把剩下的列写入Cookie，但是小生才疏学浅，没有找到这个“隐藏列”事件，没法重写，只好另辟蹊径。反反复复试了Grid自带的方法比如：Close,BeforeClose,打算在用户关闭Grid的时候记录，但是没有效果，最后才找到beforedestroy这一事件，匪夷所思，关闭grid的时候不是触发beforeclose或者close,偏偏来个beforedestroy(英文就是摧毁，销毁)，难道是Ext的人的命名习惯？不解。说到这里思路就清楚了，实现原理及步骤如下：
1、在用户关闭Grid时，触发BeforeDestroy事件，判断那些列是隐藏的，写入Cookie：
2、用户再次打开这个页面时先用Ajax读Cookie中的隐藏列，然后调用HiddenColumn函数，执行隐藏列。
欢迎各位批评指正。如果有更好的实现方法，请您不吝赐教。
附上完整的JS文件吧，后台aspx,cs文件就不贴了，有需要联系我
TotalJS.js
1、在用户关闭Grid时，触发BeforeDestroy事件，判断那些列是隐藏的，写入Cookie：
grid.on("beforedestroy", CloseWriteCookie, grid);
// 按用户习惯，隐藏某列
if (boolHasClosedGrid == false)// 首次浏览
{
HiddenMyColumn(grid, varHiddenColumn);
// alert(varHiddenColumn);
}
// 关闭grid但未关闭浏览器
else {
HiddenMyColumn(grid, varHiddenColumnColseGrid);
}
1//写入CooKie事件
2
3function CloseWriteCookie(obj) {
4 var cms = obj.getColumnModel(); // 获得网格的列模型
5 var strHiddenColoumnIndex = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)
6 // alert(cms.getColumnCount());
7 for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列
8
9 if (cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列
10 strHiddenColoumnIndex += Ext.util.Format.trim(i) + ",";// 获得列序号数字从0开始
11 }
12 }
13 // 把隐藏列存到Cookie中的同时返回隐藏列的值。
14 Ext.Ajax.request({
15 timeout : 3000000,
16 url : '/ajax/SetUserColumnCookie.aspx',
17 params : "ParaCkUserColumn=Write&UserHiddenColumn="
18 + strHiddenColoumnIndex,
19 success : function(response, options) {
20 Ext.MessageBox.hide();
21 varHiddenColumnColseGrid = response.responseText// 把最新的隐藏列赋值给全局变量varHiddenColumnColseGrid
22 // alert(varHiddenColumnColseGrid);
23 boolHasClosedGrid = true;// 设置关闭grid但未关闭浏览器为真
24 },
25 failure : function(response, options) {
26 Ext.Msg.alert('错误', Ext.util.JSON
27 .decode(response.responseText).data.msg);
28
29 }
30 }
31
32 )
33}
34
35
2、用户再次打开这个页面时先用Ajax读Cookie中的隐藏列，然后调用HiddenColumn函数，执行隐藏列。
Ext.Ajax.request({
timeout : 3000000,
url : '/ajax/SetUserColumnCookie.aspx',
params : "ParaCkUserColumn=Read",
success : function(response, options) {
Ext.MessageBox.hide();
varHiddenColumn = response.responseText
// alert(varHiddenColumn);
},
failure : function(response, options) {
Ext.Msg.alert('错误',
Ext.util.JSON.decode(response.responseText).data.msg);
}
})
1 // 隐藏列函数
2 function HiddenMyColumn(vargrid, varColumnIndex) {
3
4 if (varColumnIndex != "") {
5 var cms = vargrid.getColumnModel(); // 获得网格的列模型
6 var strarrayUserColumn = new Array();
7 strarrayUserColumn = varColumnIndex.split(",");
8 for (var i = 0; i < strarrayUserColumn.length; i++) {
9 cms.setHidden(strarrayUserColumn[i], true);// 隐藏列模型
10 }
11 }
12 }
欢迎各位批评指正。如果有更好的实现方法，请您不吝赐教。
附上完整的JS文件吧，后台aspx,cs文件就不贴了，有需要联系我
TotalJS.js
var ds;
var varHiddenColumn = "";
var boolHasClosedGrid = false;
Ext.Ajax.request({
timeout : 3000000,
url : '/ajax/SetUserColumnCookie.aspx',
params : "ParaCkUserColumn=Read",
success : function(response, options) {
Ext.MessageBox.hide();
varHiddenColumn = response.responseText
// alert(varHiddenColumn);
},
failure : function(response, options) {
Ext.Msg.alert('错误',
Ext.util.JSON.decode(response.responseText).data.msg);
}
})
function QueryWebTraceByAll() {
var varDefaultState = "";
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.QuickTips.init();
// var fm = Ext.form;
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
header : '编号',
width : 40,
dataIndex : 'Id',
sortable : true
}, {
header : '域名',
width : 100,
dataIndex : 'HostName',
renderer : change,
sortable : true
}, {
header : '流量',
width : 50,
dataIndex : 'PageView',
sortable : true
}, {
header : '测试域名',
width : 100,
dataIndex : 'TestHostName',
renderer : change,
sortable : true
}, {
header : '服务器IP',
width : 140,
dataIndex : 'WebSpace',
sortable : true
}, {
header : '空间用户名',
width : 100,
dataIndex : 'WebSpaceUserName',
sortable : true
}, {
header : '空间名',
width : 100,
dataIndex : 'WebSpaceNumber',
sortable : true
}, {
header : "Ftp密码",
width : 100,
dataIndex : 'FtpPwd',
sortable : true
},
{
header : '备案号',
width : 140,
dataIndex : 'BeiAn',
sortable : true
},// renderer:renderFoo,
{
header : '域名服务商',
width : 140,
dataIndex : 'HostNameSP',
sortable : true
},// renderer:renderFoo,
{
header : '域名注册时间',
width : 140,
dataIndex : 'HostNameRegDate',
sortable : true
},// renderer:renderFoo,
{
header : '域名到期时间',
width : 140,
dataIndex : 'HostNameExpireDate',
sortable : true
},// renderer:renderFoo,
{
header : '类型',
width : 50,
dataIndex : 'WebType',
sortable : true
}, {
header : '主关键字',
width : 100,
dataIndex : 'KeyWords',
sortable : true
}, {
header : '副关键词',
width : 100,
dataIndex : 'SubKeyWords',
sortable : true
}, {
header : '状态',
width : 100,
dataIndex : 'State',
sortable : true
}, {
header : '分配人',
width : 100,
dataIndex : 'Assumer',
sortable : true
}, {
header : '制作人',
width : 40,
dataIndex : 'Producer',
sortable : true
}, {
header : '模板',
width : 56,
dataIndex : 'Template',
sortable : true
}, {
header : '负责人',
width : 40,
dataIndex : 'Maintainer',
sortable : true
}, {
header : '组长',
width : 40,
dataIndex : 'TeamLeader',
sortable : true
}, {
header : '维护人51la',
width : 65,
dataIndex : 'MaintainerStatisId',
sortable : true
}, {
header : '网站51la',
width : 51,
dataIndex : 'StatisId',
sortable : true
}, {
header : '密码',
width : 45,
dataIndex : 'MaintainerFivelaPwd',
sortable : true
}, {
header : '收录',
width : 30,
dataIndex : 'Baidu',
sortable : true
}, {
header : '分配时间',
width : 100,
dataIndex : 'ToTeamLeaderDate',
sortable : true
}, {
header : '制作时间',
width : 100,
dataIndex : 'StartDoDate',
sortable : true
}, {
header : '完成时间',
width : 100,
dataIndex : 'EndDoDate',
sortable : true
}, {
header : '审核时间',
width : 100,
dataIndex : 'CheckDate',
sortable : true
}, {
header : '组员评分',
width : 100,
dataIndex : 'Score',
sortable : true
}, {
header : '分配人评分',
width : 100,
dataIndex : 'AssumerScore',
sortable : true
}, {
header : '综合评分',
width : 100,
dataIndex : 'TotalScore',
sortable : true
}]);
// proxy直接去读取josn数据【
ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'WebTask/WebsiteGeneral/ShowWebSiteAsZWToLeader.aspx'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'Head',
successProperty : 'success'
}, [{
name : 'Id',
mapping : 'Id',
type : 'int'
}, {
name : 'HostName',
mapping : 'HostName',
type : 'string'
}, {
name : 'TestHostName',
mapping : 'TestHostName',
type : 'string'
}, {
name : "FtpPwd",
mapping : "FtpPwd",
type : "string"
}, {
name : 'WebSpaceNumber',
mapping : 'WebSpaceNumber',
type : 'string'
}, {
name : 'WebSpaceUserName',
mapping : 'WebSpaceUserName',
type : 'string'
}, {
name : 'BeiAn',
mapping : 'BeiAn',
type : 'string'
}, {
name : 'State',
mapping : 'State',
type : 'string'
}, {
name : 'WebSpace',
mapping : 'WebSpace',
type : 'string'
}, {
name : 'Assumer',
mapping : 'Assumer',
type : 'string'
}, {
name : 'HostNameSP',
mapping : 'HostNameSP',
type : 'string'
}, {
name : 'HostNameRegDate',
mapping : 'HostNameRegDate',
type : 'string'
}, {
name : 'HostNameExpireDate',
mapping : 'HostNameExpireDate',
type : 'string'
}, {
name : 'MaintainerStatisId',
mapping : 'MaintainerStatisId',
type : 'string'
}, {
name : 'StatisId',
mapping : 'StatisId',
type : 'string'
}, {
name : 'MaintainerFivelaPwd',
mapping : 'MaintainerFivelaPwd',
type : 'string'
}, {
name : 'Baidu',
mapping : 'Baidu',
type : 'string'
}, {
name : 'PageView',
mapping : 'PageView',
type : 'string'
}, {
name : 'WebType',
mapping : 'WebType',
type : 'string'
}, {
name : 'KeyWords',
mapping : 'KeyWords',
type : 'string'
}, {
name : 'SubKeyWords',
mapping : 'SubKeyWords',
type : 'string'
}, {
name : 'StartTaskDate',
mapping : 'StartTaskDate',
type : 'string'
}, {
name : 'CheckDate',
mapping : 'CheckDate',
type : 'string'
}, {
name : 'StartDoDate',
mapping : 'StartDoDate',
type : 'string'
}, {
name : 'EndDoDate',
mapping : 'EndDoDate',
type : 'string'
}, {
name : 'TeamLeader',
mapping : 'TeamLeader',
type : 'string'
}, {
name : 'Maintainer',
mapping : 'Maintainer',
type : 'string'
}, {
name : 'Producer',
mapping : 'Producer',
type : 'string'
}, {
name : 'Template',
mapping : 'Template',
type : 'string'
}, {
name : 'ToTeamLeaderDate',
mapping : 'ToTeamLeaderDate',
type : 'string'
}, {
name : 'ToTeamDate',
mapping : 'ToTeamDate',
type : 'string'
}, {
name : 'Score',
mapping : 'Score',
type : 'string'
}, {
name : 'AssumerScore',
mapping : 'AssumerScore',
type : 'string'
}, {
name : 'TotalScore',
mapping : 'TotalScore',
type : 'string'
}]),
remoteSort : true
});
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : "WebTask/WebsiteGeneral/GetEmployeeAsGroup.aspx?type=z"
}), // 数据源
reader : new Ext.data.JsonReader({
totalProperty : "totalPorperty",
root : "Head",
successProperty : 'success',
fields : [{
name : 'id',
mapping : 'id',
type : 'string'
}, {
name : 'username',
mapping : 'username',
type : 'string'
}]
})
// 如何解析
});
store.load();
var storeddl = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : "WebTask/WebsiteGeneral/GetParaList.aspx?MenuId=0010"
}), // 下拉框数据源
reader : new Ext.data.JsonReader({
totalProperty : "totalPorperty",
root : "Head",
successProperty : 'success',
fields : [{
name : 'ParaName',
mapping : 'ParaName',
type : 'string'
}, {
name : 'ParaValue',
mapping : 'ParaValue',
type : 'string'
}]
})
// 如何解析
});
// 状态数据集，非数据库
var DdlState = new Ext.data.SimpleStore({
fields : ['ParaName', 'ParaValue'],
data : [['所有', ''], ['准备制作', '准备制作'], ['正在制作中', '正在制作中'],
['已制作完成', '已制作完成'], ['已审核', '已审核'],
['已分配给组长', '已分配给组长'], ['已分配给组员', '已分配给组员']]
});
storeddl.load();
// 网站制作状态静态数据
var liebie = new Ext.form.ComboBox({
id : 'dropdownliststate',
emptyText : '请选择网站制作状态',
mode : 'local', // 数据模式,local为本地模式
readOnly : true,
hidden : true,
displayField : 'ParaName',
valueField : 'ParaValue',
triggerAction : 'all',
name : 'identity', // 作为form提交时传送的参数
store : DdlState,
listeners : {
select : {
fn : function(combo, record, index) {
// 先清理数据
ds.removeAll();
ds.baseParams = {
paraname : grid.topToolbar.items.items[0].value,
paravalue : record.get('ParaValue')
};
ds.load({
callback : function(r, options, success) {
if (success == false) {
// 如果没有数据就清空
ds.removeAll();
Ext.MessageBox.alert('提示',
'Sorry,没有符合条件的数据');
}
}
});
ds.reload({
params : {
start : 0,
limit : 20
}
});
}
}
}
});
var grid = new Ext.grid.EditorGridPanel({
renderTo : 'grid3',
ds : ds,
sm : sm,
stripeRows : true,
cm : cm,
width : 700,
height : 280,
loadMask : true,
tbar : new Ext.Toolbar({
items : [new Ext.form.ComboBox({
id : 'ComSearch',
emptyText : '请选择搜索项目',
mode : 'remote', // 数据模式,local为本地模式
readOnly : true,
displayField : 'ParaName',
valueField : 'ParaValue',
triggerAction : 'all',
name : 'identity', // 作为form提交时传送的参数
store : storeddl,
listeners : {
select : {
fn : function(combo, record, index) {
if (record.get('ParaValue') == 'State') {
liebie.show();
Ext.get('txtsearchword')
.setDisplayed('none');
Ext.get('btnSearch')
.setDisplayed('none');
} else {
liebie.hide();
Ext.get('txtsearchword')
.setDisplayed('block');
Ext.get('btnSearch')
.setDisplayed('block');
}
}
}
}
}),
// 网站状态静态数据
liebie, new Ext.form.TextField({
id : 'txtsearchword',
fieldLabel : '搜索文字',
width : 150,
name : 'SearchWord',
allowBlank : false,
blankText : '请输入搜索文字',
listeners : {
specialKey : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
ds.removeAll();
ds.baseParams = {
paraname : grid.topToolbar.items.items[0].value,
paravalue : Ext.get('txtsearchword').dom.value
};
ds.load({
callback : function(r, options, success) {
if (success == false) {
Ext.MessageBox.alert('提示',
'Sorry,没有符合条件的数据');
}
}
});
ds.reload({
params : {
start : 0,
limit : 20
}
});
}
}
}
}),
{
id : 'btnSearch',
text : '搜索',
iconCls : 'search',
handler : function() {
ds.removeAll();
ds.baseParams = {
paraname : grid.topToolbar.items.items[0].value,
paravalue : Ext.get('txtsearchword').dom.value
};
ds.load({
callback : function(r, options, success) {
if (success == false) {
// 如果为空就清空原来数据
Ext.MessageBox.alert('提示',
'Sorry,没有符合条件的数据');
}
}
});
ds.reload({
params : {
start : 0,
limit : 20
}
});
}
}]
}),
bbar : new Ext.PagingToolbar({
pageSize : 20,
store : ds,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg : "没有记录",
items : [{
text : '导出Excel',
iconCls : 'add',
tooltip : "点击导出Excel文件",
handler : function() {
// 导出Excel文件
var cms = grid.getColumnModel(); // 获得网格的列模型
var strColoumnNames = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)
var strColoumnNamesHeader = "";
var strAllSql = "";
for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列
if (!cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列及是否列名为空（因为如果有选择框和默认序号，则为空）
strColoumnNames = Ext.util.Format.trim(cms
.getDataIndex(i));// 获得列名
// 判断是否是综合评分这列，如果是要把列名换成原始的
strColoumnNamesHeader = escape(Ext.util.Format
.trim(cms.getColumnHeader(i)));// 获得列标题
strAllSql += strColoumnNames + " as "
+ strColoumnNamesHeader + ",";// 拼接Sql查询语句，格式
// 字段 as
// 中文标题
}
}
// self表示在本窗口打开
var varparaname = grid.topToolbar.items.items[0].value;
var varparavalue = Ext.util.Format.trim(Ext
.get('txtsearchword').dom.value);
var varparanametext = Ext.get('ComSearch').dom.value
var gridtoexcelwindow;
if (typeof(varparaname) == "undefined") {
varparaname = "State";
varparavalue = varDefaultState;
varparanametext = "默认首要业务数据";
}
gridtoexcelwindow = window
.open( "Ajax/GridToExcel.aspx?sql=" + strAllSql
+ "&FromTable=WebTrace&ParaName="
+ escape(varparaname)
+ "&ParaNameText="
+ escape(varparanametext)
+ "&ParaValue="
+ escape(varparavalue), "_self",
"menubar=0,scrollbar=0,resizable=0,channelmode=0,location=0,status=0");
gridtoexcelwindow.focus();
}
}]
})
});
// el:指定html元素用于显示grid
grid.render();// 渲染表格
//
ds.baseParams = {
paraname : 'State',
paravalue : varDefaultState
};
ds.load({
callback : function(r, options, success) {
if (success == false) {
ds.removeAll();
Ext.MessageBox.alert('提示', 'Sorry,没有符合条件的数据');
}
}
});
ds.reload({
params : {
start : 0,
limit : 20
}
});
var win = new Ext.Window({
layout : 'fit',
maximizable : true,
collapsible : true,
width : 1000,
height : 600,
modal : true,
title : "公共查询界面:在这里您可以查询您需要的网站并可以导出所需数据<br/><font color='#FF0000'><b>小提示：<br/>1、您可以点击任一列名右侧出现的箭头，在出现的下拉框中，隐藏某些您不需要的列。您再次进入此页面时将保持您上次保留的列。<br/>2、搜索支持回车键。<br/>3、在窗体底部有'导出Excel'按钮，你可以导出您需要的数据</b></font>",
items : grid
});
win.show();
grid.on("afteredit", afterEdit1, grid);
grid.on("beforedestroy", CloseWriteCookie, grid);
// 按用户习惯，隐藏某列
if (boolHasClosedGrid == false)// 首次浏览
{
HiddenMyColumn(grid, varHiddenColumn);
// alert(varHiddenColumn);
}
// 关闭grid但未关闭浏览器
else {
HiddenMyColumn(grid, varHiddenColumnColseGrid);
}
}
// 隐藏列函数
function HiddenMyColumn(vargrid, varColumnIndex) {
if (varColumnIndex != "") {
var cms = vargrid.getColumnModel(); // 获得网格的列模型
var strarrayUserColumn = new Array();
strarrayUserColumn = varColumnIndex.split(",");
for (var i = 0; i < strarrayUserColumn.length; i++) {
cms.setHidden(strarrayUserColumn[i], true);// 隐藏列模型
}
}
}
// 关闭时写cookie
function CloseWriteCookie(obj) {
var cms = obj.getColumnModel(); // 获得网格的列模型
var strHiddenColoumnIndex = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)
// alert(cms.getColumnCount());
for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列
if (cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列
strHiddenColoumnIndex += Ext.util.Format.trim(i) + ",";// 获得列序号数字从0开始
}
}
// 把隐藏列存到Cookie中的同时返回隐藏列的值。
Ext.Ajax.request({
timeout : 3000000,
url : '/ajax/SetUserColumnCookie.aspx',
params : "ParaCkUserColumn=Write&UserHiddenColumn="
+ strHiddenColoumnIndex,
success : function(response, options) {
Ext.MessageBox.hide();
varHiddenColumnColseGrid = response.responseText// 把最新的隐藏列赋值给全局变量varHiddenColumnColseGrid
// alert(varHiddenColumnColseGrid);
boolHasClosedGrid = true;// 设置关闭grid但未关闭浏览器为真
},
failure : function(response, options) {
Ext.Msg.alert('错误', Ext.util.JSON
.decode(response.responseText).data.msg);
}
}
)
}
// 编辑时的检验是否合法，不合法不更新
function afterEdit1(obj) {
var r = obj.record;// 获取被修改的行
var l = obj.field;// 获取被修改的列
var o = obj.originalValue;
var id = r.get("Id");
var lie = r.get(l);
Ext.Ajax.request({
url : '/Ajax/WebsiteOper.aspx?type=3',
params : "id=" + id + "&name=" + l + '&value=' + lie
});
var cursor = this.getBottomToolbar().cursor;
ds.load({
params : {
start : cursor,
limit : this.getBottomToolbar().pageSize
}
});
}
function DEL(Obj) {
var cursor = Obj.getBottomToolbar().cursor;
ds.load({
params : {
start : cursor,
limit : Obj.getBottomToolbar().pageSize
}
});
}