Kendo UI常见问题

1.必输提示错行问题

现象:

这种错行问题原因如下:

name= "programHeaderId" 
缺少了name属性,导致提示div无法与其关联.

2.Grid第一次进来不查询

3.kendo grid combox实现不重复功能

如图：红框中有VALUE14和13那么其他下拉框则选不到13 14这两个字段

实现代码：

（1）页面创建一个全局变量dbData用来存放数据库的字段

var dbData=null;

（2）从Grid添加事件，数据库将dbData查询

requestEnd:function(e){
            $.ajax({
                url:BaseUrl+"/hscs/ar/templates/getMaxNumAndExistColName?headerId="+headerId,
                type:"get",
                dataType:"json",
                success:function(datas){
                    if(""!=datas){
                        dbData=datas;
                    }else{
                        dbData=null;
                    }
                }
            })
        },

查询：

@RequestMapping(value = "/hscs/ar/templates/getMaxNumAndExistColName")
    @ResponseBody
    public Map getExistColNameByHid(HttpServletRequest request, Long headerId) {
        IRequest iRequest = createRequestContext(request);
        ArTemplateLines arTemplateLines = new ArTemplateLines();
        arTemplateLines.setTemplateHeaderId(headerId);
        List<ArTemplateLines> tempLineList = arTemplateLinesService.select(iRequest, arTemplateLines, 1, 0);
        Map<String, Object> map = new HashMap<>();
        map.put("lineList",tempLineList);
        return map;
    }

前端js处理combox，主要看editor函数：

{//通用字段
                field: "columnName",
                title: '<@spring.message "hscs.ar.ArTemplateLines.columnName"/>',
                width: 120,
                attributes: {"class": "# if(queryFlag) { # grid-readonly  # } else { # grid-required  #}#",style: "text-align:center"},
                headerAttributes: {style: "text-align:center"},
                template: function(dataItem){
                    var v = dataItem.columnName || '';
                    $.each(columnNameData, function (i, n) {
                        if ((n.value || '').toLowerCase() == (v || '').toLowerCase()) {
                            v = n.meaning;
                            return v;
                        }
                    })
                    return v;
                } ,
                editor: function (container, options) {
                    if(!options.model.templateHeaderId){
                        $('<input id="' + options.field + '" class="grid-required" required style="text-align: center" name="' + options.field + '"/>').appendTo(container);
                        //剔除数据库和当前页面里面已经有的字段
                        var findFlag=true;
                        var temporaryCv=[];
                        $.each(columnNameData,function(i,v){
                            //剔除数据库，把所有数据库有的在columnNameData中标记为已使用
                            if(dbData!=null&&dbData.lineList!=null){
                                $.each(dbData.lineList,function(a,b){
                                    if(v.value == b.columnName){
                                        v.useFlag="Y";
                                        findFlag=false;
                                        return false;
                                    }
                                });
                            }
                            //剔除当前页面，把所有当前页面有的在columnNameData中标记为已使用
                            if(findFlag){
                                $.each(dataSource.data(),function(c,d){
                                    if(v.value == d.columnName&&d.templateLineId==""){
                                        v.useFlag="Y";
                                        findFlag=false;
                                        return false;
                                    }
                                });
                            }
                            //如果都没有则标记为未使用，并放入comboBox的dataSource
                            if(findFlag){
                                v.useFlag="N";
                                temporaryCv.push(v);
                            }
                            findFlag=true;
                        });
                        //把那个自己本身的数据也要放在dataSource
                        $.each(columnNameData,function(i,v){
                            if(v.value==options.model.columnName){
                                temporaryCv.push(v);
                            }
                        });
                        $("#columnName").kendoComboBox({
                            optionLabel: '',
                            valuePrimitive: true,
                            dataTextField: "meaning",
                            dataValueField: "value",
                            dataSource: temporaryCv,
                        });
                    }else{
                        $('<input id="' + options.field + '" class="grid-required" disabled style="text-align: center" name="' + options.field + '"/>')
                            .appendTo(container)
                            .kendoComboBox({
                                optionLabel: '',
                                valuePrimitive: true,
                                filter: "contains",
                                dataTextField: "meaning",
                                dataValueField: "value",
                                dataSource: columnNameData
                            });
                    }

                }
            },

原理就是对combox数据源做一个剔除操作，动态赋值。