DTree is a versatile tree structure component designed for Layui. When working within a LayuiAdmin enviroment, integrating DTree requires specific configuration steps to ensure seamless communication between the C# backend and the frontend interface.

1. Environment Configuration

To begin, the DTree assets must be correctly placed within the LayuiAdmin directory structure and registered in the global configuration.

• Move dtree.js into the lib/extend/ directory of your project.
• Ensure the dtreefont folder and dtree.css are included in your static asset path.
• Register the extension in your main configuration file (usually config.js) or directly in the page header.

In your HTML layout or specific page, reference the necessary stylesheets:

<link rel="stylesheet" href="/content/layuiadmin/style/dtree.css">
<link rel="stylesheet" href="/content/layuiadmin/style/font/dtreefont.css">

Initialize the Layui module path to include the new extension:

layui.config({
    base: '/content/layuiadmin/' 
}).extend({
    dtree: 'lib/extend/dtree'
});

2. Backend Data Modeling in C#

DTree supports a simplified "list" data format, which is often easier to map from a relational database than a nested recursive structure. Define a DTO (Data Transfer Object) to represent individual nodes and a wrapper to match Layui's expectedd response format.

Define the node structure:

public class TreeElement
{
    public string id { get; set; }
    public string parentId { get; set; }
    public string title { get; set; }
    public object checkArr { get; set; } = "0"; // Used for checkbox states
}

Create a generic wrapper for the JSON response:

public class DTreeResponse<T> where T : class
{
    public int status { get; set; }
    public string message { get; set; }
    public List<T> data { get; set; }

    public static DTreeResponse<T> BuildSuccess(List<T> items)
    {
        return new DTreeResponse<T>
        {
            status = 0,
            message = "Operation successful",
            data = items
        };
    }
}

3. Frontend Implementation

The frontend requires an HTML container for the tree and a JavaScript initialization script to fetch data and render the UI.

HTML Container

<div class="tree-wrapper" style="max-height: 500px; overflow: auto;">
    <ul id="entityTree" class="dtree" data-id="0"></ul>
</div>

JavaScript Rendering

Using dtree.render, connect the component to your C# controller action. By seting dataFormat: "list", the component will automatically build the tree hierarchy based on the parentId field provided in your model.

layui.use(['dtree'], function() {
    var dtree = layui.dtree;

    dtree.render({
        elem: "#entityTree",
        url: "/Organization/GetTreeNodes", // Your C# Controller Action
        method: "GET",
        dataStyle: "layuiStyle", 
        dataFormat: "list",      
        response: { 
            statusCode: 0, 
            message: "message" 
        },
        checkbar: true,          // Enable checkboxes
        checkbarLoad: "leaf"     // Optional: only show checkboxes on leaf nodes
    });
});

This implementation leverages the layuiStyle, which maps the status and message fields from your C# response directly to the component's internal logic, allowing for efficient data handling without complex frontend transformations.