我有一个jqxGrid,其中jqxListBox输入作为单元格。如何通过选择单元格的jqxListBox索引以编程方式设置它们的值?

在此处查看演示:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?%28web%29#demos/jqxgrid/customrowcelledit.htm

对于独立的jqxListbox,它可以简单地完成为

$("#jqxListBox").jqxListBox('selectIndex', 0 );


但是,如果它是网格的一部分,我该怎么办呢?网格初始化后,我需要更改单元格值。覆盖单元格值而不是更改所选索引不是一个好的解决方案。

最佳答案

您需要使用列的“ 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/

10-10 00:18