SurveyJS

SurveyJS中文操作手册,应用案例,使用方法。

surveyjs问卷编辑器“填写全名”组件使用方法

shuju6 2020年07月13日 SurveyJS 392 views 0

默认情况下,surveyjs编辑器是不包含“填写全名”这个组件的。这个组件的使用率在国外比较高,因为中文姓名的习惯都是连起来写的,所以也没有first name和last name的区别,当然姓和名还是有区别的。所以这里简单介绍一下这个组件的使用方法,有需要的用户可以参考。

效果图如下:

surveyjs编辑器全名组件.png

具体实现代码如下:

Survey
    .ComponentCollection
    .Instance
    .add({
        name: "fullname",
        title: "Full Name",
        elementsJSON: [
            {
                type: "text",
                name: "firstName",
                title: "First Name",
                isRequired: true
            }, {
                type: "text",
                name: "lastName",
                title: "Last Name",
                isRequired: true,
                startWithNewLine: false
            },
            
            {
                type: "text",
                name: "middleName",
                title: "Middle Name",
                startWithNewLine: false,
                //初始化隐藏middle name
                visible: false
            }
        ],
        
        onInit() {
            
            Survey
                .Serializer
                .addProperty("fullname", {
                    name: "showMiddleName:boolean",
                    default: false,
                    category: "general"
                });
        },
      
        onLoaded(question) {
            this.changeMiddleVisibility(question);
        },

        onPropertyChanged(question, propertyName, newValue) {
            if (propertyName == "showMiddleName") {
                this.changeMiddleVisibility(question);
            }
        },
      
        changeMiddleVisibility(question) {
            
            let middle = question
                .contentPanel
                .getQuestionByName("middleName");
            if (!!middle) {
                middle.visible = question.showMiddleName === true;
            }
        }
    });


猜你喜欢

发表评论

发表评论:

扫描二维码

手机扫一扫添加微信

18500133569 扫描微信 3157235504