jQuery jEditables - 使用 optgroup 选择答案

【问题标题】：jQuery jEditables - Select with optgroupjQuery jEditables - 使用 optgroup 选择
【发布时间】：2012-12-19 08:31:55
【问题描述】：

我正在使用jEditable，我想知道是否可以使用 optgroups 进行 select (type=select)？

【问题讨论】：

为什么它不起作用？ type=select 是什么意思？你的意思是<select> 元素吗？无论哪种方式，你为什么不测试一下看看呢？
jEditable 文档仅显示了如何在选择输入时传递 JSON 编码数组以填充选择框，而不是如何添加 optgroup。

标签： javascript jquery jeditable

【解决方案1】：

我已经设法通过创建自定义输入类型（我称之为 optgroup）来做到这一点。

它的工作原理是假设数据的 json 格式为；

var json = [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}];

这是代码；

optgroup: {
   element : function(settings, original) {
        var select = $('<select class="opt" />');
        $(this).append(select);
        return(select);
    },
    content : function(data, settings, original) {
        if (String == data.constructor) {      
            eval ('var json = ' + data);
        } else {
            var json = data;
        }

        var addto = $('select', this);
        $.each(json, function(i, optgroups) {
            $.each(optgroups, function(groupName, options) {
                var $optgroup = $("<optgroup>", {label: groupName});
                $optgroup.appendTo(addto);
                $.each(options, function(j, option) {
                    var $option = $("<option>", {text: option.name, value: option.id});
                    $option.appendTo($optgroup);
                });
            });
        });
    }
}

使用;

$('.editable').find('td').editable(
    function(v, s) {
        // do whatevere you need to...
    }, 
    {
        "data"   : [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}],
        "indicator": 'Saving ...',
        "tooltip": 'Double Click to edit',
        "type": 'optgroup',
        "submit": 'Save changes',
        "event": 'dblclick'
    }
);

【讨论】：

我们应该把代码放在哪里？是在这个里面吗：$.editable.addInputType('optgroup', { ..?here?.. });？

【解决方案2】：

你必须添加

optgroup: {
    element: function (settings, original) {
        var select = $('<select />');
        $(this).append(select);
        return (select);
    },

    content: function (data, settings, original) {
        if (String == data.constructor) {
            eval('var json = ' + data);
        } else {
            var json = data;
        }

        var addto = $('select', this);
        $.each(json, function (i, optgroups) {
            $.each(optgroups, function (groupName, options) {
                var $optgroup = $("<optgroup>", {
                    label: groupName
                });

                $optgroup.appendTo(addto);

                $.each(options, function (j, option) {
                    var $option = $("<option>", {
                        text: option.name,
                        value: option.id
                    });

                    if (option.selected !== null && option.selected !== undefined && option.selected) {
                        $option.attr('selected', 'selected');
                    }
                    $option.appendTo($optgroup);
                });
            });
        });
    }
}

到您的 jquery.jeditable.js 中，找到“类型”并粘贴到该数组中。之后，您的文件应如下所示：

types: {
   textarea:...,
   select:...
   number:...
   ...
   optgroup:...
}

接下来你必须使用它。

$("#yourControlSelect").editable("/controllerName/ActionToExecute", {
   data: @Html.Action("JEditbaleOptGroup", "ControllerName"),
   type: 'optgroup', //Same as you created before
   ...
});

记住数据的格式，必须是：

[
   {"Category1": [{"id": 1,"name": "Product1"}, {"id": 2,"name": "Product2"}]}, 
   {"Category2": [{"id": 3,"name": "Product3"}, {"id": 4,"name": "Product4"}]}, 
   {"Category3": [{"id": 5,"name": "Product5"}, {"id": 6,"name": "Product6"}]}
]

最后，这是创建并返回它的模型

    public class JEditable
    {
        public string Id { get; set; }
        public string Descripcion { get; set; }
    }

    public class JEditableOptGroup
    {
        public string Nombre { get; set; }        
        public IEnumerable<JEditable> Hijos { get; set; }
    }

填充模型

var grupos = Repositorio.SelectListOfYourDataType(x => true).GroupBy(x => x.ColToGrouping);

foreach (var grupo in grupos)
{
   List<JEditable> hijos = new List<JEditable>();
   foreach (var item in grupo.OrderBy(x=>x.nombre_g5))
      hijos.Add(new JEditable() { Id = item.Id_g5, Descripcion = item.nombre_g5.Trim() + " (" + item.Balance_g5 + ") " + item.cuenta_g5.Trim() });

      jEditable.Add(new JEditableOptGroup() { Nombre = grupo.Key + " " + grupo.FirstOrDefault().cuenta_g4.Trim(), Hijos = hijos });
 }
return Funciones.JEditableDropDownList(jEditable);

将数据转换为正确的格式：

internal static string JEditableDropDownList(List<JEditableOptGroup> grupos)
   {
       StringBuilder sb = new StringBuilder();
       sb.Append("[");
       foreach (var grupo in grupos)
       {
         StringBuilder hijos = new StringBuilder();    
         foreach (var item in grupo.Hijos)
           hijos.Append("{" + string.Format("id:'{0}',name:'{1}'", item.Id, item.Descripcion) + "},");

           sb.Append("{" + string.Format("'{0}':[{1}]", grupo.Nombre, hijos) + "},");
                }
           sb.Append("]");
           return sb.ToString();
        }

尽情享受吧！

【讨论】：