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

FineUI开源版之TreeGrid实现

阅读量：421 次

发布时间：2019-03-06

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

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);            }        }    }}