jQuery jEditables -使用optgroup进行选择
jQuery jEditables -使用optgroup进行选择
提问于 2012-12-19 08:31:55
我正在使用jEditable，我想知道是否有可能在optgroup中使用select (type=select)
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-20 16:23:48
通过创建自定义输入类型(我称之为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'
}
);Stack Overflow用户
发布于 2019-02-24 05:16:29
你必须加上
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中，查找“type”并粘贴到该数组中。在此之后，您的文件应该如下所示：
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();
}尽情享受吧！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13948279
复制相关文章
相似问题
腾讯云开发者
