第四章 Kendo mvvm 项目开发 FROM表单

zht

在kendo mvvm 表单中需要学习如何在逻辑类中建立表单的数据模型，在将数据模型与模板中的from 数据进行绑定。

MVVM 表单绑定ViewModel (例子5)

我们使用的kendo MVVM模式与表单数据进行关联。我们使用了JAVA 面向对象模式进行开发绑定，在javaScript中仅创建模型对象通过kendo 函数将表单中的DOM 与javaScript模型进行对应，达到联动的效果。通过控制javaScript数据模型就可以对表单数据修改获得等操作。

1 创建 Model Kendo 数据模型

1 创建kendo.data.Model 类型数据对象，用于和表单数据进行交互绑定。同时也是 DataSource 数据源绑定数据类型。

const MainModel = kendo.data.Model.define({//定义类型，定义这个json为 kendo 的 Model类型
    id: 'id', 
    fields: { //editable:是否可编辑 false不可编辑
       id: { type: 'string',
            editable: false, nullable: true}//定义数据项的属性内容
export {MainModel};//引包对象设置

Mokel类的常用方法

define

Model类型的创建kendo.data.Model.define({内容})；

editable

是否字段属性是否可编辑的。

isNew
检查 Model 是否是新创建的。通过 id 字段来判断模型数据新与旧。id字段是在 fields 配置指定的默认值。
toJSON
JavaScript对象转换。
var observable = new kendo.data
.ObservableObject({ person: { name: "John Doe" } });
var json = observable.toJSON();
console.log(JSON.stringify(json));
// outputs {"person":{"name":"John Doe"}}

2 Model 数据模型在ViewModel类中定义

                    ViewModel.ts（业务逻辑）                                         
---------------------------------------------------------------------  
import { MainModel } from './Model';//引入创建的数据模型与表单数据绑定用
export default class ViewModel extends  kendo.data.ObservableObject {
    public dataSource: kendo.data.DataSource;//创建数据源引用
    protected _userItem!: kendo.data.Model;//定义数据表单绑定的属性引用
   //构造函数
    constructor() {
        super();
        this.dataSource=new kendo.data.DataSource({data:[
            {name:'z1','age':12,'bz':'2222'},
            {name:'z2','age':1333,'bz':'2222'},
        ]});//创建一个数据源
        this.getUser=new MainModel();//_userItem 在创造函数中初始化这个引用对象
    }                                                      |
    //表单属性引用 封装为getUser()方法名称                      |
    get getUser(): kendo.data.Model{                       |
        return this.get('_userItem');//绑定对象 <----------- |
    }                                                      |
    set getUser(user:kendo.data.Model){                    |
        this.set('_userItem',user);                        |
    }                                                      |
}                                                          |
                    template.ts（模板）                      |                            
------------------------------------------------------     |   
<label for="">名称：</label>                                | //绑定方式
<input data-role="text" name="name" 
 data-bind="value:getUser.name"  />
<label for="">数字：</label>
<input data-role="numerictextbox" name="age"  
 data-bind="value:getUser.age"/>
<label for="">备注：</label>
<textarea data-role="textarea" name="bz" 
 data-bind="value:getUser.bz" />                   
<button data-role="button" type="button" 
 data-bind="click:onSave,enabled:isButtonSave" id="zht">提交信息</button>
<button data-role="button" type="button" 
 data-bind="click:onUpdate,enabled:isButtonUp" id="zht">修改</button>

1 定义一个与HTML表单绑定的属性引用protected _userItem!: kendo.data.Model。
2 创建这个引用的方法引用，为了符合面向对象编程的语言。像java中的pojo类的，get和set方法.
3 在创造函数中初始化这个引用对象。
4 在 template.ts（模板）中绑定html表单元素。data-bind="value:getUser.name"

3 表单数据与grid列表联动

在很多时候为了方便开发，html中的表单提交都需要与grid表单进行联动操作。我们只需调用dataSource引用，使用dataSource提供的方法，就可以达到与引用dataSource的kendo组件进行联动操作的功能。

this.dataSource.add(this.getUser);将新添加数据添加到数据源引用中来。

                    ViewModel.ts（业务逻辑）                                         
---------------------------------------------------------------------  
import { MainModel } from './Model';//引入创建的数据模型与表单数据绑定用
public dataSource: kendo.data.DataSource;//创建数据源引用
    protected _userItem!: kendo.data.Model;
   //构造函数
    constructor() {
        super();
        this.dataSource=new kendo.data.DataSource({data:[
            {name:'z1','age':12,'bz':'2222'},
            {name:'z2','age':1333,'bz':'2222'},
            {name:'z3','age':1333,'bz':'2222'},
        ]});//创建一个数据源
        this.getUser=new MainModel();//数据初始化
    //创建一个添加方法保存表单绑定的数据写入
    public onSave():void{
        this.dataSource.add(this.getUser);
        this.getUser=new MainModel();
      //表单数据和行数据  Model类
    get getUser(): kendo.data.Model{
        return this.get('_userItem');
    set getUser(user:kendo.data.Model){
        this.set('_userItem',user);
                    template.ts（模板）                                              
------------------------------------------------------  
<label for="">名称：</label>                              
<input data-role="text" name="name" 
    data-bind="value:getUser.name"  />
<label for="">数字：</label>
<input data-role="numerictextbox" name="age"  
    data-bind="value:getUser.age"/>
<label for="">备注：</label>
<textarea data-role="textarea" name="bz"      
    data-bind="value:getUser.bz" />                   
<button data-role="button" type="button"
data-bind="click:onSave,enabled:isButtonSave"
id="zht">提交信息</button>
<button data-role="button" type="button" 
data-bind="click:onUpdate,enabled:isButtonUp" 
id="zht">修改</button>
 <div data-role="grid"
      data-selectable="multiple,row"
      data-columns="[
                    { field: 'name', title: '名字', width:150 },
                    { field: 'age', title: '数字', width:200 },
                    { field: 'bz', title: '备注', width:200 },
data-editable="popup"
data-bind="source:dataSource,selected:_sits,events:{change:grid_change}" 
style="height:300px; margin-top:10px;"
id="grid"></div>

2 添加与修改的例子，FROM表单中按钮显示与隐藏功能设置

const MainModel = kendo.data.Model.define({
    id: 'id', 
    fields: {
       id: { type: 'string', editable: false, nullable: true}
export { MainModel};
                    ViewModel.ts（业务逻辑）                                         
---------------------------------------------------------------------  
import { MainModel } from './Model';
export default class ViewModel extends  kendo.data.ObservableObject {
    public dataSource: kendo.data.DataSource;//创建数据源引用
    protected _sits: kendo.data.Model[] = [];
    protected _userItem!: kendo.data.Model;
   //构造函数
    constructor() {
        super();
        this.dataSource=new kendo.data.DataSource({data:[
            {name:'z1','age':12,'bz':'2222'},
            {name:'z2','age':1333,'bz':'2222'},
            {name:'z3','age':1333,'bz':'2222'},
        ]});//创建一个数据源
        this.getUser=new MainModel();//数据初始化
    public onSave():void{
        this.dataSource.add(this.getUser);
        this.getUser=new MainModel();//添加成功后重新创建一个引用
        this.isUp(false);
    public onUpdate():void{
        this.isUp(false);
        this.getUser=new MainModel();//修改成功后重新创建一个引用
    //列表的点击选择事件
    public grid_change():void{
        this.getUser=this.sitsItems[0];
        this.isUp(true);
    //编辑grid组件行数据信息get set方法封装。面向对象编程 
    get sitsItems(): kendo.data.Model[] {
        return this.get('_sits');
    set sitsItems(selected: kendo.data.Model[]) {
        this.set('_sits', selected);
    //表单数据和行数据  Model类
    get getUser(): kendo.data.Model{
        return this.get('_userItem');
    set getUser(user:kendo.data.Model){
        this.set('_userItem',user);
    public isUp(is:boolean):void{
        this.set('isupflag',is);
    //修改按钮显示与隐藏功能
    public isButtonUp():boolean{
        const isflag=this.get('isupflag');
        if(isflag==''){
            return false;
        if(isflag==undefined){
            return false;
        return isflag;
    //添加按钮显示与隐藏功能
    public isButtonSave():boolean{
        const isflag=this.get('isupflag');
        if(isflag==''){
            return true;
        if(isflag==undefined){
            return true;
        return !isflag;
                    template.ts（模板）
------------------------------------------------------  
<label for="">名称：</label>                              
<input data-role="text" name="name" 
        data-bind="value:getUser.name"  />
<label for="">数字：</label>
<input data-role="numerictextbox" name="age"  
        data-bind="value:getUser.age"/>
<label for="">备注：</label>
<textarea data-role="textarea" name="bz"      
        data-bind="value:getUser.bz" />
//click 添加事件 enabled 添加按钮可用与不可用事件
<button data-role="button" type="button" 
    data-bind="click:onSave,enabled:isButtonSave" 
    id="zht">提交信息</button>
<button data-role="button" type="button" 
    data-bind="click:onUpdate,enabled:isButtonUp" 
    id="zht">修改</button>
 <div data-role="grid"
      data-selectable="multiple,row"
      data-columns="[
                    { field: 'name', title: '名字', width:150 },
                    { field: 'age', title: '数字', width:200 },
                    { field: 'bz', title: '备注', width:200 },
data-editable="popup"
data-bind="source:dataSource,selected:_sits,events:{change:grid_change}" 
style="height:300px; margin-top:10px;"
id="grid"></div>

表单验证validate与格式（例子6）

表单验证用户输入的数据是所有项目的重要任务之一，Kendo使用的主要自带验证规则类型有以下几种，输入字段可具有类型，例如 URL ， NUMBER ， RANGE ， DATE ， SEARCH ，和 COLOR 。除了类型之外，还可以通过向 required 输入元素添加其他属性来标记表单元素。

例如，可以将仅接受电子邮件地址的输入字段指定为 type=email 。

kendo验证基础是HTML5功能的验证，如果用户的浏览器是某些旧的版本浏览器或者不支持HTML5功能。那么这些验证功能都将全部无效。


 //required   必填项目
 //validationMessage="名字不能为空"
 //pattern="\d{3}"  正则验证
 //data-pattern-msg="请录入数字"
<form id="testView">//验证form信息内容
     <label for="name">名称不为空：</label>
     <input data-role="text" name="name" 
                required 
                validationMessage="名字不能为空"
                data-bind="value:getUser.name" />
      <label for="money">数字：</label> 
       <input 
                type="text"
                pattern="\d{3}"
                data-bind="value:getUser.money"
                data-pattern-msg="请录入数字"
                name="money" id="money" />
<div data-container-for="" class="k-edit-field">
                <button data-role="button" 
                type="button"
             data-bind="click:onSave" >提交信息验证</button>
</form>
export default class ViewModel extends  kendo.data.ObservableObject {
   public onSave():void{
       //验证testView 信息内容
        const validator = $('#testView').kendoValidator().data('kendoValidator');
        alert(validator.validate());

定义Validator

在模板中template.hbs中的定义一个form元素，在form元素中写所有需要判断html表单内容。

<form id="testView">
</form>

在逻辑类的脚本中引用这个form元素，使用kendo方法进行验证。通过判断验证是否通过，在进行下一步的业务代码。

const validator = $('#testView').kendoValidator().data('kendoValidator');

if(validator.validate()){ //如果通过

业务内容

}

required 必填标签

在html表单中加入这个标签是必填项目，在validationMessage标签中写入必填项没有通过验证后的，提示信息内容。

     <input data-role="text" name="name" 
                required 
                validationMessage="名字不能为空"
                data-bind="value:getUser.name" />

pattern 自定义正则判断

很多情况是需要自己定义一个新的验证规则来进行表单验证的，这个时候我们可以使用 pattern 标签来定义正则，再通过data-pattern-msg标签来定义验证失败后的提示信息内容。

        <input  type="text"
                pattern="\d{3}"
                data-bind="value:getUser.money"
                data-pattern-msg="请录入数字"
                name="money" id="money" />

Number 数字max/min

验证数字类型的表单最大值与最小值。

<input type="number" name="age" min="18" max="42">

date日期类型验证

<input type="date" name="date" data-date-msg="请选择正确的日期类型">

高级应用自定义规则组件

除了上面的的内置消息，我们还可以定义自己的验证类型，创建不同的验证组件，为这些组件定义自己的消息提示。

创建一个 kendo.ui.ValidatorOptions 接口类型额验证

//创建验证组件
const zhtbs :kendo.ui.ValidatorOptions= {
     validationSummary:false //必须定义的
}

rules属性中，设置自定义规则方法。

//创建验证组件
const zhtbs :kendo.ui.ValidatorOptions= {
     validationSummary:false, //必须定义的
     rules: {  //规则集合属性
        custom: function(input:any) {//创建自己的验证规则方法
          if (input.is('[name=namezht]')) {//判断表单的name是否是namezht
               return input.val() === 'zht';//如果是正确，如果不是验证失败
             return true;
}

表单中的每个元素都会运行rules中的自定义规则方法。
验证方法返回true为验证通过，方法false为验证失败。
在 messages属性中创建验证失败后的提示内容。rules中的验证方法名称 custom 与messages中的 custom 名称是对应关系必须一样。

 const zhtbs :kendo.ui.ValidatorOptions= {
            validationSummary:false,
            messages: { //提示信息属性
      -------   custom: '名字必须为zht' //创建custom验证失败后的提示信息
      |      },
      |     rules: {
      | -------  custom: function(input:any) {
                  if (input.is('[name=namezht]')) {
                      return input.val() === 'zht';
                  return true;
        }

data-[rule]-msg [rule] is the failing validation rule
如果不想使用messages 属性的错误提示，可以在表单属性中定义提示信息
data-[rule]-msg 这里 [rule] 自定义验证方法名称。

 <input data-role="text" name="namezht"  //验证表单名称 对应if (input.is('[name=namezht]'))
        data-custom-msg="名称必须为zht"  //错误信息提示
  data-bind="value:getUser.namezht" />

自定义验证类装入验证器中

  const zhtbs :kendo.ui.ValidatorOptions= {
       validationSummary:false,
        messages: {
           custom: '名字必须为zht'
        rules: {
           custom: function(input:any) {
            if (input.is('[name=namezht]')) {
                 return input.val() === 'zht';
                  return true;
                                                //装入验证器中
  const validator = $('#testView').kendoValidator(zhtbs).data('kendoValidator');
                                template.ts（模板）    
----------------------------------------------------------------------------  
<form id="testView">//验证form信息内容
        <input  name="name" 
                required 
                validationMessage="名字不能为空"
                data-bind="value:getUser.name" /> 
        <input 
                type="text"
                pattern="\d{3}"
                data-bind="value:getUser.money"
                data-pattern-msg="请录入数字3位数字"
                  name="money" id="money" />
        <input  name="namezht"           //验证表单名称 对应if (input.is('[name=namezht]'))
                data-custom-msg="名称必须为zht" //错误信息提示
                data-bind="value:getUser.namezht" /> 
            <button  type="button"data-bind="click:onSave" >提交信息验证</button>      
</form>

自定义验证方法可以定义为表单的属性方便引用

   const zhtbs :kendo.ui.ValidatorOptions= {
            validationSummary:false,
            rules: {
                minsize:function(input:any){
                    if (input.is('[minsize]')){//判断表单是否有这个属性标签
                        if(input.val().length<10){//字符长度不能小于10
                            return false;
                    return true;
                maxsize:function(input:any){
                    if (input.is('[minsize]')){//判断表单是否有这个属性标签
                        if(input.val().length>20){//字符长度不能大于20
                        //也可以在maxsize中设定最大值进行判断
                        //获得maxsize属性中设置的最大值进行
                        //alert(input[0].attributes.maxsize.value);
                        //if(input.val().length>input[0].attributes.maxsize.value)
                            return false;
                    return true;
                              template.hbs（模板）    
----------------------------------------------------------------------------     
// maxsize最大字符长度  minsize最小字符长度   required 不为空
     <textarea name="bz" maxsize="20" minsize required 
       data-minsize-msg="字符不能小于10个" data-maxsize-msg="字符不能大于20个"
    data-bind="value:getUser.bz" id="bz" />

开发人员可以根据不同的业务需求来灵活的定义自己的验证方法，在将这些方法与表单进行绑定与关联，来完成自己的业务需求。

data-for 验证提示

开发人员可以自己定义信息提示位置，通过元素data-for="名称"绑定对应验证表单验证元素的名称，在定义一个css样式的 .k-invalid-msg 就完成了。注意使用了data-for 元素必须使用class="k-invalid-msg"来定义样式内容。

// class="k-invalid-msg"必须存在  
<span class="k-invalid-msg" data-for="namezht"></span>
<input data-role="text" name="namezht" <--|    //验证提示名称对应关系建立
         data-bind="value:getUser.namezht" />
DropDownList

From表单（例子7）

kendo表单属性的组件在template.hbs模板中使的时候，需要定义在 data-role 元素中，名字是小写。

参考test7中的代码

checkbox 复选框

使用html中自带的属性checkbox元素进行复选框操作。

通过jquery map方法获得复选框内容

                              template.hbs（模板）    
----------------------------------------------------------------------------   
<input  value="数据一" type="checkbox" name="checkname1"  />
<input  value="数据二" type="checkbox" name="checkname1"  />
<input  value="数据三" type="checkbox" name="checkname1"  />
<button data-role="button" 
type="button" 
data-bind="click:onSave">提交信息验证</button>   
                 ViewModel.ts(业务逻辑类)
------------------------------------------------------------------- 
//获得复选框中内容
public onSave():void{
//通过jquery map方法获得复选框中的value
const cname1=$.map($('input[name=\'checkname1\']:checked')
    .map(function(data,value){ 
       // console.log(data,$(value).val());
        return $(value).val();
   }),n=>{return n});
     this.getUser.set('checkname1',cname1);//复选框内容保存到页面数组
}

默认值通过kendo mvvm中的data-bind="checked:变量"方式进行设置

this.getUser.set('ischeck',true);//默认选择复选框
<input  value="数据一" 
type="checkbox" name="checkname1"  
data-bind="checked:getUser.ischeck"/>

DropDownList 下拉列表

html中的select下拉表单功能，它比select功能更为强大。

//data-role="dropdownlist"下拉列表
   <input data-role="dropdownlist" name="name" 
                  data-source="['下拉一','下拉二']"   //静态定义下拉内容          
                data-bind="value:getUser.name" />

定义有数据源的下拉列表
data-text-field= 数据源中对象的引用名字 html 中select opetion text
data-value-field=数据源中对象的引用名字 html 中select opetion value
data-auto-bind="false" 是否自动加载数据源
data-bind=value:getUser.name1 获得是整个数据源中index索引位置的对象，不是一个值需要在后台将值取出，进行重新操作。

                 ViewModel.ts(业务逻辑类)                        
-----------------------------------------------------------------------------     
this.dataSource=new kendo.data.DataSource({data:[
            {name:'z1',id:12,'bz':'2222'},
            {name:'z2',id:2,'bz':'2222'},
            {name:'z3',id:5,'bz':'2222'},
        ]});//创建一个数据源
                 template.hbs（模板）    
----------------------------------------------------------------------------   
    数据源下拉
       <input data-role="dropdownlist" name="name1" 
          data-text-field="name" 
          data-value-field="id"
          data-auto-bind="false"
          data-bind="value:getUser.name1,source:dataSource" />//引入数据源
                 ViewModel.ts(业务逻辑类)                        
-----------------------------------------------------------------------------             public onSave():void{         
  //获得带数据源的下拉列表的值
  //获得的是整个  {name:'z1',id:12,'bz':'2222'}结构
     alert(this.getUser.get('name1').name);
   //重新操作封装下拉列表的数据值内容
    this.getUser.set('name1',this.getUser.get('name1').name)
}

下拉组件绑定事件
可以绑定以下几种事件 change ，close，open, select

   //数据源下拉加事件
       <input data-role="dropdownlist" name="name2" 
          data-text-field="name" 
          data-value-field="id"
          data-auto-bind="false"
          data-bind="value:getUser.name2,source:dataSource,events:{select: onLSelect}" />
   /**下拉事件**/
    public onLSelect(e:any):void{
        alert(e.item.text());
    }

通过id来操作下拉组件

在逻辑类中通过下拉组件的id,获得下拉组件模板中的引用。获得下拉组件的引用后，使用jquery的方法操作这个下来组件。

    const dropdownlist = $('#name1').data('kendoDropDownList');
    dropdownlist.select(1);

下拉框默认值设置
操作逻辑类中与元素绑定的数据模型对象，为下拉框赋默认值。一般是在构造函数中进行默认值设置。
data-bind=value:getUser.name1 在逻辑类中给name1 一个值

export default class ViewModel extends  kendo.data.ObservableObject {   
constructor() {//构造函数中创建下拉组件的引用
        super();
        this.getUser=new MainModel();//数据初始化 
        this.dataSource=new kendo.data.DataSource({data:[
            {name:'z1',id:12,'bz':'2222'},
            {name:'z2',id:2,'bz':'2222'},
            {name:'z3',id:5,'bz':'2222'},
        ]});//创建一个数据源
        this.getUser.set('name1',5);//设置下拉框默认值
}

DropDownTree 下拉树

下拉树组件与复选框组合使用的一个特色组件。

mvvm数据源使用HierarchicalDataSource
这个组件使用的数据源是特色的kendo.data.HierarchicalDataSource数据源，使用一般的数据源DataSource会报错。
data-bind="value:getUser.nametree" 设置下拉列表值

                 ViewModel.ts(业务逻辑类)                        
-----------------------------------------------------------------------------  
  public dropdowntreeSource:kendo.data.DataSource; 
  constructor() {
         this.dropdowntreeSource=new kendo.data.HierarchicalDataSource({data:[
            {id: 1, text: '一号',items: [
                { id:11,text: '1.1号' },
                { id:11,text: '1.2号' }
            {id: 2, text: '二号',items: [
                { id:21,text: '2.1号',
                items: [
                    { id:211,text: '2.2.1号' }   
        ]});//下拉多选框树     
                 template.hbs（模板）    
----------------------------------------------------------------------------   
  <input data-role="dropdowntree" name="droptreename"        
                   data-placeholder="选择树内容"
                   data-text-field="text"
                   data-value-field="id"
                   data-checkboxes="true"
                   data-value-primitive="true" 
                   style="width:70%;"
    data-bind="source:dropdowntreeSource" />

data-text-field= 数据源中对象的引用名字 html 中select opetion text。
data-value-field=数据源中对象的引用名字 html 中select opetion value。
data-checkboxes= 树为复选框树。

普通from表单绑定

from表单的普通元素也可以通过kendo数据模型进行值绑定，定义一个json数组[{id'':,name:''},{id'':,name:''}]将它装入数据模型中，在template.hbs（模板）中定义一个 select下拉框，使用这个data-bind="source:getUser.sel"绑定这个数组,下拉框显示这个数组对应的数据内容。

单选框与复选框同样的原理，定义一个显示数组，与template.hbs（模板）中的单选框和复选框元素对应绑定data-bind="checked:数组"初始化选择项。


export default class ViewModel extends  kendo.data.ObservableObject {
   //构造函数
    constructor() {
        super();
        this.getUser=new MainModel();//数据初始化 
        this.getUser.set('sel',[//普通下拉框
            { id: 1, name: '部门一' },
            { id: 2, name: '部门二' },
            { id: 3, name: '部门三'}
        this.getUser.set('isxn',[//普通多选框初始值
            '选择一', '选择三'
        this.getUser.set('selectedColor','女');
 public onSave():void{
   alert('普通下拉'+this.getUser.get('puname').id);
    //this.getUser.get('puname').name
   alert('文本框'+this.getUser.get('inputValue')
         +''+this.getUser.get('textareaValue'));
   alert('选择框'+this.getUser.get('selectedColor')
         +' '+this.getUser.get('isxn')[0]);
                 template.hbs（模板）    
----------------------------------------------------------------------------  
<input data-bind="value:getUser.inputValue" /> 
<textarea data-bind="value:getUser.textareaValue"></textarea> 
  <select 
     data-text-field="name" //普通下拉框name属性
     data-value-field="id"  //select value值
    //source:绑定下拉集合对象,value下拉框值
  data-bind="source:getUser.sel,value:getUser.puname">
  </select>
<input type="radio" 
name="sex" value="男" 
data-bind="checked:getUser.selectedColor" />男
<input type="radio" 
name="sex" value="女" 
data-bind="checked:getUser.selectedColor" />女
<input  value="选择一" 
type="checkbox" name="checkname1"  
data-bind="checked:getUser.isxn"/>
<input  value="选择二" type="checkbox" 
name="checkname1"