个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个 jqxGrid，其中 jqxListBox 输入作为单元格。如何通过选择 jqxListBox 索引以编程方式设置单元格的值？
在此处查看演示:
对于独立的jqxListbox，可以简单地完成
$("#jqxListBox").jqxListBox('selectIndex', 0 );
但是如果它是网格的一部分我该怎么做呢？我需要在网格初始化后更改单元格值。覆盖单元格值而不是更改所选索引并不是一个好的解决方案。
最佳答案
您需要使用Column的“initeditor”回调函数。下面是相同的演示，但使用 jQWidgets ListBox 而不是 jQWidgets DropDownList 作为编辑器。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.10.2.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/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/jqxnumberinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxslider.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 () {
var theme = getDemoTheme();
// prepare the data
var data = new Array();
data.push({ "Name": "Population", "Berlin": "3560154", "Boston": "3406829", "London": "8174100" });
data.push({ "Name": "Country", "Berlin": "Germany", "Boston": "United States", "London": "United Kingdom" });
data.push({ "Name": "Capital", "Berlin": "true", "Boston": "false", "London": "true" });
var source =
{
localdata: data,
datatype: "array",
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server - send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
},
datafields:
[
{ name: 'Name', type: 'string' },
{ name: 'Berlin', type: 'string' },
{ name: 'Boston', type: 'string' },
{ name: 'London', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
var createGridEditor = function(row, cellValue, editor, cellText, width, height)
{
// construct the editor.
if (row == 0) {
editor.jqxNumberInput({ decimalDigits: 0, inputMode: 'simple', theme: theme, width: width, height: height, spinButtons: true });
}
else if (row == 1) {
editor.jqxListBox({theme: theme, width: width, height: height, source: ['United States', 'Germany', 'United Kingdom']});
}
else if (row == 2) {
var element = $('<div tabIndex=0 style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px;"></div>');
editor.append(element);
element.jqxCheckBox({ animationShowDelay: 0, animationHideDelay: 0, width: 16, height: 16, theme: theme });
}
}
var initGridEditor = function (row, cellValue, editor, cellText, width, height) {
// set the editor's current value. The callback is called each time the editor is displayed.
if (row == 0) {
editor.jqxNumberInput({ decimal: parseInt(cellValue)});
}
else if (row == 1) {
editor.jqxListBox('selectItem', cellValue);
}
else if (row == 2) {
var checkBoxHTMLElement = editor.find('div:first');
checkBoxHTMLElement.jqxCheckBox({ checked: cellValue.toString() == "true" });
}
}
var gridEditorValue = function (row, cellValue, editor) {
if (row == 2) {
var checkBoxHTMLElement = editor.find('div:first');
return checkBoxHTMLElement.val();
}
return editor.val();
}
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 600,
rowsheight: 60,
autoheight: true,
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: 'singlecell',
columns: [
{
text: 'Name', pinned: true, editable: false, datafield: 'Name', width: 150
},
{
text: 'Boston', columntype: 'custom', datafield: 'Boston', width: 150,
createeditor: createGridEditor, initeditor: initGridEditor, geteditorvalue: gridEditorValue
},
{
text: 'Berlin', columntype: 'custom', datafield: 'Berlin', width: 150,
createeditor: createGridEditor, initeditor: initGridEditor, geteditorvalue: gridEditorValue
},
{
text: 'London', columntype: 'custom', datafield: 'London',
createeditor: createGridEditor, initeditor: initGridEditor, geteditorvalue: gridEditorValue
}
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>
希望这对您有帮助。
关于javascript - 如何以编程方式设置jqxGrid的jqxListBox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18755081/
25
4
0
我正在制作一个使用 jqxListBox 来显示元素列表的小型网站。实际上，默认情况下，它不会自动调整大小以适应其容器。我得到容器的内部高度并设置为 jqxListBox，但我不知道为什么 jqxLi
我正在尝试将 JQXListbox 绑定(bind)到 JSON 数据并在结果中显示两个字段。 我想以字符串形式访问源对象中的数据字段，以便将它们连接起来，以便我可以将结果字符串设置为 jqxList
我正在尝试将项目添加到 jqxListbox 中的组中，但是在添加时使用组属性似乎不起作用。我读过 the relevant api ，上面写着 group - determines the item
我是一名优秀的程序员,十分优秀！