如何解决有没有人试图在jqGrid中显示jQuery UI自动完成的结果?
| 我已经在不同情况下使用了jQuery UI自动完成功能。 我已经定制了结果,并且已经变得喜欢它。 现在,我想将其与jqGrid结合使用。 基本上,我希望用户在文本框中插入一些文本,并且在他/她这样做的同时,jqgrid会加载数据。 我知道我可以创建自己的jquery插件并达到相同的结果,但是也许有人已经做了我想要得到的。 谢谢解决方法
为什么不将jqGrid绑定到自动完成源的回调函数中找到的数据对象。在下面,我有一个文本框供某人搜索用户。它对称为SearchUsers的WCF管道进行ajax调用。在ajax调用成功时,将调用“ function(data).... \”,其中“ data”是返回的数据。
//create the userlistautocomplete
$(\"#txtSearchUsers\").autocomplete({
source: function (request,response) {
SecurityAjax.SearchUsers(request.term,function (data) {
$(\"#usersList\").jqGrid(\'clearGridData\');
gridData = data;
$(\"#usersList\").setGridParam({ data: gridData });
$(\"#usersList\").trigger(\"reloadGrid\");
});
},minLength: 2,open: function () {
$(this).removeClass(\"ui-corner-all\").addClass(\"ui-corner-top\");
},close: function () {
$(this).removeClass(\"ui-corner-top\").addClass(\"ui-corner-all\");
}
}).data(\"autocomplete\")._renderItem = function (ul,item) {
return $(\"<li></li>\").data(\"item.autocomplete\",item).append(\"<a>\" + item.FirstName + \"<br>\" + item.LastName + \"</a>\").appendTo(ul);
};
在匿名函数“函数(数据)”中,我将现有jqGrid的数据设置为自动完成数据,然后刷新网格,其中网格定义如下:
$(\"#usersList\").jqGrid({
data: gridData,width: 800,datatype: \"local\",colNames: [\'User Id\',\"First Name\",\"Last name\",\"User name\"],colModel: [
{ name: \'SysUserId\',index: \'SysUserId\',width: 55,hidden: true },{ name: \'FirstName\',index: \'FirstName\',width: 100,editable: true },{ name: \'LastName\',index: \'LastName\',width: 90,{ name: \'UserName\',index: \'UserName\',editable: true }
],caption: \"Using events example\",onSelectRow: function (id) {
if (id && id !== lastsel) {
lastsel = id;
}
},ondblClickRow: function (id) {
},localReader: {
repeatitems: false,id: \"UserId\"
},pager: \'#pusersList\'
});
, colModel: [
{
name: \'PNumber\',width: 30,index: \'PNumber\',align:\'center\',editable: true,editrules: { required: true },editoptions:{dataInit:pnumberAuto},searchoptions: {dataInit:pnumberAuto,sopt: [\'eq\',\'cn\'] }
},],
pnumberAuto是:
function pnumberAuto(e) {
$(e).autocomplete({
source: \'/Autocomplete/QuickSearchPN\',delay:0
})
}
控制器是:
public ActionResult QuickSearchPN(string term)
{
var q = (from p in db.BOM
where p.PNumber.Contains(term)
select p.PNumber).Distinct().Take(10);
return Json(q,JsonRequestBehavior.AllowGet);
}
我认为这可以为您提供帮助。
, pedrodg使我走对了路。
如果有人感兴趣:
var myGrid = jQuery(\"#MyGrid\");
LoadSearchGrid([{}]);
$(\"#MySearch\").autocomplete({
minLength: 3,delay: 300,source: function(request,response) {
$.ajax({
url: \'<%=Url.Action(\"FetchData\",\"Home\")%>\',data: { Search: request.term },dataType: \"json\",type: \"POST\",success: function(data) {
myGrid.jqGrid(\'clearGridData\');
myGrid.setGridParam({ data: data });
myGrid.trigger(\"reloadGrid\");
}
});
}
});
function LoadSearchGrid(gridData) {
myGrid.jqGrid({
data: gridData,colNames: [\'Code\',\'Description\'],colModel: [
{ name: \'Code\',index: \'Code\',sortable: true,width: 50,align: \'left\' },{ name: \'Description\',index: \'Description\',width: 250,align: \'left\' }
],width: 300,height: 170
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。