有人可以提供正确的实现方法来利用jqxDropDownList并启用复选框作为网格列吗？
以下代码是从jqwidgets网格演示代码'cellediting.htm'修改的。
我已经实现了一个带有复选框的独立下拉列表，没有任何问题。
我已经使用下拉列表（没有复选框）实现了一个网格，没有任何问题。
但是，只要我把in checkbox中的复选框：true，我就会收到以下错误：
未捕获的TypeError：无法读取未定义的jqxlistbox.js的属性'instance'：7
在某些“更复杂”的场景中，复选框属性将使用“createeditor”成功，但是使用initeditor会失败。 这让我相信可能会有一些异步加载，并且我很快就会构建编辑器。
由于'checkboxes：true'属性，以下代码失败。删除它，它工作得很好。
<head>
<title id='Description'>In order to enter in edit mode, select a grid cell and start typing, "Click" or press the "F2" key. You
can also navigate through the cells using the keyboard arrows or with the "Tab" and "Shift + Tab" key combinations. To cancel the cell editing, press the "Esc" key. To save
the changes press the "Enter" key or select another Grid cell. Pressing the 'Space' key when a checkbox cell is selected will toggle the check state.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data =
[
{ firstname: 'joe', lastname: 'smith', sex: 'm' },
{ firstname: 'john', lastname: 'doe', sex: 'm' },
{ firstname: 'jane', lastname: 'doe', sex: 'f' }
];
var source =
{
localdata: data,
datatype: "array",
updaterow: function (rowid, rowdata, commit) {
commit(true);
},
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'sex', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 685,
source: dataAdapter,
editable: true,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
{ text: 'Last Name', columntype: 'textbox', datafield: 'lastname', width: 80 },
{ text: 'Sex', columntype: 'dropdownlist', datafield: 'sex', width: 195,
createeditor: function(row, cellvalue, editor)
{
var mydata =
[
{ value: "m", label: "Male" },
{ value: "f", label: "Female" }
];
var mysource =
{
datatype: "array",
datafields:
[
{ name: 'label', type: 'string' },
{ name: 'value', type: 'string' }
],
localdata: mydata
};
var myadapter = new $.jqx.dataAdapter(mysource, { autoBind: true });
editor.jqxDropDownList({ checkboxes: true, source: myadapter, displayMember: 'label', valueMember: 'value' });
}
}
]
});
// events
$("#jqxgrid").on('cellbeginedit', function (event) {
var args = event.args;
$("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
$("#jqxgrid").on('cellendedit', function (event) {
var args = event.args;
$("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid"></div>
<div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
<div id="cellbegineditevent"></div>
<div style="margin-top: 10px;" id="cellendeditevent"></div>
</div>
</div>
</body>
</html>
有人可以提供协助吗？
额外帮助!! 此外，似乎一旦我在下拉列表中选择了一个值，实际的'值'就会变为显示'标签'。即，（“男性”或“女性”），但在此示例中，性别字段的唯一有效数据为“m”或“f”。
我在jqwidgets官方论坛（这里：http://www.jqwidgets.com/community/topic/dropdownlist-with-checkboxes-as-grid-column-editor/）上提出了同样的问题，如果他们在社区中击败了社区，他们会发布他们发送的任何答案。
答案 0 :(得分：1)
据我所知，jQwidgets Grid中没有带Checkboxes Editor的DropDownList。如果有这样的话，我认为jQWidgets至少会有一个关于它的示例，所以我想你不能在jqxGrid小部件中以这种方式使用DropDownList。
答案 1 :(得分：0)
我知道这是一个相当古老的帖子，但仍然...... 我很惊讶地看到JQWidgets团队的回应，因为他们自己在他们的网站上有这样的例子，使用带有复选框的下拉列表作为网格编辑器。 可在http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellcustomediting.htm处获取 编辑器在Products列中使用的位置。
米哈伊