TreeList之Extjs篇

　　最近从WinForm转到了Web开发。根据界面要求。选择了比较火的Extjs,一接触到它，就和TreeList杠上了。这是一个老外写的插件。整体看来还不错。如果只是用来做数据展示的话。建议你用Extjs扩展的ColumnTree就足够了。但用来做数据编辑的话。在几列的情况下。它不能每一列都设置一个Editor，TreeGrid就要上场了。 百度了一把,还没有人写这方面的文章哦，对于这个二X树算法都避而不谈。

　　首先,TreeGrid的定义模式是和Grid是相同的。

 

 1 var DepRecord = Ext.data.Record.create
 2 ([
 3     { name: 'DdepSN' },
 4     { name: 'DdepName' },
 5     { name: 'DdepOffTel' },
 6     { name: 'DdepExtTel' },
 7     { name: 'DdepModTel' },
 8     { name: 'DdepFax' },
 9     { name: 'DdepMemo' },
10     { name: 'DdepShow', type: 'bool' },
11     { name: 'Pname' },
12     { name: '_id' },
13     { name: '_parent' },
14     { name: '_level' },
15     { name: '_lft' },
16     { name: '_rgt' },
17     { name: '_is_leaf', type: 'bool' },
18     { name: 'Timep' }
19 ]);
　　//TreeGrid专用的Store
20 HyOA.FrmHRDepList.DepStore = new Ext.ux.maximgb.treegrid.NestedSetStore
21 ({
22     autoLoad: true,
23     url: "./Project/System/FrmDepListService.aspx?Param=GetAllDepNode&&isHRDep=true",
24     reader: new Ext.data.JsonReader
25     ({ id: '_id', root: 'data', totalProperty: 'total', successProperty: 'success'
26     }, HyOA.FrmHRDepList.DepRecord)
27 });
28 var DepGrid = new Ext.ux.maximgb.treegrid.EditorGridPanel
29 ({
30     store: DepStore,
31     master_column_id: 'DdepSN',//重要属性。
32     region: 'center',
33     scope: this,
34     columns:
35     [
36       { id: 'DdepSN', header: "部门编号", dataIndex: "DdepSN", width: 150, sortable: true, editor: new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank: false })) },
37       { header: "部门名称", dataIndex: "DdepName", width: 260, sortable: true, editor: new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank: false })) },
38       { header: '办公电话', dataIndex: 'DdepOffTel', width: 130, editor: new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank: false })) },
39       { header: '电话分机', dataIndex: 'DdepExtTel', width: 130, editor: new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank: false })) },
40       { header: '移动座机', dataIndex: 'DdepModTel', width: 130, editor: new Ext.grid.GridEditor(new Ext.form.DateField({ allowBlank: false })) },
41       { header: '传真', dataIndex: 'DdepFax', width: 130, editor: new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank: false })) },
42       { header: "备注", width: 130, sortable: true, dataIndex: "DdepMemo", editor: new Ext.grid.GridEditor(new Ext.form.TextField()) },
43       { dataIndex: 'Timep', hidden: true }
44     ],
45     height: 220,
46     sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
47     stripeRows: true,
48     enableDD: true,
49     title: "部门分类",
50     viewConfig: { enableRowBody: true },
51     tbar: DepTBar
52 });

 

 这样就定义好了一个TreeGrid,除了它专用的NestedSetStore，其它的都与Grid的定义一致的。在Record里面有三个重要属性,level,_lft,_rgt,对应二X树里面的左右节点概念,最后附上生成代码

    static int nFit = 0;
    Res = new DataTable();
    nFit = 0;
    DataColumn ColumnPid = new DataColumn("Pid", typeof(int));
    DataColumn ColumnChild = new DataColumn("ChildID", typeof(int));
    DataColumn ColumnLft = new DataColumn("Lft", typeof(int));
    DataColumn ColumnRgt = new DataColumn("Rgt", typeof(int));
    DataColumn ColumnLevel = new DataColumn("Level", typeof(int));
    Res.Columns.AddRange(new DataColumn[] { ColumnPid, ColumnChild, ColumnLft, ColumnRgt, ColumnLevel });
    Res.PrimaryKey = new DataColumn[] { ColumnChild };
    AnalyzeLftRgt();
    /// <summary>
    /// 调用上面函数，完成计算,这里用了听棠的Orm
    /// </summary>
    private void AnalyzeLftRgt()
    {
        nFit = 0;
        if (Res.Rows.Count > 0) Res.Rows.Clear();
        RetrieveCriteria Tm = new RetrieveCriteria(typeof(tbDepListEntity));
        Tm.DatabaseName = SessionManager.GetSession("LoginBase");
        Tm.AddSelect(tbDepListEntity.__PID);
        Tm.AddSelect(tbDepListEntity.__DEPID, "ChildID");
        Tm.OrderBy(tbDepListEntity.__DEPSN);
        Table = Tm.AsDataTable();
        DataRow[] AllNode = Table.Select("PID=0");
        for (int n = 0; n < AllNode.Length; n++)
        {
            DataRow Dr = AllNode[n];
            int ID = Convert.ToInt32(Dr["ChildID"]);
            DoWork(ID, 0);
        }
    }
    /// <summary>
    /// 生成Lft,Rgt,Level的专用函数。
    /// </summary>
    public void DoWork(int ID, int Pid)
    {
        int Level = 1;
        DataRow PNode = Res.Rows.Find(Pid);
        if (PNode != null)
        {
            Level = Convert.ToInt32(PNode["Level"]) + 1;
        }
        DataRow New = Res.NewRow();
        New["Pid"] = Pid;
        New["ChildID"] = ID;
        New["Level"] = Level;
        if (!Res.Rows.Contains(ID))
        {
            New["Lft"] = ++nFit;
            Res.Rows.Add(New);
        }
        DataRow[] Rows = Table.Select("PID=" + ID.ToString());
        if (Rows.Length > 0)
        {
            for (int i = 0; i < Rows.Length; i++)
            {
                DataRow Dr = Rows[i];
                int ChildID = Convert.ToInt32(Dr["ChildID"]);
                DoWork(ChildID, ID);
            }
            DataRow PRow = Res.Rows.Find(ID);
            if (PRow != null)//遍历完兄弟后给老子赋Rgt的值
            {
                PRow["Rgt"] = ++nFit;
            }
        }
        else
        {
            //没有儿子,给老子赋Rgt的值
            New["Rgt"] = ++nFit;
        }
    }

 

最后希望用Extjs的菜鸟们能从这里得到一点帮助，不像我当时一样。是没有地方可以借鉴的。