jquery - 在 jstreegrid 中动态创建的 selectBox 的问题

Question

我已经在我的项目中实现了 jstreegrid。我在网格中动态创建选择框。当我单击选择框时，它会立即打开并折叠，我无法选择选项。但是当我双击它时，它保持打开状态，我可以选择该选项。在开发人员工具中检查期间，我发现单击 selectBox 时，它会刷新包含它的整个 div。我认为这是导致问题的原因，但不确定。

下面是我的代码。我也有一个工作的jsFiddle。

var jsonData = [{
    "id": "6345",
    "text": "ActionType",
    "parent": "6343",
    "data": {
         "data_needed": "Y"
     }
},
{
     "id": "6343",
     "text": "GeopoliticalInfo",
     "parent": "6342",
     "data": {
         "data_needed": "N"
      }
},
{
     "id": "6342",
     "text": "BrunnelName",
     "parent": "6267",
     "data": {
        "data_needed": "N"
      }
},
{
     "id": "6267",
     "text": "RoadElement",
     "parent": "#",
     "data": {
         "data_needed": "N"
     }
},
{
     "id": "6344",
     "text": "GeopoliticalView",
     "parent": "6343",
     "data": {
         "data_needed": "Y"
      }
}];

var optionList =["Option1","Option2","Option3","Option4"];


$('#treeViewDiv').jstree({
'core': {
        'data': jsonData,
        "themes":{"dots" : false}
      },
      "plugins": ["grid", "wholerow", "checkbox"],
            'checkbox': { 
                'tie_selection' : false,
                'whole_node' : false,
                 'three_state' : false
            },
            "grid": {
            columns: [
                {width: 214, header: "Attributes", 
   headerClass:"jtreeHeader", wideCellClass:"jtreeCell",title:"_DATA_"},
                {width: 110, header: "From", headerClass:"jtreeHeader", 
   wideCellClass:"jtreeCell",
                    value:function(node)
                    {
                        if(node.data.data_needed == "Y") 
                        { 
                            var sel_id = "from_"+node.id;
                            return getOptions(sel_id);
                        }
                    },
                    title:"From"},
                {width: 110, header: "To", headerClass:"jtreeHeader", 
  wideCellClass:"jtreeCell",
                    value:function(node)
                    {
                        if(node.data.data_needed == "Y") 
                        { 
                            var sel_id = "to_"+node.id;
                            return getOptions(sel_id);
                        }
                    },
                    title:"To"}
            ],
            "contextmenu":true,
            "resizable":true
            },
     }).bind("loaded.jstree", function (event, data) {
            $(this).jstree("open_all");
  });

function getOptions(id){
  var combo = $("<select></select>").attr("id",id);
  var option = new Option("--Select--", "");
  combo.append($(option));
   for (var i = 0; i < optionList.length; i++) { 
       option = new Option(optionList[i],optionList[i]);
       combo.append($(option));
   }
    return combo;
}

标签： jqueryjquery-uijstree