工具栏上带有自动完成功能的 kendoui Grid？
Posted
技术标签:
【中文标题】工具栏上带有自动完成功能的 kendoui Grid？【英文标题】：kendoui Grid with autocomplete on its toolbar? 【发布时间】：2013-03-22 15:10:15 【问题描述】：更新： 我尝试并花了很多时间来解决这个问题，最后问题解决了。 但最初非常感谢 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: " ", 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 页的标题。
把我的头撞到墙上，如何解决？
【问题讨论】：
【参考方案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);
);
【讨论】：
我已经修改了代码并且它可以工作，但现在的问题是当我在文本框中输入内容时，网格过滤器正确但是当项目在第 2 页或其他年龄（例如）时，在网格上过滤不起作用，我只看到一个空网格。 您介意向我解释一下您要达到的目标吗？是否通过username 过滤grid 内容，但使用autocomplete 而不是网格列标题？
是的，确切地说，我有一个文本框，其中会弹出一个自动完成功能并相应地过滤网格，但这仅适用于第一页，即网格中显示的第一个项目。如果我搜索项目，即网格的下一页（第 2 页），则网格过滤但网格中的数据为空
请看这张图片：i341.photobucket.com/albums/o377/pakistanihaider/… 数据来自数据库并显示在下拉列表中，但是当点击空网格时显示因为数据在其他页面上。
在这张图片中，当点击结果时，结果会显示在网格中，因为用户位于网格的第一页。 i341.photobucket.com/albums/o377/pakistanihaider/…以上是关于工具栏上带有自动完成功能的 kendoui Grid？的主要内容，如果未能解决你的问题，请参考以下文章
kendoui + angularjs + 自动完成显示文本但将 id 设置为值
使用 Javascript/KendoUI 自动完成渲染数据时出错 - 对象 #<Object> 没有方法“切片” - 如何解决？
Kendo UI Angular JS 和带有服务的 AutoComplete