我正在使用 jQuery 和 jQuery UI 构建一个 web 应用程序。我陷入了僵局。我需要的是一个 jQuery 网格,它具有可编辑的字段,并以某种方式在这些可编辑单元格之一上合并了一个自动完成字段,我似乎找不到任何实现此功能的网格产品。
我一直在看 StickGrid 和 jgGrid
我特别喜欢 jqGrid,因为它已经准备好了 Themeroller。有谁知道是否有人成功地在这些网格之一或任何其他 jquery 网格上集成了自动完成功能?
最佳答案
我认为你想要的应该很容易实现。我给你做了一个快速复制粘贴/窃取的演示。
如果您单击日期列,您将获得一个日历选择器。
如果您单击“客户”列并删除内容,您将看到一个自动完成程序(css 不适合 quickpastewhatever),其中列出了美国城市(我知道城市不是客户名称,只是一个演示)。
代码取自 jqGrid Cell Editing 演示页面 + jQuery Autocomplete 演示页面
http://jsbin.com/owatu(将 /edit
附加到 url 以查看代码)
当然,演示的边缘有点粗糙
我想在将 autocomplete 和 jqGrid 彼此干净地集成时,可以删除 afterSaveCell hack。
基本上它归结为
jQuery("#celltbl").jqGrid({
...
{name:'name', width:100, editable:true}, //e.g.
...
afterEditCell: function (id,name,val,iRow,iCol) {
if(name=='name') {
//cities here is local json object
jQuery("#"+iRow+"_name","#celltbl").autocomplete(cities);
}
},
afterSaveCell : function(rowid,name,val,iRow,iCol) {
if(name == 'name') {
jQuery("#celltbl").jqGrid('setRowData',rowid,{name:jQuery(".ac_over").text()});
jQuery(".ac_results").remove();
}
}
...
关于带有自动完成功能的 jQuery 网格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/1925643/