具有自动完成功能的 jQuery 网格

Question

我正在使用 jQuery 和 jQuery UI 构建一个 Web 应用程序。我陷入了僵局。我需要的是一个 jQuery 网格，它具有可编辑字段，并以某种方式在这些可编辑单元格之一上合并一个自动完成字段，但我似乎找不到任何实现此功能的网格产品。

我一直在研究StickGrid和jgGrid

我特别喜欢 jqGrid，因为它已经准备好了 Themeroller。有谁知道是否有人成功地在这些网格之一或任何其他 jquery 网格上集成了自动完成功能？

Answer 1

我认为你想要的应该很容易实现。我为您制作了一个快速复制粘贴/窃取演示页面。

如果单击“日期”列，您将获得一个日历选择器。

如果您单击“客户”列并删除内容，您将看到一个自动完成程序(CSS 不适合快速粘贴)，其中列出了美国城市(我知道城市不是客户名称，只是一个演示)。

代码取自jqGrid单元格编辑演示页面 + jQuery Autocomplete演示页面

http://jsbin.com/owatu (将 /edit 附加到网址以查看代码)

当然，演示的边缘有点粗糙

• CSS 问题
• 快速破解 afterSaveCell 插入，让 jQgrid 插入自动完成器中选定的值，如果用户使用鼠标使用箭头键+回车键，则无需破解即可工作

我想当自动完成和 jqGrid 相互干净地集成时，afterSaveCell 黑客可以被删除。

基本上可以归结为

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();
        }
    }
    ...