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

我一直在看 StickGrid jgGrid

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

最佳答案

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

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

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

代码取自 jqGrid Cell Editing 演示页面 + jQuery Autocomplete 演示页面

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

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

  • css 问题
  • 插入 afterSaveCell 中的快速 hack 以获取 jQgrid 以从自动完成器插入选定的值,如果用户使用箭头键+输入键与鼠标,它可以在没有 hack
  • 的情况下工作

    我想在将 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/

    10-12 00:19
    查看更多