用于修改 dojo 网格中的下拉值的 rowclick 事件

Posted 2023-02-25

【中文标题】用于修改 dojo 网格中的下拉值的 rowclick 事件

【英文标题】：rowclick event to modify dropdown value in dojo grid

【发布时间】：2015-05-08 14:37:09

【问题描述】：

我的要求是当我点击增强网格中的任何行时，下拉菜单中的值应该改变，就像我点击 row1 时一样， 下拉列表中的第一个选项应该显示，当我点击 row2 时，第二个选项应该在用户点击 row2 后立即显示在下拉列表中，对于其他行类似...请找到小提琴http://jsfiddle.net/x9kLbqz5/4/。

当用户点击任何一行时，我可以获取行信息。下面是代码：

    dojo.connect(grid, "onRowClick", function(evt)
     var idx = evt.rowIndex,
    item = this.getItem(idx);
   dojo.byId("results").innerhtml = "You have clicked on " 
                    + this.store.getValue(item, "id");
            );

但问题是我无法继续编写 javascript 以根据用户单击的行更改下拉菜单值。 另一个要求是行应该是可编辑的，这是在定义列时使用 editable:'true' 实现的。 请建议我如何根据用户单击的行显示更改的下拉菜单列表值。谢谢。

--编辑--

我的实际要求是当我单击网格中的任何行时，获取 column1 值并点击弹簧控制器，以便基于该值弹簧控制器返回我需要在下拉菜单中显示的下拉值。请看小提琴：http://jsfiddle.net/x9kLbqz5/7/ 但问题是当我调用 javascript 函数 getDropDownValue(id);在 dojo.connect(grid, "onRowClick", function(evt) 内，行不再可编辑，我希望行也被编辑以及调用 javascript 函数以便我可以ajax调用spring控制器获取动态下拉值并显示在下拉列表中。

        dojo.connect(grid, "onRowClick", function(evt)
         var idx = evt.rowIndex,
        item = this.getItem(idx);
       dojo.byId("results").innerHTML = "You have clicked on " 
                        + this.store.getValue(item, "id");
            var id = this.store.getValue(item, "id");
            alert("item:" + id);
getDropDownValue(id);       
                );

function getDropDownValue(ColumnValue)
    alert("getDropDownValue");
    //ajax call to hit spring controller and get the dropdown value
    var column1 = columnValue;
        var xmlHttp;  
        if (window.XMLHttpRequest)
        
            xmlHttp= new XMLHttpRequest();
        
        else if (window.ActiveXObject)
        
            xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
        
        var url = <%=request.getContextPath%>+"/getDropDownValue.htm?id="+column1;
        xmlHttp.onreadystatechange = function() 
            handleServerResponse(xmlHttp);
        ;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);

        function handleServerResponse(xmlHttp)
           
           if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
           
              if (xmlHttp.responseText != "null")
              
           //handle response
              
              
        

【参考方案1】：

我已经更新了 JsFiddle (http://jsfiddle.net/x9kLbqz5/5/)。 1) SelectedIndex 将在下拉列表中设置值 2) editable : true 是一个布尔值而不是一个字符串。

谢谢 斯里坎特

//Set the value in the dropdown
dojo.byId('a').selectedIndex = this.store.getValue(item, "id");
//Editable columns (double click or click +Enter)
var layout = [[
      'name': 'Column 1', 'field': 'id', 'width': '100px',
      'name': 'Column 2', 'field': 'col2', 'width': '100px',editable:true,
      'name': 'Column 3', 'field': 'col3', 'width': '200px',editable:true,
      'name': 'Column 4', 'field': 'col4', 'width': '150px',editable:true,
      'name': 'Last', 'field': 'last', 'width': '150px',editable:true
    ]];

谢谢 斯里坎特

【讨论】：

感谢@Srikant Sahu，我的实际要求是当我单击网格中的任何行时，获取 column1 值并点击弹簧控制器，以便基于该值弹簧控制器返回我需要的下拉值为了显示在下拉菜单中，为了简单起见，我修改了我的问题，但它似乎不满足我的要求，对不起:(。您能否建议我在单击该行并可以访问时如何调用 javascript 方法javascript中的id，以便我可以在javascript中对spring控制器进行ajax调用以获取从数据库中检索的下拉值。

嗨....我已经更新了小提琴jsfiddle.net/x9kLbqz5/8。我引入了一个新函数 getValuesFromController(id)。这实际上需要 id 并使用 dojo/request (ajax) 调用 url ... then 函数有一个可以分别使用的成功和错误处理程序。如果它满足您的需求，请投票给答案。