JavaScript 如何为同类用户数据创建基于Webix的多行输入

Posted 2021-05-20

webix.protoUI({
  name:"multidate",
  $init:function(config){
    config.body = {
      margin:5, rows:[this._getForm("plus")]
    };

    this.$ready.push(() => {
      this._inputs = [this.queryView("form").config.id];
    });  
  },
  _getForm:function(mode){
    const id = webix.uid();
    return {
      view:"form", id:id, borderless:true, padding:0, cols:[
        { view:"text", label:"Step", labelWidth:50, name:"step" },
        { view:"daterangepicker", stringResult:true, name:"time", label:"When", labelWidth:50 }, 
        this._getIcon(mode,id)
      ]
    }
  },
  _getIcon(mode,id){
    return {
      view:"icon", icon:"wxi-"+mode+"-circle", 
      click:() => { 
        if (mode == "plus") this.addInput(); 
        else  this.removeInput(id);
      }
    };
  },
  addInput:function(){
    const section = this.getBody().addView(this._getForm("minus"));
    this._inputs.push(section);
  },
  removeInput:function(id){
    for (var i = 0; i < this._inputs.length; i++){
      if (this._inputs[i] == id){
        this._inputs.splice(i, 1);
        break;
      }
    }
    this.getBody().removeView(id);
  },
  setValue(value){
    const dataLines = value.length; 
    const inputs = this.getChildViews().length;
    const delta = dataLines - inputs;  

    if (delta > 0){
      for (let i = 0; i < delta; i++)
        this.addInput(this);
    }
    else if (delta < 0){
      for (let i = 1; i <= (-1)*delta; i++){
        this.removeInput(inputs-i-1);
      }
    }

    this._inputs.forEach((view, i) => {
      $$(view).setValues(value[i]);
    });
  },
  getValue(){
    let values = [];
    this._inputs.forEach((view) => {
      const vs = $$(view).getValues();
      if (!this._isEmpty(vs))
        values.push(vs);
    });
    return values;
  },
  _isEmpty(obj){
    for (let i in obj){
      if (typeof obj[i] === "object")
        return this._isEmpty(obj[i]);
      else
        if (obj[i]) return false;
    }
    return true;
  }
}, webix.ui.forminput);

var form = { 
  view:"form", id:"form1", margin:10, 
  elementsConfig:{ labelPosition:"top"}, 
  rows:[
    { view:"text", label:"Name", name:"name" }, 
    { view:"text", label:"Email", name:"email" }, 
    { view:"multidate", label:"Qualifications", name:"qualification" },
    { cols:[
      { },
      {
        view:"button", value:"Get values", type:"form",
        click:function(){
          const values = this.getFormView().getValues();
          $$("result").setHTML("<pre>"+JSON.stringify(values, null, 2)+"</pre>");
        }
      }
    ]}
  ]
};

webix.ui({
  view:"scrollview",
  body:{
    rows:[
      form,
      {
        template:"Click <b>Get Values</b> to see the data", id:"result",
        autoheight:true
      }
    ]
  }
}); 

const formData = {
  name:"Dr Arienette Wolfe",
  email:"[e-mail]",
  qualification:[
    { step:"University of Zurich, Doctor of Medicine", time:{ start:"1999-8-1", end:"2005-5-25" }},
    { step:"Internship at Princeton - Plainsboro Teaching Hospital, New Jersey, USA", time:{ start:"2005-8-1", end:"2006-4-30" }}, 
    { step:"Resident Doctor", time:{ start:"2006-5-1", end:"2009-2-31" }},
    { step:"Attending Doctor", time:{ start:"2009-3-1", end:"2013-2-31" }}, 
    { step:"General Practitioner", time:{ start: "2013-4-1", end:null }}
  ]
};

$$("form1").setValues(formData);