VS2005中使用Extjs GridPanel(1)

由于本人对Extjs尚处于初期学习阶段 只为遇到同样开发困难的朋友一些开发建议 欢迎高手们不吝赐教。

Extjs是一个很不错的JS开源框架,如果你不知道Extjs是什么,那得先去看看它的官方网站
http://extjs.com/
其中很引人瞩目的就是他的Gird控件 丰富的功能和友好的界面
是实现企业内部系统非常好的解决方案,但由于其默认的格式JSON,在VS2005里没有的得到比较好的支持
另一个方面 由于文档大多数采用英文编写,对于像我这样的初学者看起来还是有些困难。
由于自己对这个还是比较感兴趣 所以还是想了一些现有的方法来实现出一些效果 举个例子吧

Grid很重要的一个部分是数据源 默认采用的格式是JSON格式的数据源 而VS里的GridView通常我们使用的数据绑定对象一般都是DataTable
因此 首先要做的就是需要这么一个类 能将最基本的DataTable变换成JSON格式的对象
以下是我自己编写的类文件 只正对于DataTable而言进行的很基本的转换

public   static   class  JSON
{
    public static string JSONParse(DataTable dt)
    {
        StringBuilder retStr = new StringBuilder("<script type=\"text/javascript\">var " + dt.TableName + "_data = [");
        StringBuilder strTemp = new StringBuilder("");
        //retStr.Append("['3m Co',71.72,0.02,0.03,'2008-9-1 12:05:09']");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            retStr.Append(JSONDataRowParse(dt.Rows[i], ref strTemp));
            strTemp.Remove(0, strTemp.Length);
        }
        retStr.Remove(retStr.Length - 1, 1);
        retStr.Append("];</script>");
        return retStr.ToString();
    }

    public static string JSONParseNoScript(DataTable dt)
    {
        StringBuilder retStr = new StringBuilder("");
        StringBuilder strTemp = new StringBuilder("");
        //retStr.Append("['3m Co',71.72,0.02,0.03,'2008-9-1 12:05:09']");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            retStr.Append(JSONDataRowParse(dt.Rows[i], ref strTemp));
            strTemp.Remove(0, strTemp.Length);
        }
        retStr.Remove(retStr.Length - 1, 1);
        return retStr.ToString();
    }

    private static string JSONDataRowParse(DataRow dr,ref StringBuilder strTemp)
    {
        strTemp.Append("[");
        for (int i = 0; i < dr.Table.Columns.Count; i++)
        {
            if (JSONDataColumnParse(dr.Table.Columns[i]) == TypeEnum.Num)
            {
                strTemp.Append(dr[i].ToString()+",");
            }
            else
            {
                strTemp.Append("'" + dr[i].ToString() + "',");
            }
        }
        strTemp.Remove(strTemp.Length - 1, 1);
        strTemp.Append("],");
        return strTemp.ToString() ;
    }

    private static TypeEnum JSONDataColumnParse(DataColumn DC)
    {
        if (DC.DataType == typeof(int) || DC.DataType == typeof(bool) || DC.DataType == typeof(float) || DC.DataType == typeof(double))
        {
            return TypeEnum.Num;
        }
        else
        {
            return TypeEnum.String;
        }
    }

    private enum TypeEnum
    {
        String,
        Num,
        Date
    }
}

有了这样一个类文件,就可以将一个DataTable对象转换成一个String类型的
JSON基本格式数据，然后 使用单值绑定的方式绑定到页面前端
在后台编写一个DataTable 然后使用这个类的静态方法予以转换

            varData  =  JSON.JSONParse(dt);
            DataBind();

前台 将这个string对象varData 作为页面的一个绑定值

<% #varData %>

这样操作后 页面上的JS就有了这样的一个对象 它可以作为Extjs的一个数据源 比如Grid中的 store属性 可以指定一种Store对象 而这种Store对象的构造函数中,在JSON方法所产生出的一个DataTable就可以指定为这个Store的Data,类似我对这个DataTable的TableName取名为Sara 经过静态方法处理后 产生了一个Sara_Data的JS,JSON格式对象 那么我在构造Extjs的GridPanel时候 在数据的一部分就可以这样写了

        store:new Ext.data.GroupingStore({
            reader: reader,
            data: Sara_data,
            sortInfo:{field: 'price', direction: "ASC"},
            groupField:'lastChange'
        })

当然 这样做首先就是Sara_Data在构造GridPanel时已经生成并称为JS的一个对象了
图例:

这样 一个最基本的由后台代码生成 前台代码绑定为数据源的Extjs GridPanel对象就完成了 当然 这个只是一切的开始。
下一篇主要讨论 GridPanel中行事件的处理

转载于:https://www.cnblogs.com/JeremyWu/archive/2008/04/20/1163039.html