Blazor 쿼리 생성기의 5대 기능

59213 단어 webdev csharp blazor productivity

SyncfusionBlazor Query Builder은 대량의 데이터를 필터하는 데 사용되는 풍부하고 신속한 사용자 인터페이스이다.데이터 시각화 컨트롤(예: DataGrid, 차트)과 결합하여 필터링된 데이터를 볼 수 있도록 쿼리를 만들거나 편집할 수 있습니다.구조화된 JSON 및 SQL 쿼리로 구성할 수 있습니다.이 블로그에서는 Blazor Query Builder 컨트롤의 다음 5가지 주요 기능에 대해 설명합니다.

Filtering

Data manager support

Importing and exporting

Templates

Grouping and sorting

거르다

Blazor Query Builder는 생성된 조건을 사용하여 데이터 소스의 데이터를 필터링하고 다음 유형의 출력을 제공합니다.
데이터 관리자(6791457)

SQL 쿼리

술어

데이터 관리자 쿼리: Syncfusion 구성 요소, 예를 들어 DataGrid, Tree Grid, Charts, ListBox 및 기타 구성 요소에 사용됩니다.사용자는 이 구성 요소들을 사용하여 조회 생성기와 직접 통신할 수 있다.GetDataManagerQuery 메서드를 사용하여 작성된 기준을 데이터 관리자 쿼리 형식으로 가져올 수 있습니다.우리는 data manager support 부분에서 이 점을 간략하게 설명할 것이다.
SQL 쿼리: 데이터베이스와 상호작용을 하고 데이터베이스에 있는 데이터를 필터할 수 있습니다.GetSqlFromRules 메서드를 사용하여 SQL 쿼리 형식으로 작성 조건을 가져올 수 있습니다.응용 프로그램에서 사용하는 기존 SQL 쿼리로 쉽게 대체할 수 있습니다.
술어: 이 술어들을 사용하여 실체에서 데이터를 직접 선별할 수 있으며 모든 기록을 얻을 필요가 없다.GetPredicates 방법을 사용하여 작성된 조건을 술어로 가져올 수 있습니다.
다음 코드는 술어 출력을 예시합니다.인용된 데이터 원본은 간단한 목록입니다.

@using Syncfusion.Blazor.Grids
<div>
    <SfQueryBuilder TValue="Employee" @ref="QueryBuilder">
        <QueryBuilderColumns>
            <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.Number"></QueryBuilderColumn>
            <QueryBuilderColumn Field="FirstName" Label="First Name" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.String"></QueryBuilderColumn>
            <QueryBuilderColumn Field="LastName" Label="Last Name" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.String"></QueryBuilderColumn>
            <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.Date"></QueryBuilderColumn>
            <QueryBuilderColumn Field="Country" Label="Country" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.String"></QueryBuilderColumn>
        </QueryBuilderColumns>
    </SfQueryBuilder>
</div>
<button class="e-btn e-custom" @onclick="@FilterByPredicates">Search</button>
<div>
    <SfGrid TValue="Employee" AllowPaging="true" DataSource="FilterList">
        <GridPageSettings PageSize="5"></GridPageSettings>
        <GridColumns>
        <GridColumn Field=@nameof(Employee.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field=@nameof(Employee.FirstName) HeaderText="First Name"></GridColumn>
        <GridColumn Field=@nameof(Employee.LastName) HeaderText="Last Name"></GridColumn>
        <GridColumn Field=@nameof(Employee.HireDate) HeaderText="Hire Date" Format="MM/dd/yyyy"></GridColumn>
        <GridColumn Field=@nameof(Employee.Country) HeaderText="Country"></GridColumn>
     </GridColumns>
    </SfGrid>
</div>

@code {
    SfQueryBuilder<Employee> QueryBuilder;
    public IEnumerable<Employee> EmployeeList { get; set; }
    public IEnumerable<Employee> FilterList { get; set; }
    public WhereFilter Predicates;
    protected override void OnInitialized()
    {
        FilterList = EmployeeList = Employee.GetAllRecords();
    }
    public void FilterByPredicates()
    {
        Predicates = QueryBuilder.GetPredicate(QueryBuilder.GetValidRules());
        string condition = "and";
        if (Predicates != null)
        {
            if (Predicates.predicates != null)
            {
                condition = Predicates.Condition;
            }
            Type type = EmployeeList.GetElementType();
            if (type == null)
            {
                type = EmployeeList.GetType().GetElementType();
            }
            var paramExpression = type.Parameter();
            List<WhereFilter> filterQuery = new List<WhereFilter>();
            filterQuery.Add(Predicates);
            var filterList = EmployeeList.AsQueryable().Where(paramExpression, EnumerableOperation.PredicateBuilder(EmployeeList, filterQuery, condition, paramExpression, type));
            FilterList = filterList.Cast<Employee>().ToList();
        } else
        {
            FilterList = EmployeeList;
        }
    }
}

Blazor 쿼리 생성기에서 술어 필터 데이터 사용

데이터 관리자 지원

데이터 관리자를 Blazor 조회 생성기에 통합하여 데이터 원본과의 통신을 간소화하고 제공된 조건에 따라 필요한 결과를 되돌릴 수 있습니다.
참고: Blazor Query Builder는 데이터 관리자가 지원하는 모든 유형의 데이터 소스를 지원합니다.
GetDataManagerQuery 메서드를 사용하여 작성된 기준을 데이터 관리자 쿼리 형식으로 가져올 수 있습니다.
다음 예제에서는 DataGrid의 쿼리 속성에 데이터 관리자 쿼리를 사용하여 필터링된 레코드를 표시합니다.

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Popups

<SfGrid TValue="Order" AllowPaging="true" Query="GridQuery">
    <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor"></SfDataManager>
    <SfToolbar>
        <ToolbarItems>
            <ToolbarItem Type="ItemType.Input">
                <Template>
                    <button class="e-btn" @onclick="@openQueryBuilder">Open Query Builder</button>
                </Template>
            </ToolbarItem>
        </ToolbarItems>
     </SfToolbar>
     <GridEvents Created="Created" TValue="Order"></GridEvents>
     <GridPageSettings PageSize="8"></GridPageSettings>
     <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="MM/dd/yyyy"></GridColumn>
        <GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City"></GridColumn>
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country"></GridColumn>
     </GridColumns>
</SfGrid>

<SfDialog Target=".sf-grid" ShowCloseIcon="true" @bind-Visible="Visibility" Height="auto">
    <DialogTemplates>
        <Content>
            <SfQueryBuilder TValue="Order" @ref="Querybuilder">
                <QueryBuilderColumns>
                    <QueryBuilderColumn Field="OrderID" Label="Order ID" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.Number"></QueryBuilderColumn>
                    <QueryBuilderColumn Field="CustomerID" Label="Customer ID" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.String"></QueryBuilderColumn>
                    <QueryBuilderColumn Field="OrderDate" Label="Order Date" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.Date"></QueryBuilderColumn>
                    <QueryBuilderColumn Field="ShipCity" Label="Ship City" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.String"></QueryBuilderColumn>
                    <QueryBuilderColumn Field="ShipCountry" Label="Ship Country" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.String"></QueryBuilderColumn>
                </QueryBuilderColumns>
            </SfQueryBuilder>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton IsPrimary="true" Content="Reset" OnClick="@ResetClick" />
        <DialogButton IsPrimary="true" Content="Ok" OnClick="@OkClick" />
    </DialogButtons>
</SfDialog>
@code {
    SfQueryBuilder<Order> Querybuilder;
    public Query GridQuery { get; set; }
    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
        public string ShipCity { get; set; }
        public string ShipCountry { get; set; }
    }

    private void Created()
    {
        GridQuery = Querybuilder.GetDataManagerQuery();
        StateHasChanged();
    }

    private bool Visibility { get; set; } = false;

    private void ResetClick()
    {
        Querybuilder.Reset();
    }
    private void OkClick()
    {
        GridQuery = Querybuilder.GetDataManagerQuery();
        StateHasChanged();
        this.Visibility = false;
    }

    private void openQueryBuilder()
    {
        this.Visibility = true;
    }
}

<style>
    .e-dialog {
        max-height: 500px !important;
        top: 30px !important;
        left: 0% !important;
    }
    .e-rule-filter .e-rule-filter {
        padding: 0 0 0 0 !important;
    }
</style>

Data Manager를 사용하여 Blazor Query Builder와 DataGrid 통합

수출입

Blazor Query Builder를 사용하면 규칙 목록이나 SQL Query에서 사용할 수 있는 사전 정의된 기준을 가져올 수 있습니다.작성된 기준을 규칙 목록 또는 SQL 질의로 내보낼 수도 있습니다.
참고: 초기 렌더링 또는 렌더링 후에 조건을 가져올 수 있습니다.
다음 코드는 미리 정의된 규칙을 사용하여 조회 생성기를 만드는 방법을 보여 줍니다.

<SfQueryBuilder TValue="Employee">
    <QueryBuilderRule Condition="or" Rules="Rules"></QueryBuilderRule>
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
        <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="LastName" Label="LastName" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>

@code
{
    List<RuleModel> Rules = new List<RuleModel>()
    {
        new RuleModel {Field="Country", Label="Country", Type="String", Operator="equal", Value = "England”},
        new RuleModel {Field="EmployeeID", Label="EmployeeID", Type="Number", Operator="notequal", Value = 1001}
    };
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }
}

사용자는 SetRules 방법으로 규칙 목록에서 조건을 설정하고 SetRulesFromSql 방법으로 SQL 조회를 할 수 있습니다.다음 코드 예에서는 Set Rules 버튼의 SetRules FromSql 방법을 설명합니다.
다음 코드는 Blazor Query Builder에서 SQL에서 규칙을 설정하는 방법을 보여 줍니다.

<div style="width: 100%; margin-bottom: 10px;">
    <p>Enter the SQL Query</p>
    <textarea style="width: 100%;" id='ruleContent' @bind="Description"></textarea>
</div>
<div style="margin-bottom: 10px">
    <SfButton CssClass="e-primary" @onclick="setRules">Set Rules</SfButton>
</div>
<SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj">
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
        <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>

@code {
    SfQueryBuilder<Employee> QueryBuilderObj;
    public string Description { get; set; } = string.Empty;
    private void setRules()
    {
        QueryBuilderObj.SetRulesFromSql(Description);
    }
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }
}

Blazor Query Builder에서 SQL Query 설정 규칙
또한 사용자는 GetRules 방법을 사용하여 규칙 목록의 형식으로 조건을 얻고, GetRulesFromSql 방법을 사용하여 SQL 조회의 형식으로 조건을 얻을 수 있다.다음 코드 예제에서는 Get Query로 표시된 버튼에 GetRulesFromSql 메서드를 사용합니다.
다음 코드는 Blazor Query Builder에서 SQL로 규칙을 내보내는 방법을 보여 줍니다.

<SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj">
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
        <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>
<div style="margin: 10px 0 10px 0">
    <SfButton CssClass="e-primary" @onclick="getQuery">Get Query</SfButton>
</div>
<div style="width: 100%; margin-bottom: 10px;">
    <p>SQL Query</p>
    <textarea style="width: 100%;" id='ruleContent' @bind="Description"></textarea>
</div>

@code {
    SfQueryBuilder<Employee> QueryBuilderObj;
    public string Description { get; set; } = string.Empty;
    private void getQuery()
    {
        Description = QueryBuilderObj.GetSqlFromRules();
    }
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }
}

Blazor 쿼리 생성기에서 규칙을 SQL 쿼리로 내보내기

거푸집

Blazor Query Builder는 유연성을 제공하기 위해 템플릿 지원을 제공합니다.템플릿에는 정적 HTML과 웹 컨트롤의 혼합이 포함될 수 있습니다.Blazor Query Builder는 다음과 같은 UI 사용자 정의를 지원합니다.

값 템플릿: 사용자 정의 규칙의 값 열.

열 템플릿: 전체 규칙을 사용자 정의합니다.

제목 템플릿: 사용자 정의 그룹의 제목입니다.

가치 템플릿

template 속성을 사용하여 사용자 정의 UI를 표시하여 규칙의value 열을 표시할 수 있습니다.다음 예에서는 ValueTemplate 속성을 사용하여 Country 필드의 값을 사용자 정의합니다.국가/지역 필드 값을 선택할 수 있는 드롭다운 목록 구성 요소가 표시됩니다.

<SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj">
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
        <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String">
            <QueryBuilderTemplates>
                <ValueTemplate>
                    <SfDropDownList TValue="string" Placeholder="Select Country" TItem="Country" DataSource="@CountriesList">
                        <DropDownListFieldSettings Text="Name"></DropDownListFieldSettings>
                        <DropDownListEvents TItem="Country" TValue="string" ValueChange="e => OnChange(e, context)"></DropDownListEvents>
                    </SfDropDownList>
                </ValueTemplate>
            </QueryBuilderTemplates>
        </QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>
<div style="margin: 10px 0 10px 0">
    <SfButton CssClass="e-primary" @onclick="getQuery">Get Query</SfButton>
</div>
<div style="width: 100%; margin-bottom: 10px;">
    <p>SQL Query</p>
    <textarea style="width: 100%;" id='ruleContent' @bind="Description"></textarea>
</div>

@code {
    SfQueryBuilder<Employee> QueryBuilderObj;
    public string Description { get; set; } = string.Empty;
    private void getQuery()
    {
        Description = QueryBuilderObj.GetSqlFromRules();
    }
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }
    public class Country
    {
        public string Name { get; set; }
    }
    public List<Country> CountriesList = new List<Country>() {
        new Country(){ Name = "England" },
        new Country(){ Name = "India" },
        new Country(){ Name = "Spain" },
        new Country(){ Name = "USA" }
    };
    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Country> args, RuleModel Rule)
    {
        Rule.Value = args.Value;
    }
}

Blazor Query Builder에서 규칙을 사용자 정의하는 값 열

열 템플릿

ColumnTemplate 속성을 사용하여 사용자 정의 UI를 렌더링하여 전체 규칙을 표시할 수 있습니다.다음 예에서는 ColumnTemplate 속성을 사용하여 Country 필드를 사용자 정의합니다.이 경우, 조작부호는 기본적으로 equal로 설정되어 있으며, 필드와 값열에 하단 목록 구성 요소를 보여 줍니다.

<SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj">
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
        <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String">
            <QueryBuilderTemplates>
                <ColumnTemplate>
                    <div class="e-rule-filter">
                        <SfDropDownList TItem="string" TValue="string" DataSource="QueryBuilderObj.Columns.Select(e => e.Field)" @bind-Value="context.Label">
                            <DropDownListEvents TItem="string" TValue="string" ValueChange="e => ChangeField(e, context)"></DropDownListEvents>
                        </SfDropDownList>
                    </div>
                    <div class="e-rule-value e-value">
                        <SfDropDownList TValue="string" Placeholder="Select Country" TItem="Country" DataSource="@CountriesList">
                            <DropDownListFieldSettings Text="Name"></DropDownListFieldSettings>
                            <DropDownListEvents TItem="Country" TValue="string" ValueChange="e => ChangeValue(e, context)"></DropDownListEvents>
                        </SfDropDownList>
                    </div>
                </ColumnTemplate>
            </QueryBuilderTemplates>
        </QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>
<div style="margin: 10px 0 10px 0">
    <SfButton CssClass="e-primary" @onclick="getQuery">Get Query</SfButton>
</div>
<div style="width: 100%; margin-bottom: 10px;">
    <p>SQL Query</p>
    <textarea style="width: 100%;" id='ruleContent' @bind="Description"></textarea>
</div>

@code 
{
    SfQueryBuilder<Employee> QueryBuilderObj;
    public string Description { get; set; } = string.Empty;
    private void getQuery()
    {
        Description = QueryBuilderObj.GetSqlFromRules();
    }
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }
    public class Country
    {
        public string Name { get; set; }
    }
    public List<Country> CountriesList = new List<Country>() {
        new Country(){ Name = "England" },
        new Country(){ Name = "India" },
        new Country(){ Name = "Spain" },
        new Country(){ Name = "USA" }
    };

    public void ChangeField(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, string> args, RuleModel Rule)
    {
        Rule.Field = args.Value;
        Rule.Label = args.Value;
        Rule.Type = "String";
    }
    public void ChangeValue(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Country> args, RuleModel Rule)
    {
        Rule.Value = args.Value;
        Rule.Operator = "equal";
    }
}

Blazor Query Builder에서 전체 규칙 사용자 정의

제목 템플릿

HeaderTemplate 속성을 사용하여 사용자 정의 UI를 렌더링하여 그룹의 제목을 표시할 수 있습니다.

<SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj">
    <QueryBuilderTemplates>
        <HeaderTemplate>
            <SfDropDownList ID="@context.ID" @bind-Value="DefaultCondition" TValue="string" TItem="Condition" CssClass="e-outline" Width="100px" DataSource="@ConditionsList">
                <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
                <DropDownListEvents TValue="string" TItem="Condition" ValueChange="e => conditionChange(e, context)"></DropDownListEvents>
            </SfDropDownList>
            <div class="e-header">
                <div class="e-content">
                    <SfButton Content="Add Group" CssClass="e-custom-button" @onclick="e => addGroup(e, context)"></SfButton>
                </div>
                <div class="e-content">
                    <SfButton Content="Add Condition" CssClass="e-custom-button" @onclick="e => addCondition(e, context)"></SfButton>
                </div>
                @if (context.ID.Split("_")[1].IndexOf("0") < 0)
                {
                    <div class="e-content">
                        <SfButton Content="Delete Group" CssClass="e-custom-button e-danger" @onclick="e => deleteGroup(e, context)"></SfButton>
                    </div>
                }
            </div>
        </HeaderTemplate>
    </QueryBuilderTemplates>
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
        <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>
<div style="margin: 10px 0 10px 0">
    <SfButton CssClass="e-primary" @onclick="getQuery">Get Query</SfButton>
</div>
<div style="width: 100%; margin-bottom: 10px;">
    <p>SQL Query</p>
    <textarea style="width: 100%;" id='ruleContent' @bind="Description"></textarea>
</div>

@code {
    SfQueryBuilder<Employee> QueryBuilderObj;
    private string groupID;
    public string DefaultCondition { get; set; } = "and";
    public string Description { get; set; } = string.Empty;
    private void getQuery()
    {
        Description = QueryBuilderObj.GetSqlFromRules();
    }
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }
    public class Condition
    {
        public string Text { get; set; }
        public string Value { get; set; }
    }
    public List<Condition> ConditionsList = new List<Condition>() {
        new Condition(){ Text = "AND", Value = "and" },
        new Condition(){ Text = "OR", Value = "or" }
    };

    private void conditionChange(ChangeEventArgs<string, Condition> args, HeaderTemplateModel model)
    {
        if (args.IsInteracted)
        {
            DefaultCondition = model.Condition = args.Value.ToLower();
        }
    }
    private void addGroup(MouseEventArgs args, HeaderTemplateModel model)
    {
        groupID = model.ID.Split("_")[1];
        QueryBuilderObj.AddGroup(new RuleModel { Condition = "or", Rules = new List<RuleModel>() { new RuleModel() } }, groupID);
    }
    private void addCondition(MouseEventArgs args, HeaderTemplateModel model)
    {
        groupID = model.ID.Split("_")[1];
        QueryBuilderObj.AddRule(new RuleModel(), groupID);
    }
    private void deleteGroup(MouseEventArgs args, HeaderTemplateModel model)
    {
        groupID = model.ID.Split("_")[1];
        QueryBuilderObj.DeleteGroup(groupID);
    }
}

<style>
    .e-custom-button {
        font-size: 13px;
    }
    .e-header {
        display: inline-block;
        float: right;
    }
    .e-content {
        display: inline-block;
        padding: 0 0 0 12px;
    }
</style>

Blazor Query Builder에서 그룹 제목 사용자 정의

그룹화 및 정렬

SortDirection 속성을 사용하여 열을 문자와 숫자순으로 정렬할 수 있습니다.이 속성은 기본값, 오름차순 또는 내림차순으로 설정할 수 있습니다.
columns 속성의 Category 속성을 사용하여 열을 그룹화할 수 있습니다.그룹의 기본 이름은 기타 필드입니다.
다음 코드 세션은 Blazor 쿼리 생성기에서 열의 그룹과 정렬을 보여 줍니다.

<SfQueryBuilder TValue="Employee" SortDirection="SortDirection.Descending">
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
        <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String" Category="Name"></QueryBuilderColumn>
        <QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String" Category="Name"></QueryBuilderColumn>
        <QueryBuilderColumn Field="BirthDate" Label="Birth Date" Type="ColumnType.Date" Category="Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date" Category="Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>

@code {
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime BirthDate { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }
}

Blazor Query Builder에서 내림차순으로 열 그룹화 및 정렬

결론

나는 당신이 지금 Blazor Query Builder 컨트롤의 주요 기능을 더욱 잘 이해하기를 바랍니다.이러한 기능이 있으면 당신은 데이터베이스에서 대량의 데이터를 쉽게 얻을 수 있다.이렇게 하면 많은 시간을 절약하고 업무 효율을 높일 수 있다.
자세한 내용은 Blazor Query Builderuser guide documentation 및 online demos를 참조하십시오.당신은 이 통제에 대해 또 어떤 기대를 가지고 있습니까?당신의 생각을 평론 부분에서 공유해 주세요.
만약 당신이 이미 Syncfusion 사용자라면, 이 컨트롤을 시험적으로 사용하기 위해 Essential Studio for Blazor's product setup 를 다운로드할 수 있습니다.그렇지 않으면 무료30-day trial를 다운로드할 수 있습니다.
저희support forum, Direct-Trac 또는 feedback portal로 연락 주십시오.우리는 언제든지 기꺼이 당신을 돕겠습니다!

Blazor 쿼리 생성기의 5대 기능

거르다

데이터 관리자 지원

수출입

거푸집

가치 템플릿

열 템플릿

제목 템플릿

그룹화 및 정렬

결론

관련 블로그

Reference

좋은 웹페이지 즐겨찾기