Javascript jQuery表-使用optgroup选择

我正在使用并且想知道是否有可能使用带有optgroups的select（type=select）？

我通过创建自定义输入类型（我称之为optgroups）来实现这一点

它的工作原理是假设数据的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);
                });
            });
        });
    }
}

你必须加上

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

接下来你必须使用它

$("#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; }
    }

公共类表
{
公共字符串Id{get；set；}
公共字符串描述符{get；set；}
}
公共类表OPTGroup
{
公共字符串Nombre{get；set；}
公共IEnumerable HIJO{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);

var grupos=Repositorio.SelectListOfYourDataType（x=>true）.GroupBy（x=>x.ColToGrouping）；
foreach（grupos中的变量grupo）
{
List HIJO=新列表（）；
foreach（grupo.OrderBy中的var项（x=>x.nombre_g5））
添加（new JEditable（）{Id=item.Id_g5，description=item.nombre_g5.Trim（）+“（“+item.Balance_g5+”）”+item.cuenta_g5.Trim（））；
Add（新的JEditableOptGroup（）{Nombre=grupo.Key+“”+grupo.FirstOrDefault（）.cuenta_g4.Trim（），Hijos=Hijos}）；
}
返回函数。绝地表下拉列表（绝地表）；

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

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

内部静态字符串表DropDownList（列表grupos）
{
StringBuilder sb=新的StringBuilder（）；
某人加上（“[”）；
foreach（grupos中的变量grupo）
{
StringBuilder HIJO=新StringBuilder（）；
foreach（grupo.Hijos中的变量项）
Append（“{”+string.Format（“id:'{0}'，name:'{1}'，item.id，item.description）+“}”）；
sb.Append（“{”+string.Format（“{0}'：[{1}]”，grupo.Nombre，hijos）+“}”）；
}
某人加上（“]”）；
使某人返回字符串（）；
}

---

享受吧

为什么它不起作用？什么意思

type=select

？你是指

元素吗？不管怎样，为什么不测试一下，看看呢？jEditable文档只显示了在选择输入时如何传递JSON编码的数组来填充选择框，而不是如何添加optgroups。我们应该将代码放在哪里？它是否在此内部：

$.editable.addInputType（'optgroup'，{..？here？.}）？
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();
        }