kendoui在其工具栏上使用自动完成的网格？

Question

更新： 我尝试了很多时间来解决问题，并最终解决了问题。 但最初非常感谢OnaBai和我的同事，他帮助我们走了这么远。

现在我卡在这里。

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

这里是它是如何工作的：

但是当，如果我寻找这是不是第1页那么它不显示在显示网格中其他用户的其他用户。相反，我得到空网格。

萤火截图：

这是我更新的代码后，我做的代码：

<?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); 
    } 
});