0

我有一个dojox.data.JsonRestStore用作商店的网格。我想使用小部件 Form ( dijit.form.Form) 来编辑数据。实现dojo/on而不是dojo.connect用于绑定网格和表单。

这里是JsonRestStore ("/rest/console/getobjectlist") 结果（由 Restful Web Service - JAX-RS提供）

[{"host":"192.168.3.7","port":"5474"},
{"host":"192.168.4.41","port":"8100"},
{"host":"192.168.5.5","port":"9999"}]

这里以编程方式Grid和JsonRestStore

<script>
require(
        [ 'dojo/dom', 'dojo/json', 'dojox/json/schema',
                'dojox/data/JsonRestStore', 'dojox/grid/DataGrid',
                'dojox/grid/_CheckBoxSelector', 'dojo/on', 'dojo/request/xhr', 'dijit/Dialog',
                'dijit/ProgressBar', 'dijit/MenuBar',
                'dijit/PopupMenuBarItem', 'dijit/MenuItem', 'dijit/Menu',
                'dijit/Calendar', 'dijit/form/Form',
                'dijit/form/ValidationTextBox', 'dijit/form/TextBox',
                'dijit/form/FilteringSelect', 'dijit/form/Button',
                'dijit/form/ComboBox', 'dijit/form/ComboButton',
                'dijit/form/RadioButton', 'dijit/form/DropDownButton',
                'dijit/form/MultiSelect', 'dijit/form/NumberTextBox',
                'dijit/form/ToggleButton', 'dijit/form/SimpleTextarea',
                'dijit/layout/BorderContainer',
                'dijit/layout/TabContainer', 'dijit/layout/ContentPane',
                'dojo/domReady!' ],
        function(dom, JSON, schema, JsonRestStore, DataGrid,
                _CheckBoxSelector, on, xhr) {
            var store = new JsonRestStore(
                    {
                        target : "/rest/console/getobjectlist"

                    });

            var gridCell = [
                    {
                        name : "Host",
                        field : "host"

                    },
                    {
                        name : "Port",
                        field : "port",
                        width : "30%"
                    },
                    {
                        name : "Action",
                        field : "action",
                        formatter : function(item) {
                            var link = '<a href="edit.jsp" title="Edit"><div class="dijitIconEdit"></div></a> <a href="adapter.html" title="delete.jsp"><div class="dijitIconDelete"></div></a>';

                            return link;
                        }

                    }

            ];

            gridLayout = [ {
                // First, our view using the _CheckBoxSelector custom type
                type : "dojox.grid._CheckBoxSelector"
            }, gridCell ];

            var grid = new DataGrid({
                store : store,
                structure : gridLayout,
                selectionMode: "single",
                autoHeight : true
            }, "ObjectGrid");
            grid.startup();

            on(grid, "RowClick", function showDetail (e){
                            var grx = dijit.byId("AdapterGrid");
                            var host = grid.store.getValue(grid
                                    .getItem(e.rowIndex), "host");
                            var serviceurl =  "/rest/console/getobject?host="+host;

                            console.log(serviceurl);
                            xhr(serviceurl,{
                                handleAs: "json"}
                            ).then( function (data){
                                    dijit.byId("detailsForm").attr("value", serviceurl);
                            });
            } );



        });
 </script>

HTML

<body class="claro">
        <div id="ObjectGrid"></div>

        <form data-dojo-type="dijit/form/Form" id="detailsForm" method="post"
            data-dojo-props="region:'center'">

            <table>
                <tbody>
                    <tr>
                        <td>Host:</td>

                        <td><input type="text" required="true" name="host" id="host"
                            placeholder="host address"
                            regExp="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
                            data-dojo-type="dijit/form/ValidationTextBox" /></td>
                    </tr>
                    <tr>
                        <td>Port:</td>
                        <td><input type="text" required="true" name="port" id="port"
                            regExp="\d+" placeholder="port"
                            data-dojo-type="dijit/form/ValidationTextBox"
                            invalidMessage="Numeric only" /></td>
                    </tr>
                </tbody>
            </table>

            <!-- submit buttons -->
            <input type="submit" value="Save" label="Save" id="submitButton"
                data-dojo-type="dijit/form/Button" />
        </form>

 </body>

我的计划是小部件表单数据将通过单击网格上的一行来填充，然后稍后使用 POST 方法更改值，但仍然无法获取值。有什么建议吗？

4

1 回答 1

1

我在这里开始了一个 jsfiddle，但我不确定单击一行时你想要发生什么。

该示例只是将表单字段值设置为单击的网格行中的值。此特定代码如下所示：

    on(grid, "RowClick", function showDetail(e) {
        var item = grid.getItem(e.rowIndex);
        console.log("item", item);

        var serviceurl = "/rest/console/getobject?host=" + item.host;

        console.log("host", host, "serviceurl", serviceurl);

        var form = registry.byId("detailsForm");
        var hostInput = registry.byId("host");
        var portInput = registry.byId("port");
        console.log(registry);
        console.log(form);

        // set the form fields to match the clicked item
        hostInput.set("value", item.host);
        portInput.set("value", item.port);

我不清楚你还想发生什么。我可以看到你正在执行一些 XHR，但这是为了什么？你想设置表格的哪一部分serviceurl？

截屏

在此处输入图像描述

于 2013-04-02T11:31:48.370 回答