javascript - rowclick 事件修改 dojo 网格中的下拉值

Question

我的要求是当我点击增强网格中的任何行时，下拉菜单中的值应该改变，就像我点击row1时一样，应显示下拉列表中的第一个选项，当我单击 row2 时，一旦用户单击 row2，下拉列表中应显示第二个选项，其他行类似...请找到 fiddle 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' 实现的。请建议我如何显示根据用户单击的行更改的下拉菜单列表值。谢谢。

--编辑--

我的实际要求是，当我单击网格中的任何行时，获取第1列值并点击 Spring Controller ，以便基于该值 Spring Controller 返回我需要在下拉菜单中显示的下拉值。请参阅 fiddle :http://jsfiddle.net/x9kLbqz5/7/但问题是当我调用 javascript 函数 getDropDownValue(id);在 dojo.connect(grid, "onRowClick", function(evt) 内，行不再可编辑，我希望也可以编辑该行并调用 javascript 函数，以便我可以ajax 调用 spring Controller 来获取动态下拉值并显示在下拉列表中。

        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
              }
           }   
        }
}

Answer 1

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

谢谢斯里坎特

//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}
    ]];

谢谢斯里坎特