Ext.Grid之记录用户使用习惯—隐藏列

showker · 发表于 2013-1-23 02:40:46

Ext.Grid的强大功能想必用过Ext的都体会到，可以隐藏列，可以拖放，可以排序等等，但是如果用户隐藏了某一些列后，下次登录时还是要看到上次隐藏后的列该怎么办呢？这就涉及到一个用户使用习惯的问题。想到记录用户习惯，当然首选使用Cookie。但是问题来了，在什么时候记录Cookie？什么事件触发后我们去写Cookie？其实最完美的当然就是在隐藏列这一事件（暂且叫它事件吧，具体的我也不太清楚Ext隐藏列的原理）触发时把剩下的列写入Cookie，但是小生才疏学浅，没有找到这个“隐藏列”事件，没法重写，只好另辟蹊径。反反复复试了Grid自带的方法比如：Close,BeforeClose,打算在用户关闭Grid的时候记录，但是没有效果，最后才找到beforedestroy这一事件，匪夷所思，关闭grid的时候不是触发beforeclose或者close,偏偏来个beforedestroy(英文就是摧毁，销毁)，难道是Ext的人的命名习惯？不解。说到这里思路就清楚了，实现原理及步骤如下：
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// 把最新的隐藏列赋值给全局变量varHiddenColumnColseGrid22 // alert(varHiddenColumnColseGrid);23 boolHasClosedGrid = true;// 设置关闭grid但未关闭浏览器为真24 },25 failure : function(response, options) {26 Ext.Msg.alert('错误', Ext.util.JSON27 .decode(response.responseText).data.msg);2829 }30 }3132 )33}3435
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, 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 : "公共查询界面:在这里您可以查询您需要的网站并可以导出所需数据 小提示： 1、您可以点击任一列名右侧出现的箭头，在出现的下拉框中，隐藏某些您不需要的列。您再次进入此页面时将保持您上次保留的列。 2、搜索支持回车键。 3、在窗体底部有'导出Excel'按钮，你可以导出您需要的数据", 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, true);// 隐藏列模型 } }}// 关闭时写cookiefunction 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 } });}

		自动登录	找回密码
密码			立即注册