We_Relese/App/Relese/Views/Shared/Query/_QueryModal.cshtml

@using System.Linq;
@using Abp.Extensions
@using WeApp.Helpers
@using WeApp.Views.Shared.Modals
@using WeApp.Views.Shared.Query

@model QueryViewModel
@{
    string modalId = Model.ModalId ?? "";
    string submit = Model.SubmitEventName ?? "";
    //string click = Model.ItemClickEventName ?? "";
    string dbClick = Model.ItemDbClickEventName ?? "";
    string width = Model.ModalWidth > 0 ? "min-width:" + Model.ModalWidth + "px" : "";
    QueryTreeSearch treeSearch = Model.QueryTreeSearch;
    string tField = "", selectUrl = "", tSelectFiledName = "";
    int tFType = 0; int tExpType = 0;
    if (treeSearch != null)
    {
        tField = treeSearch.Field;
        tFType = treeSearch.FType;
        tExpType = treeSearch.EType;
        selectUrl = treeSearch.SelectUrl;
        tSelectFiledName = treeSearch.SelectFieldName;
    }
    string searBindFunc = Model.SearchBindFunc;
    string isAddBind = "false";
    if (!searBindFunc.IsNullOrEmpty())
    {
        isAddBind = "true";
    }
}

<!-- QUERY-MODAL  @(Model.ModalId)  START-->
<style>
    .query-modal.KeyWords {
        text-decoration: none;
    }
</style>
<section>
    <div class="modal fade query-modal" id="@modalId" role="dialog" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog" role="document" style="@width">
            <div class="modal-content">

                @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel(Model.ModalName, ""))
                <div class="modal-body container-fluid" style="padding: 5px">
                    <div id="tree-box" class="row">
                        @{
                            string colClass = "col-md-12";
                            if (treeSearch != null)
                            {
                                colClass = "col-md-9";
                                <div class="col-md-3" style="padding-right: 0;">
                                    <div style="height: 100%; padding: 5px 0;">
                                        <div id="treeView_@modalId" class="iwb-treeView"></div>
                                    </div>
                                </div>
                            }
                        }

                        <div class="@colClass" style="">
                            <div class="table-box iwb-bootstrap-table">
                                <div class="btn-toolbar" id="query_tableTool" role="toolbar" aria-label="Toolbar with button groups">
                                    <div class="col-sm-12 pull-left" style="padding: 0">
                                        <form class="row">
                                            @if (Model.QueryItems != null && Model.QueryItems.Any())
                                            {
                                                string colMd = Model.QueryItems.Count(a => a.IsSearch) > 2 ? "col-md-4" : "col-md-6";
                                                int i = 0;
                                                foreach (var item in Model.QueryItems)
                                                {
                                                    if (item.IsSearch)
                                                    {
                                                        i++;
                                                        int fieldType = (int)item.FieldType, expType = (int)item.ExpType;
                                                        <div class="@colMd" style="margin-bottom: 5px; @(item.HiddenStr)">

                                                            <div class="input-group input-group-sm">
                                                                <div class="input-group-prepend" style="min-width: 75px">
                                                                    <span class="input-group-text" style="width: 100%;text-align: right">@(item.Name)</span>
                                                                </div>
                                                                @if (item.SelectStr.IsEmpty())
                                                                {
                                                                    <input id="@(modalId)-@(item.Key)" @(item.DisabledStr) name="@(modalId)-@(item.Key)" class="form-control KeyWords" data-field="@(item.Key)" data-ftype="@(fieldType)" data-etype="@(expType)" placeholder="@(L("SearchPlaceholder"))" autocomplete="off" type="text" />
                                                                }
                                                                else
                                                                {
                                                                    <select id="@(modalId)-@(item.Key)" @(item.DisabledStr)  name="@(modalId)-@(item.Key)" class="form-control KeyWords @(item.SelectTreeClass)" data-field="@(item.Key)" data-ftype="@(fieldType)" data-etype="@(expType)" placeholder="@(L("SearchPlaceholder"))" autocomplete="off" style="width: calc(100% - 108px);min-width: calc(100% - 108px)">
                                                                        @(Html.Raw(item.SelectStr))
                                                                    </select>
                                                                }
                                                                <div class="input-group-append search-icon" style="min-width: 30px;" onclick="@(modalId)Refresh();">
                                                                    <span class="input-group-text"><i class="fa fa-search"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    }
                                                }
                                            }
                                        </form>
                                    </div>
                                </div>
                                <table data-url="@Model.QueryUrl"
                                       data-striped="true" data-id-field="id" data-unique-id="id"
                                       data-method="post"
                                       data-side-pagination="server"
                                       data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
                                       data-cache="false"
                                       data-pagination="true" data-page-size="10" data-page-number="1" data-page-list="[10,20,50]" data-pagination-detail-h-align="right" data-pagination-h-align="left"
                                       data-query-params="QueryParams_@(modalId)"
                                      
                                       data-click-to-select="true"
                                       data-single-select="@(Model.IsMultiple?"false":"true")">
                                    <thead>
                                        <tr class="row">
                                            @if (Model.QueryItems != null && Model.QueryItems.Any())
                                            {
                                                <th data-field="state" data-checkbox="true"></th>
                                                foreach (var item in Model.QueryItems)
                                                {
                                                    var formatter = string.IsNullOrEmpty(item.Formatter) ? "" : "data-formatter=\"" + item.Formatter + "\"";
                                                    <th data-align="center" data-field="@item.Key" @Html.Raw(formatter)>@item.Name</th>

                                                }
                                            }
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer" style="text-align: center;padding-top: 10px">
                    <button type="button" class="btn btn-sm  btn-default waves-effect" data-dismiss="modalProduct" style="min-width: 100px;" onclick="Clear_@(modalId)()">@(L("Clear"))</button>
                    <button type="button" class="btn btn-sm  btn-iwb save-btn waves-effect" style="min-width: 100px;" onclick="Submit_@(modalId)()">@(L("OK"))</button>
                </div>

            </div>
        </div>
    </div>
</section>

@using (Html.BeginScripts())
{
    <!-- QUERY-MODAL-SCRIPT  @(Model.ModalId)  START-->
<script>
        var $@(modalId)_table = $("#@modalId table"), _searchList_@modalId = [], _searchKeyWord_@modalId = "";
        $("#@modalId").off('show.bs.modal').on('show.bs.modal', function () {
            $("#@modalId form").find(".KeyWords").val("");
            $("#@modalId form").find('select:not(.select2tree)').select2();
            $("#@modalId form").find('select.select2tree').select2tree();
            $("#@modalId form").find('select').each(function () {
                var w = $(this).css('min-width');
                $(this).next('span.select2').css('width', w );
            });
            if ("@(tField)" && "@(tField)".length > 0){
                $('#treeView_@modalId').iwbTreeView({
                    url: '@(selectUrl)',
                    onNodeSelected: function(e, d) {
                        _searchKeyWord_@(modalId) = d["@(tSelectFiledName)"];
                        //console.log("_searchKeyWord_", _searchKeyWord_@(modalId));
                        $@(modalId)_table.iwbTable('refresh', true);
                    },
                    onNodeUnselected: function() {
                        _searchKeyWord_@(modalId) = "";
                        $@(modalId)_table.iwbTable('refresh', true);
                    },
                    table:$@(modalId)_table
                });
            }
            @(modalId)Search();
        });
        function @(modalId)Refresh() {
            $@(modalId)_table.iwbTable('refresh', true);
        }
        function @(modalId)Search() {
            $@(modalId)_table.iwbTable("destroy");
            SearchList_@(modalId)();
            LoadTable({
                table: $@(modalId)_table,
                height: 500,
                onDblClickRow: DbClickRow_@(modalId),
                queryParams: QueryParams_@(modalId),
                multipleSelect:@(Model.IsMultiple?"true":"false")
            });
        }
        function QueryParams_@(modalId)(params) {
            SearchList_@(modalId)();
            return {
                MaxResultCount: params.limit,
                SkipCount: params.offset,
                sort: params.sort,
                sortOrder: params.order,
                SearchList: _searchList_@modalId,
                KeyField: "@(tField)",
                FieldType: "@(tFType)",
                ExpType: "@(tExpType)",
                KeyWords: _searchKeyWord_@modalId
            };
        }

        function SearchList_@(modalId)() {
            _searchList_@modalId = [];
            if (@(isAddBind)) {
                _searchList_@(modalId).push(@(searBindFunc));
            }
            $("#@modalId form").find(".KeyWords").each(function() {
                var $this = $(this), keyWords = $this.val();
                if (keyWords) {
                    searchList.push({
                        KeyWords: keyWords,
                        KeyField: $this.data('field'),
                        FieldType: $this.data('ftype'),
                        ExpType: $this.data('etype')
                    });
                }
            });
        }

        function Clear_@(modalId)() {
            Submit_@(modalId)(false, true);
        }

        function Submit_@(modalId)(rows, isClear) {
            //console.log('@(modalId)submit', rows, isClear);
            @{
                string str;
                if (string.IsNullOrEmpty(submit))
                {
                    str = " var $target,value='', rows =rows|| $" + modalId + "_table.iwbTable(\"getSelections\");\r\n";
                    str += "if (rows) {\r\n";

                    int i = 0;
                    foreach (var targetFields in Model.TargetFields)
                    {
                        str += "if(!isClear){\r\n";
                        if (Model.IsMultiple)
                        {
                            str += "value='';\r\n";
                            str += "rows.forEach(function(row) {\r\n";
                            str += "value += (value===''?'':',')+(row." + Model.OriginFields[i] + " ? row." + Model.OriginFields[i] + ":'');\r\n";
                            str += "});\r\n";
                        }
                        else
                        {
                            str += "var row=Array.isArray(rows)? rows[0]:rows;\r\n ";
                            str += "value = row && row." + Model.OriginFields[i] + " ? row." + Model.OriginFields[i] + ":'';\r\n";

                        }
                        str += "}\r\n";
                        str += "console.log('" + modalId + "',value,'"+ string.Join(",", targetFields) + "');\r\n";

                        foreach (var targetFiled in targetFields)
                        {
                            str += "\r\n$target = $(window.queryModalTarget + ' " + targetFiled + "');\r\n";
                            str += "if ($target) {\r\n";
                            str += "$target.val(value);\r\ntry{\r\nif ($target.is('select')) {$target.select2();}\r\n}catch (e) {\r\n} \r\n}\r\n";
                        }
                        i++;
                    }

                    str += " } else\r\n" +
                           "{\r\n" +
                           "abp.message.warn(abp.localization.localize(\"ChooseOneToOp\"));\r\n" +
                           "}\r\n";

                }
                else
                {
                    str = submit + "(row);\r\n";
                }
            }
            @Html.Raw(str)
            $("#@modalId").modal('hide');
        }

        function DbClickRow_@(modalId)(row) {
            row = row || {};
            @{
                str = Model.IsMultiple ? "" : string.IsNullOrEmpty(dbClick) ? "Submit_" + modalId + "(row)" : dbClick + "(row);";
            }

            @Html.Raw(str)
        }

        @*function ClickRow_@(modalId)() {
        "use strict";
        @{
            str = "";
            if (!string.IsNullOrEmpty(click))
            {
                str = click + "();";
            }
        }
        @Html.Raw(str)
    }*@

</script>
    <!-- QUERY-MODAL-SCRIPT  @(Model.ModalId)  END-->
}
<!-- QUERY-MODAL  @(Model.ModalId)  END-->