Question

我们要求将列值传递给jQuery构建器以获取过滤器下拉列表，而不是实际的列名称。

像

**FieldName**
City
CompanyName
CountryofBirth

而不是

City | CompanyName | CountryofBirth

根据该列值需要构建运算符下拉列表。

我们可以将列名作为字段传递给jquery构建器。但面临将列值传递给QueryBuider的问题。

你能帮我吗？

任何帮助都会有所帮助。

班级 - 员工信息

namespace Castle.DynamicLinqQueryBuilder.Samples.Models
{
    using System;
    using System.Collections.Generic;

    public partial class EmployeeInformation
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string City { get; set; }
    }
}

来自控制器的动作方法

  public ActionResult Index()
        {
            var jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
            ViewBag.FilterDefinition =
               JsonConvert.SerializeObject(typeof(EmployeeInformation).GetDefaultColumnDefinitionsForType(false), jsonSerializerSettings);
            ViewBag.Model = PersonBuilder.GetPeople();
            return View();
        }

索引 cshtml页面

<script type="text/javascript">

    $(function() {
        // Handler for .ready() called.
        var tableData = [];

        var filterDefinition = @Html.Raw(ViewBag.FilterDefinition);
        var customFilters = {
            condition: 'AND',
            rules: []
        };
        debugger;
        var jqueryQueryBuilder = $('#jquery-query-builder');
        var jqueryQueryBuilderDom = jqueryQueryBuilder.queryBuilder({
            plugins: ['bt-tooltip-errors', 'filter-description'],
            //allow_groups: 0,
            allow_empty: true,
            filters: filterDefinition,
            rules: customFilters,
            icons: {
                add_group: 'fa fa-plus-square',
                add_rule: 'fa fa-plus-circle',
                remove_group: 'fa fa-minus-square',
                remove_rule: 'fa fa-minus-circle',
                error: 'fa fa-exclamation-triangle',
                sortable: 'fa fa-exclamation-triangle'
            }
        });

        var convertArraysToCommaDelimited = function(obj) {
            debugger;
            if (obj != null) {
                if (obj.hasOwnProperty("value")) {
                    if( Object.prototype.toString.call( obj.value ) === '[object Array]' ) {
                        obj.value = obj.value.join(", ");
                    }
                }
                if (obj.hasOwnProperty("rules") && obj.rules != null) {
                    for (var i = 0; i < obj.rules.length; i++) {
                        convertArraysToCommaDelimited(obj.rules[i]);
                    }
                }
            }
        }
        var getRules = function() {
            debugger;
            try {
                var res =  jqueryQueryBuilder.queryBuilder('getRules');
                convertArraysToCommaDelimited(res);
                return res;
            } catch (ex) {
                //console.log(ex);
                return null;
            }
        }

        var buildTable;
        var filterData = function() {

            debugger;
            $.ajax({
                type: 'POST',
                url: "../Home/Index",
                data: JSON.stringify(getRules()),
                async:false,
                success: function (returnPayload) {

                    alert(JSON.stringify(getRules()));
                    localStorage.setItem('selectedTab', JSON.stringify(getRules()));
                    tableData = returnPayload;
                    buildTable();
                    console && console.log ("request succeeded");
                    var jsonString = JSON.stringify(getRules());
                    alert("This is main json"+jsonString);
                    //AddToDB(jsonString);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console && console.log ("request failed");
                },
                dataType: "json",
                contentType: "application/json",            
                processData: false,
                async: true
            });
        }

        $('#applyFilter').on('click', function() {
            debugger;
            filterData();
            selectedTab = localStorage.getItem('selectedTab');
            alert("JSON");
            alert(selectedTab);
        });
        buildTable = function() {
            debugger;
            var tbody = $('#data-table tbody'),
                props = ["FirstName", "LastName", "City"];
            tbody.empty();
            $.each(tableData, function(i, reservation) {
                var tr = $('<tr>');
                $.each(props, function(i, prop) {
                    $('<td>').html(reservation[prop]).appendTo(tr);  
                });
                tbody.append(tr);
            });
        };

        filterData();

    });

        function AddToDB()
        {
            alert('Hi')
            var jsonddd="ok";
            var testingJsonString= localStorage.getItem('selectedTab');

            alert(testingJsonString);
            debugger;
            $.ajax({

                url: "../Home/SaveFilterJson",
                type: 'POST',

                dataType: "json",
                data: {jsonvalue:testingJsonString},
                success: function (returnPayload) {

                    alert("For save Method"+JSON.stringify(getRules()));

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console && console.log ("request failed");
                    alert("Message Error"+thrownError);
                },



            });
        }

</script>
}

<div class="jumbotron">
    <h1>Dynamic Linq Query Builder Sample</h1>
    <p class="lead">Dynamically filter object collections based on complex queries at runtime.</p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Build Filters</h2>
        <div id="jquery-query-builder"></div>
        <button id="applyFilter">Apply Filter</button>

            @*@using (Html.BeginForm("SaveFilterJson","Home",FormMethod.Post))
            {
                <input type="submit" value="Save Filter" id="btnSaveFilter" />
            }*@


            <input type="submit" value="Save Filter" id="btnSaveFilter" onclick="AddToDB();" />

        <label id="lblError" ></label>

    </div>
    <div class="col-md-8">
        <h2>User Data</h2>
        <table id="data-table">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

</div>

如何将单列值传递给jquery builder动态下拉？

0 个答案: