FineUI开源版之TreeGrid实现-白红宇

FineUI开源版之TreeGrid实现

阅读量：421 次

发布时间：2019-03-06

本文共 6446 字，大约阅读时间需要 21 分钟。

FineUI开源版并未内置树表格功能，但通过扩展和修改，可以实现树表格的效果。本文将详细介绍如何实现树表格，并提供相应的代码示例。

1. 树表格的需求分析

FineUI默认不支持树表格，但在实际项目中可能需要显示层级化的数据结构。以下是常见需求：

展开/收缩树节点

显示层级信息

支持点击事件（子节点跳转）

自定义节点图标

高效的数据绑定和排序

2. 实现树表格的关键点

2.1 树表格的核心逻辑

树表格的实现主要包含以下几个关键部分：

数据处理：获取父节点、子节点的关系，计算层级信息

视图更新：在UI中显示展开的节点，处理点击事件

动态绑定：根据数据源实时更新树表格结构

排序与过滤：支持对树表格数据进行排序

2.2 核心代码扩展

以下是FineUI Grid.cs中添加的主要代码段：

public bool EnableTree
{
    get
    {
        object obj = FState["EnableTree"];
        return obj == null ? false : (bool)obj;
    }
    set
    {
        FState["EnableTree"] = value;
        if (value)
        {
            EnableRowClickEvent = false;
        }
    }
}
public bool ExpandAll
{
    get
    {
        object obj = FState["ExpandAll"];
        return obj == null ? true : (bool)obj;
    }
    set
    {
        FState["ExpandAll"] = value;
        if (value)
        {
            EnableRowClickEvent = false;
        }
    }
}
private int GetLevelNub(GridRow row, GridRowCollection Rows)
{
    int lub = 0;
    int IDindex = FindColumn(TreeDataIDField).ColumnIndex;
    int ParentIDindex = FindColumn(TreeDataParentIDField).ColumnIndex;
    if (row.Values[ParentIDindex].ToString() == "" || row.Values[ParentIDindex].ToString() == "0")
    {
        return lub;
    }
    else
    {
        foreach (GridRow gr in Rows)
        {
            if (gr.Values[IDindex].ToString() == row.Values[ParentIDindex].ToString())
            {
                lub++;
                int nub = GetLevelNub(gr, Rows);
                lub += nub == 0 ? 1 : nub;
            }
        }
    }
    return lub;
}
private void SortTreeRows()
{
    List
   
     sourceRows = new List
    
     ();
    foreach (GridRow row in Rows)
    {
        sourceRows.Add(row);
    }
    Rows.Clear();
    List
     
       toList = new List
      
       ();
    int pidindex = FindColumn(TreeDataParentIDField).ColumnIndex;
    int idindex = FindColumn(TreeDataIDField).ColumnIndex;
    for (int i = sourceRows.Count - 1; i >= 0; i--)
    {
        GridRow row = sourceRows[i];
        if (row.Values[pidindex].ToString() == "" || row.Values[pidindex].ToString() == "0")
        {
            toList.Insert(0, row);
            sourceRows.RemoveAt(i);
        }
    }
    toList = InsertRowToList(toList, sourceRows, idindex, pidindex);
    toList.ForEach(p => Rows.Add(p));
    for (int i = 0; i < Rows.Count; i++)
    {
        Rows[i].RowIndex = i;
    }
    toList.Clear();
    toList = null;
}

3. 测试页面的实现

以下是实现树表格的测试页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="FineUI.Examples.TestPage" %>

4. 后台代码配置

以下是后台代码的实现：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace FineUI.Examples
{
    public partial class TestPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("name", typeof(string));
            dt.Columns.Add("id", typeof(int));
            dt.Columns.Add("topID", typeof(string));
            dt.Columns.Add("levelcode", typeof(string));
            dt.Columns.Add("levelnub", typeof(int));
            dt.Columns.Add("subitem", typeof(bool));
            dt.Columns.Add("url", typeof(string));
            DataRow dr1 = dt.NewRow();
            dr1[0] = "首页";
            dr1[1] = 1;
            dr1[2] = 0;
            dr1[3] = "0001";
            dr1[4] = 0;
            dr1[5] = false;
            dr1[6] = "adfsdfds";
            dt.Rows.Add(dr1);
            DataRow dr2 = dt.NewRow();
            dr2[0] = "测试页";
            dr2[1] = 2;
            dr2[2] = 0;
            dr2[3] = "0002";
            dr2[4] = 0;
            dr2[5] = false;
            dr2[6] = "adfsdfds";
            dt.Rows.Add(dr2);
            DataRow dr11 = dt.NewRow();
            dr11[0] = "首页下级1";
            dr11[1] = 3;
            dr11[2] = 1;
            dr11[3] = "00010001";
            dr11[4] = 1;
            dr11[5] = true;
            dr11[6] = "adfsdfds";
            dt.Rows.Add(dr11);
            DataRow dr12 = dt.NewRow();
            dr12[0] = "首页下级2";
            dr12[1] = 4;
            dr12[2] = 1;
            dr12[3] = "00010002";
            dr12[4] = 1;
            dr12[5] = true;
            dr12[6] = "adfsdfds";
            dt.Rows.Add(dr12);
            DataRow dr13 = dt.NewRow();
            dr13[0] = "首页下级3";
            dr13[1] = 5;
            dr13[2] = 1;
            dt.Rows.Add(dr13);
            DataRow dr21 = dt.NewRow();
            dr21[0] = "测试页下级1";
            dr21[1] = 6;
            dr21[2] = 2;
            dr21[3] = "00020001";
            dr21[4] = 1;
            dr21[5] = true;
            dr21[6] = "adfsdfds";
            dt.Rows.Add(dr21);
            DataRow dr22 = dt.NewRow();
            dr22[0] = "测试页下级2";
            dr22[1] = 7;
            dr22[2] = 2;
            dr22[3] = "00020002";
            dr22[4] = 1;
            dr22[5] = true;
            dr22[6] = "adfsdfds";
            dt.Rows.Add(dr22);
            DataRow dr221 = dt.NewRow();
            dr221[0] = "测试页下下级1";
            dr221[1] = 8;
            dr221[2] = 7;
            dr221[3] = "00020002001";
            dr221[4] = 2;
            dr221[5] = true;
            dr221[6] = "adfsdfds";
            dt.Rows.Add(dr221);
            DataRow dr00 = dt.NewRow();
            dr00[0] = "00测试";
            dr00[1] = 8;
            dr00[2] = 14;
            dr00[3] = "00020002001";
            dr00[4] = 2;
            dr00[5] = true;
            dr00[6] = "adfsdfds";
            dt.Rows.Add(dr00);
            Grid1.DataSource = dt;
            Grid1.DataBind();
        }
        protected void PageManager_CustomEvent(object sender, CustomEventArgs e)
        {
            if (e.EventArgument.IndexOf("GridTreeClick_") >= 0)
            {
                string rowindex = e.EventArgument.ToString().Split('_')[1];
                Grid1.DoTreeClick(rowindex);
            }
        }
    }
}