jquery-Query构建器用法

Question

嗨,我是jquery的新手,我遇到了一个名为"jquery-QueryBuilder"的产品,请在下面找到它的URL

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字符串放入Model上的hiddenFor字符串中.

然后在控制器中,您可以获取此JSON字符串并将其解析为ac#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

这是一个简单的小提琴。

https://jsfiddle.net/gbegley/k2f46297/

请注意依赖关系，收集这些依赖关系并将其提供给用户可能会有点麻烦。

<span id="getsql">Get SQL</span>

<br/>
<br/>
<div id="queryBuilderGoesHere"></div>
<div id="sql"></div>
<script>
$("#getsql").addClass("ltblue");

var myFilters = [{
    id: 'column1',
    label: 'Column 1',
    type: 'string'
}, {
    id: 'column2',
    label: 'Column 2',
    type: 'double'
}, {
    id: 'column3',
    label: 'Column 3',
    type: 'boolean'
}];
$("#queryBuilderGoesHere").queryBuilder({
    filters: myFilters
});
$("#getsql").on('click', function () {
    var sqlob = $("#queryBuilderGoesHere").queryBuilder("getSQL", false);
    $("#sql").text(sqlob.sql);
});
</script>