【问题标题】：Master-Detail relationship using DataGrid and Form widget in Dojo 1.8Dojo 1.8 中使用 DataGrid 和 Form 小部件的主从关系
【发布时间】：2013-04-02 03:41:23
【问题描述】：

我有一个使用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>

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

【问题讨论】：

标签： dojo jax-rs master-detail dojox.grid.datagrid dijit.form

【解决方案1】：

我已经创建了一个jsfiddle here，但我不确定单击一行时您希望发生什么。

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

    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？

截图

【讨论】：

感谢您的回答...这对我真的很有帮助。抱歉，XHR 是从publib.boulder.ibm.com/infocenter/radhelp/v7r5/… 获取的。该链接显示如何根据数据网格中的选定项目创建详细信息窗格。但我只是好奇，为什么 checkbox_selector 没有与单元格网格正确绑定......我尝试用“onCellClick”或“onRowClick”替换“RowClick”，但数据表单仍然没有填充。
如何在单击 datagrid 中的行之前隐藏小部件表单，并在选择/单击网格时显示它？