Question

您好我是jquery的新手，我遇到了一个名为＆＃34; jquery-QueryBuilder＆＃34;的产品。请在下面找到它的网址

http://mistic100.github.io/jQuery-QueryBuilder/demo.html

我想在我的asp.net mvc project.can中实现它。任何人都可以帮我实现这个或提供一些有用的网址，如果有人使用这个

Answer 1

我刚刚将此组件与MVC一起使用。这些步骤可以帮助您入门。

在脚本中包含query-builder.standalone.min.js。注意，如果你把它放在BundleConfig中，请使用Bundle而不是ScriptBundle，因为ScriptBundle Minification似乎会导致错误。

bundles.Add(new Bundle("~/bundles/queryBuilder").Include("~/Content/js/query-builder.standalone.min.js"));

接下来，我创建了一个QueryBuilderSettings类，该类在序列化为JSON后保存控件的所有设置

public class QueryBuilderSettings
{
    public List<Filter> filters { get; set; }
    public bool allow_empty { get; set; }
    public int allow_groups { get; set; }
}

public class Filter
{
    public string id { get; set; }
    public string label { get; set; }
    [JsonConverter(typeof(StringEnumConverter))]
    public FilterType? type { get; set; }
    [JsonProperty(ItemConverterType = typeof(StringEnumConverter))]
    public List<FilterOperators> operators { get; set; }
    [JsonConverter(typeof(StringEnumConverter))]
    public InputType? input { get; set; }
    public List<object> values { get; set; }
}

public enum FilterType
{
    @string, 
    @integer, 
    @double, 
    @date, 
    @time, 
    @datetime,
    @boolean
}

public enum FilterOperators
{
    equal,
    not_equal,
    @in,
    not_in,
    less,
    less_or_equal,
    greater,
    greater_or_equal,
    between,
    not_between,
    begins_with,
    not_begins_with,
    contains,
    not_contains,
    ends_with,
    not_ends_with,
    is_empty,
    is_not_empty,
    is_null,
    is_not_null
}

public enum InputType
{
    text,
    textarea,
    radio,
    checkbox,
    select
}

这是一个简化版本，可让您了解是否需要其他设置，然后将其添加到此对象。

创建一个模型对象，其中包含设置字符串和返回输入的字符串。在控制器中，您可以创建设置并将它们序列化为JSON

public ActionResult Index()
{
    QueryScreen query = new QueryScreen();
    QueryBuilderSettings settings = new QueryBuilderSettings();
    settings.allow_empty = true;
    settings.allow_groups = 1;
    settings.filters = new List<Models.Filter>();
    settings.filters.Add(new Models.Filter() { id = "Sku", label = "Sku", type = FilterType.@string, operators = new List<FilterOperators>() { FilterOperators.equal, FilterOperators.not_equal, FilterOperators.begins_with, FilterOperators.not_begins_with } });
    settings.filters.Add(new Models.Filter() { id = "EnglishDesc", label = "English Desc", type = FilterType.@string, operators = new List<FilterOperators>() { FilterOperators.contains, FilterOperators.not_contains } });
    query.QuerySetup = Newtonsoft.Json.JsonConvert.SerializeObject(settings)

    return View(query);
}

您的视图现在需要将设置应用于控件

<script>
$(function () {
$(document).ready(function () {
    $('#builder').queryBuilder(@Html.Raw(Model.QuerySetup));
}) 

$("form").submit(function () {
        $('#Query').val(JSON.stringify($('#builder').queryBuilder('getRules', { get_flags: true }), undefined, 2));
        return true;
    })
});
</script>

<div class="col-md-12 col-lg-10 col-lg-offset-1">
    <div id="builder"></div>
    @using (Ajax.BeginForm("GetResults", "Home", new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "Post", UpdateTargetId = "results", LoadingElementId = "loading" }, new { @class = "form-inline", role = "form" }))
    {
        @Html.HiddenFor(m => m.Query)
        <button class="btn btn-primary" type="submit">Go</button>
    }
    <div id="results"></div>
    <div id="loading"></div>
</div>

同样在表单提交中，我将JSON字符串放入模型的hiddenFor字符串中。

然后在控制器中，您可以获取此JSON字符串并将其解析为c＃object

[HttpPost]
public PartialViewResult GetResults(QueryScreen screen)
{
    RuleOrGroup query = (RuleOrGroup)Newtonsoft.Json.JsonConvert.DeserializeObject(screen.Query, typeof(RuleOrGroup));
     //do some stuff return a view.
}

public class RuleOrGroup
{
    //Fields if it's a group
    public string condition { get; set; }
    public List<RuleOrGroup> rules { get; set; }

    //Fields if it's a Rule
    public string id { get; set; }
    public string field { get; set; }
    public FilterType type { get; set; }
    public string input { get; set; }
    public FilterOperators @operator { get; set; }
    public string value { get; set; }

    public bool IsAGroup { get { return condition != null; } }
}

希望对于偶然发现这一点的人有所帮助，因为我无法找到任何与MVC一起使用它的例子。如果它是一个构造不良的答案，也要善待它，很难知道要投入多少以及可以削减什么。

Answer 2

这是我的实施：

QueryBuilderSettings.cs类

using System;
using System.Diagnostics;
using System.Collections.Generic;
using System.Linq;
using System.Text;

[Serializable]
public class QueryBuilderSettings {  
    public List<QueryBuilderFilter> filters { get; set; }
    public List<string> plugins { get; set; }

    public QueryBuilderSettings()
    {
        this.filters = new List<QueryBuilderFilter>();
        this.plugins = new List<string>();
    }
}

public class QueryBuilderFilter
{
    public string id { get; set; }
    public string label { get; set; }
    public string type { get; set; }
    public List<string> operators { get; set; }
    public string input { get; set; }
    //public List<object> values { get; set; }
    public Dictionary<string, string> values { get; set; }

    public QueryBuilderFilter()
    {

    }

    public QueryBuilderFilter(string id, string label, QueryBuilderDataType type, List<QueryBuilderFilterOperators> ops, QueryBuilderInputType input, Dictionary<string, string> values)
    {
        this.id = id;
        this.label = label;
        this.type = type.ToString();
        this.operators = new List<string>();
        foreach (QueryBuilderFilterOperators op in ops)
        {
            this.operators.Add(op.ToString());
        }
        this.input = input.ToString();
        this.values = values;
    }

    public static QueryBuilderDataType GetQueryBuilderDataType(string PropertyInputType)
    {
        QueryBuilderDataType QBFilterType;

        switch(PropertyInputType)
        {
            case "bool":
                QBFilterType = QueryBuilderDataType.boolean;
                break;
            case "DateTime":
                QBFilterType = QueryBuilderDataType.datetime;
                break;
            case "Date":
                QBFilterType = QueryBuilderDataType.date;
                break;
            case "Time":
                QBFilterType = QueryBuilderDataType.time;
                break;
            case "double":
                QBFilterType = QueryBuilderDataType.@double;
                break;
            case "int":
                QBFilterType = QueryBuilderDataType.integer;
                break;
            case "enum_dropdown":
            case "dropdown":
            case "html":
            case "stringChar":
            case "stringLine":
                QBFilterType = QueryBuilderDataType.@string;
                break;
            default:
                QBFilterType = QueryBuilderDataType.@string;
                break;
        }

        return QBFilterType;
    }

    public static QueryBuilderInputType GetQueryBuilderInputType(string PropertyType)
    {
        QueryBuilderInputType QBInputType;

        switch (PropertyType)
        {
            case "bool":
                QBInputType = QueryBuilderInputType.radio;
                break;

            case "enum":
                QBInputType = QueryBuilderInputType.select;
                break;

            case "DateTime":
            case "double":
            case "int":
            case "string":
                QBInputType = QueryBuilderInputType.text;
                break;
            default:
                QBInputType = QueryBuilderInputType.text;
                break;
        }

        return QBInputType;
    }

    public static List<QueryBuilderFilterOperators> GetQueryBuilderFilterOperator(QueryBuilderInputType? QBInputType )
    {
        List<QueryBuilderFilterOperators> QBFilterOps = new List<QueryBuilderFilterOperators>();
        switch (QBInputType)
        {
            case QueryBuilderInputType.text:
                QBFilterOps = DefaultTextOperators;
                break;
            case QueryBuilderInputType.textarea:
                QBFilterOps = DefaultTextAreaOperators;
                break;
            case QueryBuilderInputType.radio:
                QBFilterOps = DefaultRadioOperators;
                break;
            case QueryBuilderInputType.checkbox:
                QBFilterOps = DefaultCheckBoxOperators;
                break;
            case QueryBuilderInputType.select:
                QBFilterOps = DefaultSelectOperators;
                break;
            case null:
                QBFilterOps = DefaultBlankOperators;
                break;
            default:
                QBFilterOps = DefaultAllOperators;
                break;
        }

        return QBFilterOps;
    }

//为方便起见，列出了一些默认操作符

public static List<QueryBuilderFilterOperators> DefaultTextOperators = new List<QueryBuilderFilterOperators>
{
    QueryBuilderFilterOperators.equal,
    QueryBuilderFilterOperators.not_equal,
    QueryBuilderFilterOperators.@in,
    QueryBuilderFilterOperators.not_in,
    QueryBuilderFilterOperators.less,
    QueryBuilderFilterOperators.less_or_equal,
    QueryBuilderFilterOperators.greater,
    QueryBuilderFilterOperators.greater_or_equal,
    QueryBuilderFilterOperators.between,
    QueryBuilderFilterOperators.not_between,
    QueryBuilderFilterOperators.begins_with,
    QueryBuilderFilterOperators.not_begins_with,
    QueryBuilderFilterOperators.contains,
    QueryBuilderFilterOperators.not_contains,
    QueryBuilderFilterOperators.ends_with,
    QueryBuilderFilterOperators.not_ends_with,
    QueryBuilderFilterOperators.is_empty,
    QueryBuilderFilterOperators.is_not_empty,
    QueryBuilderFilterOperators.is_null,
    QueryBuilderFilterOperators.is_not_null
};

    public static List<QueryBuilderFilterOperators> DefaultTextAreaOperators = new List<QueryBuilderFilterOperators>
{
    QueryBuilderFilterOperators.equal,
    QueryBuilderFilterOperators.not_equal,
    QueryBuilderFilterOperators.@in,
    QueryBuilderFilterOperators.not_in,
    QueryBuilderFilterOperators.less,
    QueryBuilderFilterOperators.less_or_equal,
    QueryBuilderFilterOperators.greater,
    QueryBuilderFilterOperators.greater_or_equal,
    QueryBuilderFilterOperators.between,
    QueryBuilderFilterOperators.not_between,
    QueryBuilderFilterOperators.begins_with,
    QueryBuilderFilterOperators.not_begins_with,
    QueryBuilderFilterOperators.contains,
    QueryBuilderFilterOperators.not_contains,
    QueryBuilderFilterOperators.ends_with,
    QueryBuilderFilterOperators.not_ends_with,
    QueryBuilderFilterOperators.is_empty,
    QueryBuilderFilterOperators.is_not_empty,
    QueryBuilderFilterOperators.is_null,
    QueryBuilderFilterOperators.is_not_null
};

public static List<QueryBuilderFilterOperators> DefaultRadioOperators = new List<QueryBuilderFilterOperators>
{
    QueryBuilderFilterOperators.equal,
    QueryBuilderFilterOperators.not_equal,
    QueryBuilderFilterOperators.is_empty,
    QueryBuilderFilterOperators.is_not_empty,
    QueryBuilderFilterOperators.is_null,
    QueryBuilderFilterOperators.is_not_null
};


public static List<QueryBuilderFilterOperators> DefaultCheckBoxOperators = new List<QueryBuilderFilterOperators>
{
    QueryBuilderFilterOperators.@in,
    QueryBuilderFilterOperators.not_in,
    QueryBuilderFilterOperators.is_empty,
    QueryBuilderFilterOperators.is_not_empty,
    QueryBuilderFilterOperators.is_null,
    QueryBuilderFilterOperators.is_not_null
};

    public static List<QueryBuilderFilterOperators> DefaultSelectOperators = new List<QueryBuilderFilterOperators>
{
    QueryBuilderFilterOperators.equal,
    QueryBuilderFilterOperators.not_equal,
    QueryBuilderFilterOperators.is_empty,
    QueryBuilderFilterOperators.is_not_empty,
    QueryBuilderFilterOperators.is_null,
    QueryBuilderFilterOperators.is_not_null
};

    public static List<QueryBuilderFilterOperators> DefaultBlankOperators = new List<QueryBuilderFilterOperators>();

    public static List<QueryBuilderFilterOperators> DefaultAllOperators = new List<QueryBuilderFilterOperators>
{
    QueryBuilderFilterOperators.equal,
    QueryBuilderFilterOperators.not_equal,
    QueryBuilderFilterOperators.@in,
    QueryBuilderFilterOperators.not_in,
    QueryBuilderFilterOperators.less,
    QueryBuilderFilterOperators.less_or_equal,
    QueryBuilderFilterOperators.greater,
    QueryBuilderFilterOperators.greater_or_equal,
    QueryBuilderFilterOperators.between,
    QueryBuilderFilterOperators.not_between,
    QueryBuilderFilterOperators.begins_with,
    QueryBuilderFilterOperators.not_begins_with,
    QueryBuilderFilterOperators.contains,
    QueryBuilderFilterOperators.not_contains,
    QueryBuilderFilterOperators.ends_with,
    QueryBuilderFilterOperators.not_ends_with,
    QueryBuilderFilterOperators.is_empty,
    QueryBuilderFilterOperators.is_not_empty,
    QueryBuilderFilterOperators.is_null,
    QueryBuilderFilterOperators.is_not_null
};
}

//枚举

public enum QueryBuilderDataType
{
    @string, 
    @integer, 
    @double, 
    @date, 
    @time, 
    @datetime,
    @boolean
}

public enum QueryBuilderFilterOperators
{
    equal,
    not_equal,
    @in,
    not_in,
    less,
    less_or_equal,
    greater,
    greater_or_equal,
    between,
    not_between,
    begins_with,
    not_begins_with,
    contains,
    not_contains,
    ends_with,
    not_ends_with,
    is_empty,
    is_not_empty,
    is_null,
    is_not_null
}

public enum QueryBuilderInputType
{
    text,
    textarea,
    radio,
    checkbox,
    select
}

的WebService

[WebMethod(Description = "Get Query Builder Filter Option")]
    public QueryBuilderSettings GetQueryBuilderFilterOption()
    {
        string QBID;
        string QBLabel;
        string propertyInputType;
        QueryBuilderDataType QBDataType;
        List<QueryBuilderFilterOperators> QBFilterOperators;
        string propertyType;
        QueryBuilderInputType QBInputType;
        //List<object> dropdownValues = new List<object>();
        Dictionary<string, string> dropdownValues = new Dictionary<string, string>();

        QueryBuilderSettings settings = new QueryBuilderSettings();

        // plugins
        settings.plugins.Add("bt-tooltip-errors");
        settings.plugins.Add("not-group");
        settings.plugins.Add("sortable");

        // filters
        List<string> PropertyNames = GetPropertyList(); 

        foreach(string propertyName in PropertyNames)
        {
            QBID = propertyName;
            QBLabel = PropertyTitle[propertyName];
            propertyInputType = GetPropertyInputType(propertyName);
            QBDataType = QueryBuilderFilter.GetQueryBuilderDataType(propertyInputType);
            propertyType = GetPropertyType(propertyName);
            QBInputType = QueryBuilderFilter.GetQueryBuilderInputType(propertyType);
            QBFilterOperators = QueryBuilderFilter.GetQueryBuilderFilterOperator(QBInputType);

            dropdownValues = GetDropdownDictionary(propertyName);

            settings.filters.Add(new QueryBuilderFilter(QBID, QBLabel, QBDataType, QBFilterOperators, QBInputType, dropdownValues));
            //dropdownValues =  new List<object>();
            dropdownValues =  new Dictionary<string, string>(); //Clear the Dictionary or it will add up all dropdown from different properties
        }

        return settings;
    }

从网页MyPage.cshtml

调用它

<script src="../../Scripts/jQuery.extendext-master/jQuery.extendext.js"></script>
<script src="../../Scripts/jquery.query-builder/js/query-builder.min.js"></script>
<script src="../../Scripts/jquery.query-builder/js/query-builder.standalone.min.js"></script>

<div class="query-builder form-inline">
        <div id="builder"></div>
</div>
<script type="text/javascript">
    $(function () {
        var settings=AjaxFromWebService("../../WS/YourWebService.ASMX/GetQueryBuilderFilterOption", "");

        console.log(settings); // you can see the object when you press F12 on your web browser

        $(document).ready(function () {
            $('#builder').queryBuilder(settings);
        })
    });

    function AjaxFromWebService(Url,JsonData){
        var returnData="";
        $.ajax({
            type: "post",
            contentType: "application/json; charset=utf-8",
            url: Url,
            data: JsonData,
            dataType: "json",
            async:false,
            success: function (result) {
                if(result.d){
                    returnData=result.d;
                } else {
                }
            },
            error: function () {
                BootstrapDialog.alert({message:"Ajax failed",type:BootstrapDialog.TYPE_DANGER});
            }
        });
        return function(){
            return returnData;
        }();
    }
</script>

jquery-Query构建器用法

2 个答案: