Ext Grid 状态保存

Ext Grid 状态保存

直接进入主题

一直使用Ext开发系统,遇到grid 列比较多的时候 ,有些人需要有些人不需要,则需要保存grid 的状态。

目前有三种方法

1.启用自带cookie保存

2.使用扩展SessionProvider

3.使用扩展HttpProvider 

这次主要使用1和3。

1,启用自带cookie保存状态

启用cookie保存状态,使用起来既方便又简单,网上相关资料也比较多。

第一步:修改grid配置项  激活 stateful:true,添加状态ID stateId:xxxxx

第二步:Ext.onReady 里面添加初始化函数:

 

Ext.state.Manager.setProvider(  new Ext.state.CookieProvider({expires: new Date(new Date().getTime()+(1000*60*60*24*365))})); //设置过期时间,这里设置一年

以上两项设置好,就能使用cookie保存状态了,是不是很简单。是!。但是使用cookie有个局限,每个客户端cookie是有大小的,大概4K的数据,所以这个就要大家自己衡量了。

2,跳过。

3, 使用扩展HttpProvider 

httpProvider 是ext 的扩展类,在ext官网社区有人发布,这里也顺带张贴一下代码:

 

/**
* @class Ext.air.FileProvider
* @extends Ext.state.Provider
* An Ext state provider implementation for Adobe AIR that stores state in the application 
* storage directory.
* @constructor
* @param {Object} config
*/
Ext.air.FileProvider = function(config) {
    Ext.air.FileProvider.superclass.constructor.call(this);
    this.defaultState = {
        mainWindow: {
            width: 780,
            height: 580,
            x: 10,
            y: 10
        }
    };
    Ext.apply(this, config);
    this.state = this.readState();
    var provider = this;
    air.NativeApplication.nativeApplication.addEventListener('exiting', function() {
        provider.saveState();
    });
};
Ext.extend(Ext.air.FileProvider, Ext.state.Provider, {
    /**
    * @cfg {String} file
    * The file name to use for the state file in the application storage directory
    */
    file: 'extstate.data',
    /**
    * @cfg {Object} defaultState
    * The default state if no state file can be found
    */
    // private
    readState: function() {
        var stateFile = air.File.applicationStorageDirectory.resolvePath(this.file);
        if (!stateFile.exists) {
            return this.defaultState || {};
        }
        var stream = new air.FileStream();
        stream.open(stateFile, air.FileMode.READ);
        var stateData = stream.readObject();
        stream.close();
        return stateData || this.defaultState || {};
    },
    // private
    saveState: function(name, value) {
        var stateFile = air.File.applicationStorageDirectory.resolvePath(this.file);
        var stream = new air.FileStream();
        stream.open(stateFile, air.FileMode.WRITE);
        stream.writeObject(this.state);
        stream.close();
    }
});

asp.net 需要处理两个环节,A 接收状态data,进行数据库存储 B 根据用户ID或者特点条件取出状态输出

处理A环节页面 命名为 save-state.aspx ,代码如下:

 private void SaveState()

        {
            string dataJSON = Request.Form["data"]; //接收前台抛出的data
            if (!string.IsNullOrEmpty(dataJSON))
            {
                JavaScriptSerializer jss = new JavaScriptSerializer();
                int userID = AdminPassport.SysUserId;
                SysUserOP sysUserOP = new SysUserOP();
                SysUserInfo sysUserInfo = sysUserOP.GetUserInfoById(userID);
                List<ExtStateItem> st = null;
                BinaryFormatter formatter = new BinaryFormatter();
                MemoryStream ms = new MemoryStream();
                if (sysUserInfo != null && sysUserInfo.UserGridstatus != null)
                {
                    //byte[] buffer = Encoding.UTF8.GetBytes(sysUserInfo.UserGridstatus);
                    ms.Write(sysUserInfo.UserGridstatus, 0, sysUserInfo.UserGridstatus.Length);
                    ms.Seek(0, SeekOrigin.Begin);//移动到最前面
                    st = (List<ExtStateItem>)formatter.Deserialize(ms);
                }
                if (st == null)
                {
                    st = new List<ExtStateItem>();
                }
                HttpCookie delCookie;
                //new List<ExtStateItem>();
                List<ExtStateItem> updateItems = null;
                ExtStateItem delItem = null;
                ExtStateItem updateItem = null;
                foreach (string cookItem in Request.Cookies.AllKeys) //因客户端会记录cookie,这里我们把它删除掉,不删除应该也可以吧。
                {
                    if (cookItem.IndexOf("ys-") > -1)
                    {
                        delCookie = new HttpCookie(cookItem);
                        delCookie.Expires = DateTime.Now.AddDays(-1);
                        Response.Cookies.Add(delCookie);
                    }
                }
                updateItems = jss.Deserialize<List<ExtStateItem>>(dataJSON);
                //开始更新st
                if (updateItems != null && updateItems.Count > 0)
                {
                    updateItem = updateItems[updateItems.Count - 1];
                }
                if (updateItem != null)
                {
                    foreach (ExtStateItem extStateItem in st)
                    {
                        if (extStateItem.name == updateItem.name)
                        {
                            delItem = extStateItem;
                            break;
                        }
                    }
                    st.Remove(delItem);
                    st.Add(updateItem);
                }
                //重新更新数据库
                ms = new MemoryStream();
                formatter.Serialize(ms, st);
                byte[] writeBuffer = ms.GetBuffer();
                if (writeBuffer != null)
                {
                    sysUserInfo.UserId = userID;
                    sysUserInfo.UserGridstatus = writeBuffer;
                    sysUserOP.SaveUser(sysUserInfo);
                }
            }
             
        }

这样我们已经把用户状态保存至数据库了,好接下来我们开始读取

get-state.aspx 代码如下:

int userID = AdminPassport.SysUserId;
            SysUserOP sysUserOP = new SysUserOP();
            SysUserInfo sysUserInfo = sysUserOP.GetUserInfoById(userID);
            List<ExtStateItem> st = null;
            BinaryFormatter formatter = new BinaryFormatter();
            MemoryStream ms = new MemoryStream();
            if (sysUserInfo != null && sysUserInfo.UserGridstatus!=null)
            {
                byte[] buffer = sysUserInfo.UserGridstatus;
                ms.Write(buffer, 0, buffer.Length);
                ms.Seek(0, SeekOrigin.Begin);
                st = (List<ExtStateItem>)formatter.Deserialize(ms);
            }
            if (st == null)
            {
                st = new List<ExtStateItem>();
            }
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string result = "ExtState = " + jss.Serialize(st) + ";";
            Response.Write(result);

            Response.End(); 

 这两个代码处理的方法很多,大家可以自行解决处理,总之只要

int userID = AdminPassport.SysUserId;
            SysUserOP sysUserOP = new SysUserOP();
            SysUserInfo sysUserInfo = sysUserOP.GetUserInfoById(userID);
            List<ExtStateItem> st = null;
            BinaryFormatter formatter = new BinaryFormatter();
            MemoryStream ms = new MemoryStream();
            if (sysUserInfo != null && sysUserInfo.UserGridstatus!=null)
            {
                byte[] buffer = sysUserInfo.UserGridstatus;
                ms.Write(buffer, 0, buffer.Length);
                ms.Seek(0, SeekOrigin.Begin);
                st = (List<ExtStateItem>)formatter.Deserialize(ms);
            }
            if (st == null)
            {
                st = new List<ExtStateItem>();
            }
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string result = "ExtState = " + jss.Serialize(st) + ";";
            Response.Write(result);
            Response.End();

这两个页面处理的方法比较多,只要确保get-state.aspx 页面输出:

ExtState = [{"name":"bascountry-cookie-grid","value":"o%3Acolumns%3Da%253Ao%25253Aid%25253Ds%2525253Achecker%25255Ewidth%25253Dn%2525253A20%255Eo%25253Aid%25253Dn%2525253A1%25255Ewidth%25253Dn%2525253A30%255Eo%25253Aid%25253Dn%2525253A2%25255Ewidth%25253Dn%2525253A100%255Eo%25253Aid%25253Dn%2525253A3%25255Ewidth%25253Dn%2525253A197%25255Ehidden%25253Db%2525253A1%255Eo%25253Aid%25253Dn%2525253A4%25255Ewidth%25253Dn%2525253A100%25255Ehidden%25253Db%2525253A1%255Eo%25253Aid%25253Dn%2525253A5%25255Ewidth%25253Dn%2525253A100%25255Ehidden%25253Db%2525253A1%255Eo%25253Aid%25253Dn%2525253A6%25255Ewidth%25253Dn%2525253A100%25255Ehidden%25253Db%2525253A1%255Eo%25253Aid%25253Dn%2525253A7%25255Ewidth%25253Dn%2525253A100%255Eo%25253Aid%25253Dn%2525253A8%25255Ewidth%25253Dn%2525253A60"} ]

 就可以了,准备好后,我们开始调用这个页面

 js引用

<script type="text/javascript">
        document.write("<s" + "cript type='text/javascript' src='/get-state.aspx?t=" + Math.random() + "'></scr" + "ipt>"); //这里主要防止js客户端缓存
    </script>
    <script language="javascript" type="text/javascript" src="/ext/ux/util.js"></script>

    <script language="javascript" type="text/javascript" src="/ext/ux/HttpProvider.js"></script> 

js配置

将         Ext.state.Manager.setProvider(new Ext.ux.state.HttpProvider({ saveUrl: '/save-state.aspx' }));

             Ext.state.Manager.getProvider().initState(ExtState);

 添加至 Ext.onReady 里面,也可以加在外面

配置grid

 stateful: true,

 stateId: "basprovince-cookie-grid",

好了。这样就可以把grid的状态保存至服务器了。这种方法调用会比较频繁对数据库有一点压力,优点是:数据存在服务端,不受客户端制约 

你可能感兴趣的:(JavaScript,String,function,ext,null,buffer)