Question

我正在使用jQuery和jQuery UI构建一个webapp。我陷入了困境。我需要的是一个jQuery网格，它具有可编辑的字段，并以某种方式在其中一个可编辑单元格中包含自动完成字段，我似乎无法找到实现此功能的任何网格产品。

我一直在关注 StickGrid 和 jgGrid

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

Answer 1

我认为你想要的应该是非常容易实现的。我让你快速复制粘贴/偷窃一起。

如果单击“日期”列，则会显示日历选择器。

如果您单击客户端列并删除内容，您将看到自动填充程序（css不适合quickpastewhatever），其中列出了美国城市（我知道城市不是客户端名称只是演示）。

从jqGrid单元格编辑演示页+ jQuery Autocomplete演示页

中获取的代码

http://jsbin.com/owatu（将/edit添加到网址以查看代码）

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

css问题
快速入侵afterSaveCell，让jQgrid从自动填充器中插入所选值，如果用户使用arrowkeys +使用鼠标输入键，则无需黑客就可以使用

我想当自动完成和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();
        }
    }
    ...

Answer 2

我没有实现自动完成功能，但我使用过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

祝你好运！

具有自动完成功能的jQuery Grid

2 个答案: