工具栏上带有自动完成功能的 kendoui Grid？

Question

更新： 我尝试并花了很多时间来解决这个问题，最后问题解决了。 但最初非常感谢 OnaBai 和帮助我走到今天这一步的同事。

现在我被困在这里了。

我输入用户名，它会在下拉菜单中显示，按 TAB 或 ENTER 后，它会在网格中显示结果。 结果仅在来自页面“1”的情况下显示在网格中，但如果来自页面“2”或任何其他页面，则不显示结果。

这是它的工作原理：

但是当我搜索不在第 1 页上的其他用户时，它不会显示在网格中显示其他用户。相反，我得到空网格。

FireBug 截图：

这是我对代码进行了更多更改后的更新代码。：

  <?php
/*foreach($users_list_data->result() as $row){
    echo $row->Username."<br />";
}*/
?>

<div id="grid"></div>
    <div id="details" />
    <div class="second_column_content_container">
    </div>



<script>

function create_user() {

    var entryform = $("#insert_user_info");
    $.ajax({
        type : 'POST',
        url : '<?php echo base_url(); ?>/index.php/user_management/manage_users/createUser',
        data : entryform.serialize(),
        success : function(response) {
            $(".second_column").html(response);
        }
    });
}

function create_user_form() {


    $.ajax({
        type : 'POST',
        url : '<?php echo base_url(); ?>/index.php/user_management/manage_users/load_user_form',

        success : function(response) {
            $(".second_column").html(response);
        }
    });
}

function onChange(arg) {



        var selected = "";
        var grid = this;

        grid.select().each(function() {
            var dataItem = grid.dataItem($(this));
            selected = dataItem.Username;
        });

  $.ajax({
        type: "POST",
        url: "<?php echo base_url()?>index.php/user_management/manage_users/get_user_groups/"+selected,

        beforeSend: function(){


            $("#pre_image").attr("src","http://localhost/zorkif_new/images/pre.gif");

        },

        success: function(output_string) {


            $('.data_column_a').html(output_string);

        }
    });
 }


    var wnd, detailsTemplate;
    $(document).ready(function(){
        var serverBaseUrl = "<?php echo base_url(); ?>";
        $("#grid").kendoGrid({
            dataSource:{
                serverPaging: true,
                transport: {
                    read: serverBaseUrl + "index.php/user_management/manage_users/list_view/",
                    update: {
                        url: serverBaseUrl + "index.php/user_management/manage_users/userUpdate/",
                        type: "POST"
                    }
//                    destroy: {
//                        url: serverBaseUrl + "index.php/user_management/manage_users/userDelete/",
//                        dataType: "jsonp"
//                    }
                    //update: "<?php echo base_url() ?>index.php/user_management/manage_users/list_view/"
                },
                error: function(e) {
                    alert(e.responseText);
                },
                schema:{
                    data: "data",
                    total: "total",
                    model: {
                        id: "UserID",
                        fields: {
                            FirstName: { editable: true },
                            LastName: { validation: { required: true} },
                            MiddleNames:{validation:{required:true}}
                        }
                    }
                },
                pageSize:5

            },
            toolbar: kendo.template($("#toolbarTemplate").html()),
            scrollable: true,

            selectable: "row",
            sortable: true,
            filterable: true,
            pageable: {
                input: true,
                numeric: false
            },
            columns: [
                {
                    field: "UserID",
                    hidden:true
                },
                {
                    field: "Username",
                    title:"Username"
                },
                { field: "FirstName",
                    title:"First Name"
                },
                {field:"MiddleNames"},
                {field:"LastName"},
                {field:"City"},
                {field:"Email"},
                //{field:"Actions"},
                //{command: { text: "Delete", click: showDetails }, title: " ", width: "140px"},
                {command: { text: "Details", click: redirectToPage }, title: " ", width: "140px" },
                { command: { text: "Edit", click: redirectToEditPage }, title: "&nbsp;", width: "140px" }
            ],
            change: onChange,
            editable: "popup"
        });
        $("#users").kendoAutoComplete({
            minLength: 3,
            dataTextField: "Username",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        type: "GET",
                        dataType: "json",
                        contentType:'application/json; charset=utf-8',
                        url: serverBaseUrl + "index.php/user_management/manage_users/search_user/",
                        data: function (arg){
                            //alert(arg);
                            //alert({Username:autocompleteUsers.data("kendoAutoComplete").value});
                               return {Username : $("#users").data("kendoAutoComplete").value()};
                            //return $("#users").data("kendoAutoComplete").value();
                            }
                    }
                }
            },
            change: onChangeAutoComplete
        });

        function onChangeAutoComplete(){
            var value = this.value();
            var grid = $('#grid');
            if (value) {
                grid.data("kendoGrid").dataSource.filter({ field: "Username", operator: "Contains", value: value });
            } else {
                grid.data("kendoGrid").dataSource.filter({});
            }
        }
        /*$("#users").kendoAutoComplete({
            minLength: 3,
            dataTextField: "Title",
            //JSON property name to use
            dataSource: {
                pageSize: 10,
                //Limits result set
                transport: {
                    read: {
                        url: "/echo/json/",
                        //using jsfiddle echo service to simulate JSON endpoint
                        dataType: "json",
                        type: "POST",
                        data: {
                            // /echo/json/ echoes the JSON which you pass as an argument
                            json: JSON.stringify([
                                {
                                    "Title": "Doctor Who: The Trial of a Time Lord"},
                                {
                                    "Title": "Doctor Who: The Key to Time"},
                                {
                                    "Title": "Doctor Who: The Time Meddler"},
                                {
                                    "Title": "Doctor Who: The End of Time"}
                            ])
                        }
                    }
                }
            }
        });*/

        /*change: function () {
                var value = this.value();
                if (value) {
                    grid.data("kendoGrid").dataSource.filter({ field: "UserID", operator: "eq", value: value });
                } else {
                    grid.data("kendoGrid").dataSource.filter({});
                }
            }
        });*/
        /*$("#users").blur(function() {
            var data = $(this).data("kendoAutoComplete").dataSource._data,
                    nbData = data.length,
                    found = false;

            for(var iData = 0; iData < nbData; iData++) {
                if(this.value === data[iData].Title)
                    found = true;
            }
            console.log(found);
        });*/

        wnd = $("#details").kendoWindow({
                    title: "Customer Details",
                    modal: true,
                    visible: false,
                    resizable: false,
                    width: 300
                }).data("kendoWindow");
        detailsTemplate = kendo.template($("#template").html());

    });

    function redirectToPage(e){
        e.preventDefault();
        var row = $(e.target).closest("tr");
        var item = $("#grid").data("kendoGrid").dataItem(row);
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/user_management/manage_users/ViewProfile/'?>"+JSON.parse(item.UserID),
            success: function(output_string){
                $('.second_column_content_container').html(output_string);
                //$('.second_column_content_container').innerHTML("hello");
                //alert(output_string);
            },
            error: function(data){
                alert("error");
            }
        });
    }
    function redirectToEditPage(e){
        e.preventDefault();
        var row = $(e.target).closest("tr");
        var item = $("#grid").data("kendoGrid").dataItem(row);
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/user_management/manage_users/edit_user/'?>"+JSON.parse(item.UserID),
            success: function(output_string){
                $('.second_column_content_container').html(output_string);
                //$('.second_column_content_container').innerHTML("hello");
                //alert(output_string);
            },
            error: function(data){
                alert("error");
            }
        });
    }
        //show details on a popup
       function showDetailsPopup(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

    //This will redirect to Next Page
    function showDetails(e) {
        e.preventDefault();
        var row = $(e.target).closest("tr");
        var item = $("#grid").data("kendoGrid").dataItem(row);
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/user_management/manage_users/list_view/'?>"+JSON.parse(item.UserID),
            success: function(data){
                alert("done");
                //$('.second_column_content_container').html(output_string);
                //$('.second_column_content_container').innerHTML("hello");
                //alert(output_string);
            },
            error: function(data){
                alert("error");
            }
        });


        //var grid = $("#grid").data("kendoGrid");

        //alert(JSON.parse(item.UserID));
        //window.location.href="http://www.google.com/";



    }
</script>
        <script type="text/x-kendo-template" id="template">
                <div id="details-container">
                    <h2>#= FirstName #</h2>
                    <h2>City: #= City # </h2>
                </div>
        </script>
<script type="text/x-kendo-template" id="toolbarTemplate">
    <div class="toolbar">
        <label class="category-label" for="users">Search Users: </label>
        <input type="text" id="users" style="width: 250px;" />
    </div>
</script>

<div class="data_column_a">
    <img src=""  id="pre_image" >
</div>

现在如何解决这个非常困难的问题O_o？？

---

更新： 此用户名位于网格的第 2 页上，如屏幕截图所示。

但在搜索期间，当我搜索第 1 页以外的用户名时，它会发送第 1 页的标题。

把我的头撞到墙上，如何解决？

Answer 1

问题似乎与您的autocomplete 定义有关，该定义未在read 上发送任何Username 参数。尝试将transport.read 定义为：

transport     : {
    read    : {
        url : "search_user.php",
        data: function (arg) {
            return {Username : autocompleteUsers.data("kendoAutoComplete").value()};
        }
    },
    dataType: "json",
    type    : "POST"
},

EDIT：用于在autocomplete 上应用选定值作为网格的过滤条件。你应该这样做：

var autocompleteUsers = $("#users").kendoAutoComplete({
    dataTextField: "Username",
    dataSource   : {
        severFiltering: true,
        transport     : {
            read    : {
                url : "search_user.php",
                data: function (arg) {
                    return {Username: autocompleteUsers.data("kendoAutoComplete").value()};
                }
            },
            dataType: "json",
            type    : "POST"
        }
    },
    change       : function () {
        var username = autocompleteUsers.data("kendoAutoComplete").value();
        var filter = {
            logic  : "and",
            filters: [
                {
                    ignoreCase: true,
                    field     : "Username",
                    value     : username,
                    operator  : "startswith"
                }
            ]
        };
        $("#grid").data("kendoGrid").dataSource.filter(filter);
    }
});