我正在使用 jQuery 和 jQuery UI 构建一个 webapp。我陷入了僵局。我需要的是一个 jQuery 网格，它具有可编辑的字段，并且以某种方式在这些可编辑单元格之一上合并了一个自动完成字段，我似乎找不到任何实现此功能的网格产品。
我一直在研究 StickGrid 和 jgGrid
我特别喜欢 jqGrid，因为它已经准备好 Themeroller。有谁知道是否有人成功地在这些网格之一或任何其他 jquery 网格上集成了自动完成功能？
【问题讨论】：
标签： jquery jquery-ui autocomplete
我认为你想要的应该很容易实现。我为您制作了一个快速复制粘贴/窃取在一起的演示页面。
如果您单击日期列，您将获得一个日历选择器。
如果您单击“客户”列并删除内容，您将看到一个自动完成程序（css 不适合快速粘贴），其中列出了美国城市（我知道城市不是客户名称，只是一个演示）。
代码取自jqGrid单元格编辑演示页面+jQuery Autocomplete演示页面
http://jsbin.com/owatu（将/edit附加到网址以查看代码）
当然，这个演示有点粗糙
我猜想在将 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();
}
}
...
【讨论】：
我还没有实现自动完成功能，但我使用过 jqGrid，它对 javascript 事件有很好的支持。
例如： 如果您在其中一个单元格中放置一个 id 并希望在其他单元格中自动填充信息，您可以使用 afterEditCell 在这里你指定一个自定义函数，它将接收 rowid、cellname、value、iRow、iCol 并检查 iRow 是否与你的 id 相同，取该值并根据该值填充其他单元格。 - 基本上是自动完成
或者可以使用 beforeEditCell 事件并创建自己的函数，该函数将接收 rowid、cellname、value、iRow、iCol 并将返回结果放置在单元格中。
查看活动部分 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing
祝你好运！
【讨论】：