php - 无法使用模态内的表单在 JSGrid 上过滤和显示数据

Question

我正在为表格使用 JSGrid。 Jsgrid documentation关联。在表格上方，我制作了一个名为“过滤器”的按钮。我想根据Filter_form数据过滤Jsgrid表的数据。我一直在通过在 Filter_form(引导模式)内的“提交”按钮上调用 onclick 函数来实现这一点。 ajax 代码似乎无法正常工作。还有如何捕获从 PHP 后端文件返回的数据并在 Jsgrid 表中仅显示过滤后的数据。伙计们请帮我解决这个问题。非常感谢。

Filter_form(引导模式)的 HTML 代码

    <!-- Filter Modal Start-->
<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="Filter data dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h1>
                    Filter Data
                </h1>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
            <div class="container-fluid">

                <form class="form-inline" role="form" id="filter_form">

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="column_name">Column Name</label>
                                <select class="form-control" id="column_name" name="column_name" aria-label="Column Name" style="width:100%;">
                                    <option value="Standard Name">Standard Name</option>
                                    <option value="Status">Status</option>
                                </select>
                          </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="condition">Condition</label>
                                <select class="form-control" id="condition" name="condition" aria-label="condition" style="width:100%;">
                                    <option value="contains">contains</option>
                                    <option value="start with">start with</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="keyword">Keyword</label>
                                    <input type="text" class="form-control" id="keyword" name="keyword" placeholder="Enter keyword" aria-label="keyword" style="width:100%;">
                            </div>
                        </div>                  



                <div class="col-md-12" style="padding-top: 2rem;">
                <button type="submit" class="btn btn-primary submitBtn" onclick="submitFilterForm()">Submit</button>
                </form>
                </div>
               </div>

            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--Filter Modal End-->

在提交按钮上调用 AJAX 函数

    function submitFilterForm(){
    var form = $("#filter_form");
    var column_name = $("#column_name").val();
    var condition = $('#condition').val();
    var keyword = $('#keyword').val();
    if(keyword == '' ){
        alert('Please enter keyword.');
        $('#keyword').focus();
        return false;
    }else{
        $.ajax({
            type:'POST',
            url:'submit_filterform.php',
            data:form.serialize(),
            beforeSend: function() {
                $('.submitBtn').attr("disabled","disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success:function(data){
                alert(data.message);
                if(JSON.stringify(data) == 'filtered'){
                    $('#keyword').val('');
                    $('.submitBtn').removeAttr("disabled");
                    $('.modal-body').css('opacity', '');
                    //$("#jsGrid").val(data);
                    $("#jsGrid").jsGrid({
                       onDataLoaded: function(args) {
                          // data is loaded, so do whatever you want, here you have also access to loaded data with args.data
                          alert('Hi I have loaded again');
                       }
                    });
                    //$('.modal').hide();
                    //$("#jsGrid").jsGrid("loadData");
                }else{
                    //$('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                    alert('Some error occurred while filtering data, please refresh page and try again.');
                }
            }
        });
    }
}

PHP 后端查询

    switch($_SERVER["REQUEST_METHOD"]) {

    case "POST":
        $result = sqlsrv_query($con,"SELECT * FROM report_standard WHERE ".$_POST['column_name']." LIKE '%".$_POST['keyword']."%'");
        //$params = array($_POST['column_name'],$_POST['keyword']);
        if ($result == false) {

            echo "no data";
            exit();
        }
        else {
            while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
                $data[] = $row;
            }

            $finalArr['data'] = $data;
            $finalArr['itemsCount'] = count($data);
            $finalArr['message'] = 'filtered';
            echo json_encode($finalArr);
        }
        break;

}

Answer 1

我终于找到了解决方案。请在下面找到更改。

AJAX Function called on submit button

function submitFilterForm() {
    var form = $("#filter_form");
    var column_name = $("#column_name").val();
    var condition = $('#condition').val();
    var keyword = $('#keyword').val();
    if (keyword == '') {
        alert('Please enter keyword.');
        $('#keyword').focus();
        return false;
    } else {
        $("#filterModal").modal("hide");

        //Simply load the jsGrid again on the same id
        $("#jsGrid").jsGrid({
            height: "400px",
            width: "100%",
            editing: true,
            inserting: true,
            filtering: false,
            paging: true,
            autoload: true,
            pageSize: 15,
            pageButtonCount: 5,
            rowNum: 10,
            controller: {

                loadData: function(filter) {
                    return $.ajax({
                        type: "POST",
                        url: "../submit_filterform.php",
                        data: form.serialize(),
                        dataType: "json"
                    }).then(function(result) {
                        console.log(result);
                        return result.data;
                    });

                },
                fields: [
                    //Fields as required based on the data
                ]
            }
        });
    }
}