0

dojox.data.JsonRestStoreストアとして使用するグリッドがあります。ウィジェットフォーム（ ）を使ってデータを編集したい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