【发布时间】:2011-06-26 11:22:06
【问题描述】:
我仍在尝试找出是否可以在 jqGrid 中有一个单元格,当我拉出该行的编辑表单时,我需要一个可以将该列显示为多选列表的 GUI。
这可能是:
- 复选框列表
- 选择带有复选框的列表,以便您可以选择多个。
这在 jqGrid 中可行吗?
【问题讨论】:
我仍在尝试找出是否可以在 jqGrid 中有一个单元格,当我拉出该行的编辑表单时,我需要一个可以将该列显示为多选列表的 GUI。
这可能是:
这在 jqGrid 中可行吗?
【问题讨论】:
jqGrid 支持多选编辑。它不使用复选框进行选择,而是使用多选选择元素。我在双击时使用内联编辑制作了the demo。
下面是对应的代码:
jQuery(document).ready(function() {
var lastSel, mydata = [
{id:0, Name:"Lukas Podolski", Category:"1", Subcategory:"1"},
{id:1, Name:"Michael Schumacher", Category:"1", Subcategory:"2"},
{id:2, Name:"Albert Einstein", Category:"2", Subcategory:"3,4"},
{id:3, Name:"Blaise Pascal", Category:"2", Subcategory:"4"}
], grid = jQuery("#list");
grid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name: 'Name', index: 'Name', width: 130, editable: true },
{
name: 'Category', index: 'Category', width: 100,
formatter:'select', editable: true, edittype:'select',
editoptions: {
value: '1:sport;2:science',
multiple: true,
size: 2
}
},
{
name: 'Subcategory', index: 'Subcategory', width: 250,
formatter:'select', editable:true, edittype:'select',
editoptions: {
value: '1:football;2:formula 1;3:physics;4:mathematics',
multiple: true,
size: 4
}
}
],
sortname: 'Name',
viewrecords: true,
rownumbers: true,
sortorder: 'desc',
pager: '#pager',
height: '100%',
editurl: 'clientArray',
ondblClickRow: function(rowid) {
jQuery(this).jqGrid('editRow', rowid, true, null, null, 'clientArray');
},
onSelectRow: function(id){
if (id && id!==lastSel){
jQuery(this).restoreRow(lastSel);
lastSel=id;
}
},
caption: 'Selects with multiselect'
});
});
顺便说一句,在创建the demo 的过程中,我发现不能使用以“0”作为 id 的选择元素,这不是完全支持的。例如,“1:sport;2:science”有效,但“0:sport;1:science”无效。在不保存“运动”项目的选择的情况下。
如果您需要使用更舒适的复选框控件,您必须实现与 custom editing 相关的行为。
【讨论】:
size 属性会很有帮助。它表示将显示选择中的多少项目。其余的将在滚动方面看到。另一方面,如果您想显示包含 100 个项目的多选框,那么用户将不太舒服。在这种情况下,一个启用了多选功能的额外 jqGrid 表似乎更适合作为任何类型的多选复选框。另一个想法:您可以考虑将使用自动完成 jQuery UI 控件的场景。