dojo：如何为表格添加从数据库获得存储的下拉框

为表格添加下拉框的例子官网上就有，但如果下拉框的数据是从数据库请求的。需要有一些注意的地方。

首先希望实现的效果如下图所示：

表格初始数据为空，点击查询后获得表格表格数据，但下拉框的数据是在对应的formatter函数中单独向服务器中请求的。

 

大概的步骤如下：

1.初始化表格

                    gridLayout =[{    
                        defaultCell: {  type: cells._Widget, styles: 'text-align: center;'  },                         
                        cells: [ 
                                    { name: "WBS", field: "wbsCode", width: "40px"},                                    
                                    { name:"配置名称",field:"configName",width:"80px"},
                                    { name:"设备名称", field: "equipName", width: "80px" },
                                    { name:"维修项目号", field: "mopNo", width: "60px" },
                                    { name:"维修项目名称", field: "mopName", width: "60px" },
                                    { name:"周期", field: "mlpCode", width: "40px" },
                                    { name:"负责人", field: "personName", width: "80px", formatter: formatterPersonCombobox},
                                    { name:"计划时间", field: "planDate", width: "80px" },
                                    { name:"备件/工具紧缺报警", field: "planDate", width: "80px" }
                                ]
                        }];    
                    
                    storeGrid=new Memory();
                    dataStoreGrid=new ObjectStore({objectStore : storeGrid});
                    grid = new EnhancedGrid({                        
                        structure: gridLayout,        
                        store: dataStoreGrid,
                        "class": "grid",                        
                        escapeHTMLInData: false,
                        noDataMessage: "没有维修项目数据"    ,
                        plugins: {indirectSelection: {headerSelector:true, field: "isChecked",width:"40px", styles:"text-align: center;"}}
                     }, "gridDiv"
                    );    
                    grid.startup(); 

2.填写下拉框对应的formatter函数

                    //创建表格中负责人对应的下拉框的函数    
                    function formatterPersonCombobox() {
                        var    personId="";                                             
                        var selectPerson=new ComboBox({
                            label: "Combo",
                               style: "width: 80px;",
                               placeHolder: "请选择...",                               
                               searchAttr: "name"    //这个属性不能少
                           });
                        request.get("utilSelectGetJsonAction.action?mode=comboBox&utilSelect.selectName=personSelect",{handleAs : "json"})
                              .then(function(data){
                                   //返回的数据在data中，为数组对象形式
                               var storePerson = new Memory({data : data  });                               
                               selectPerson.store=storePerson;//不能是Object类型的Store，好奇怪    
                               selectPerson.startup();
                           });
                        selectPerson._destroyOnRemove = true;
                        return selectPerson;
                    }    

这里需要说明的是request函数请求获得data后，在其对应的then方法里的代码实际上是最后执行的，即selectPerson.startup();是在return selectPerson;后执行的。

这就导致了不能将Combobox的初始化工作放在then里面写，即不能写成这样的代码

            function formatterPersonCombobox() {
                        var    personId="";    
                        request.get("utilSelectGetJsonAction.action?mode=comboBox&utilSelect.selectName=personSelect",{handleAs : "json"})
                              .then(function(data){
                                   //返回的数据在data中，为数组对象形式
                               var storePerson = new Memory({data : data  });    
                               var selectPerson=new ComboBox({
                                    label: "Combo",
                                       style: "width: 80px;",
                                       placeHolder: "请选择...",   
                                       store:storePerson,
                                       searchAttr: "name"    //这个属性不能少
                                       
                                   });                              
                           });
                        selectPerson._destroyOnRemove = true;
                        return selectPerson;
                    }    

上面的代码会导致在Combobox被初始化之前就实际返回了selectPerson，从而发生错误。

 

现在还有一个问题就是所有的Combobox实际上请求的是同一数据源，如果是多条记录，则向服务器发出了多个没必要的get请求，这有待解决。

解决的办法是这样的，因为表格的数据是通过点击查询按钮才获得的。

所以可以在页面第一次加载时就请求下拉框对应的数据源

       //初始化负责人下拉框对应的数据源，即先服务器发出请求，存储在storePerson中，在随后的formatter中直接调用
                    var storePerson=new Memory({});
                    request.get("utilSelectGetJsonAction.action?mode=comboBox&utilSelect.selectName=personSelect",{handleAs : "json"})
                              .then(function(data){                                   
                                  storePerson = new Memory({data : data  });    
                              });    

随后在formatter函数中直接调用即可，因为formatter函数需要点击查询按钮才会执行，所以它会在storePerson = new Memory({data : data });  之后才执行：

                    //创建表格中负责人对应的下拉框的函数    
                    function formatterPersonCombobox() {
                        var    personId="";                                             
                        var selectPerson=new ComboBox({
                            label: "Combo",
                               style: "width: 80px;",
                               placeHolder: "请选择...",  
                               store:storePerson,
                               searchAttr: "name"    //这个属性不能少
                           });                 
                        selectPerson._destroyOnRemove = true;
                        return selectPerson;
                    }

 

 

转载于:https://www.cnblogs.com/qq552048250/p/4573372.html