个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
有人可以提供正确的实现方法来利用 jqxDropDownList 并启用复选框作为网格列吗？
以下代码是根据jqwidgets网格演示代码'cellediting.htm'修改的。
我已经实现了一个带有复选框的独立下拉列表，没有任何问题。
我已经实现了一个带有下拉列表(没有复选框)的网格，没有任何问题。
但是，一旦我将 checkboxes: true 放入 initeditor 中，我就会收到以下错误:
Uncaught TypeError: Cannot read property ‘instance’ of undefined jqxlistbox.js:7
在某些“更复杂”的场景中，checkboxes 属性将在“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/ )，如果他们击败了社区，我将在这里发布他们发送的任何答案。
最佳答案
据我所知，jQwidgets Grid 中没有带有复选框编辑器的 DropDownList。如果有的话，我认为 jQWidgets 至少会有一个关于它的示例，所以我想你不能在 jqxGrid 小部件中以这种方式使用 DropDownList。
关于javascript - JQWidgets jqxGrid 以 jqxDropDownList 作为编辑器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16529810/
24
4
0
如何以编程方式检查 jQWidgets jqxGrid 的所有行与复选框选项？我可以循环遍历行并逐一选择它们或使用 $("#jqxgrid").jqxGrid('selectallrows'); 但
引用下面给定链接中提供的代码 http://jsfiddle.net/tzHXR/ var data = generatedata(500); var source = { localda
我从这个论坛引用了一些答案 http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-gri
jqxGrid 是否可以渲染作为对象的单元格值？ 例如在此Codepen example每行都有一个属性details，它有一个对象值。我想说的是，创建一个自定义渲染器来显示它的 JSON 字符串化版
我正在使用 jqwidgets 的 Jqxgrid。 我在网格中获取了一个下拉列表。 我想在页面加载时默认以可编辑模式显示下拉列表。 请看一下这个屏幕截图，其中第一个下拉列表显示为“请选择”，它会在单
JS: http://jsfiddle.net/tzHXR/ var data = generatedata(500); var source = { localdata: data,
您好，我有绑定(bind)到 Gridview 的 DataTable。但是需要将知道的绑定(bind)到 jqxgrid 或 jqxdatatable。在谷歌搜索了这么多次之后，我没有找到合适的解决
我正在尝试使 jqxGrid 中的单元格可编辑，具体取决于行中另一列的值(名称为 Editable)。 { text: "Percentage", datafield: "Percentage", c
在 Angular 中，我正在尝试将主题应用于我的网格。 我的网格 在 jqwidgets 文件夹中
我使用radiobutton的渲染器列使用JQXWidgets Grid(JQXGRID)，并通过rowdata值检查了True或false，当检查了多个 radio 和滚动网格时，未选中的已检查 r
我正在尝试根据我的 jqxgrid 是否有要显示的数据来启用/禁用 jqxbuttons。我能想到的检查 jqxgrid 是否为空的唯一方法是执行以下操作: function CheckIfGridE
我有一个 jqxGrid，我需要用一些对象填充它。该对象是完全随机的，某些数据字段可能为空。仅当该数据存在于该对象中时，我才需要显示特定的列。 columns: [ { t
我正在关注这个http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?%28arctic%29#demos/jqxgr
使用 jqxGrid 制作包含数据的表格(显然)。 我已经在 jqxGrid 中加载了我的 Angular Directive(指令)元素，数据更新网格很好，但它只是停留在那里，未渲染，我不知道如何触
我在我的应用程序中使用了 JQXGrid。在初始加载中，数据从服务器检索并加载到 dataAdapter 中，dataAdapter 用作网格的源。当我过滤网格中的任何列时，我需要在 dataAdap
有人可以提供正确的实现方法来利用 jqxDropDownList 并启用复选框作为网格列吗？ 以下代码是根据jqwidgets网格演示代码'cellediting.htm'修改的。 我已经实现了一个带
在上图中，标题中的一些文本被隐藏了。我尝试了 padding-bottom 属性，但没有帮助。我使用 jqwidgets 中的 jqxgrid 小部件 关注的div是.jqx-grid-header我
我们使用 jqxgrid 在屏幕上显示房间信息。为了便于阅读，我们尝试将日期格式设置为“今天”或“明天”，而不是实际日期(今天或明天......)。 除了重新格式化为“今天”和“明天”之外，一切正常(
我按照这个例子的步骤(http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind
在jqxGrid ，如何从 JSON 数据添加新的计算列？ 我的 JSON 数据包含字段 baseQuantity 和 unitCost。我想添加一个名为 totalCost 的新字段，它是 base
我是一名优秀的程序员,十分优秀！