kendo

1、复选框

   var TAG_GROUP_STATUS;
    $.ajax({
        url: '${base.contextPath}/mt/gen/type/combox/query/ui',
        data: '{"typeGroup":"TAG_GROUP_STATUS","module":"GENERAL"}',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json;charset=UTF-8",
        success: function (args) {
            if (args.length > 0) {
                TAG_GROUP_STATUS = args;
            }
        },
        async: false
    });

<select required=true class="k-state-required" id="status" data-role="combobox"
        data-value-primitive="true" data-text-field="description" data-value-field="typeCode"
        data-bind="source: TAG_GROUP_STATUS,value:model.status"
        placeholder='<@spring.message "mt.statuscreate"/>'
></select>
<script>
    $("#status").kendoComboBox({
        dataTextField: "description",
        dataValueField: "typeCode",
        valuePrimitive: true,
        dataSource: TAG_GROUP_STATUS
    });
</script>

//data-text-field: 这个select展示得字段。
//data-value-field: 这个select选择后得内容
//data-bind: source绑定总字段， value绑定viewModel值

$("#状态").kendoComboBox({
   dataTextField: "",
   dataValueField: "",
   valuePrimitive: ,
   dataSource: TAG_GROUP_STATUS 
})

2、调用lov

<input type="text"  id="materialId"  placeholder='<@spring.message "默认文字"/>'
 style="width:150px;" data-bind="value:model.materialId,text:model.materialCode">
 <script>
    $("#materialId").kendoLov($.extend(${lovProvider.getLov(base.contextPath, base.locale, "MT_MATERIAL")}, {
          textField: 'materialCode',
          valueField: 'materialId',
          model: viewModelRelative.model,
          change: function(args) {
            var obj = this._dataItem.toJSON();
             viewModelRelative.model.set('materialCodeDesc', obj['materialName']);
          }
       }))
  </script>

3、validator

var validator = $("#mainform").data("kendoValidator");
if (!validator.validate()) {
}else{

Hap.showToast({
    type:'warning',
    message: $l('<@spring.message "mt.ajax.wait.warn"/>'),
    timeOut:1500,
});

kendo.ui.showInfoDialog({
 title: $l('hap.tip.info'),
 message:$l('<@spring.message "mt.need.querydata"/>')
 });

}

4、grid

var viewModelTable = Hap.createGridViewModel("#grid"); //跟普通model得差别是没差别

dataSource = new kendo.data.DataSource({    //dataSource=new kendo.data.DataSource({})

transport: {

read: {
    url: BaseUrl + "/mt/tag/group/assign/query/ui",
    type: "POST",
    dataType: "json"
},

update: {
    url: BaseUrl + "/mt/tag/group/assign/save/ui",
    type: "POST",
    contentType: "application/json"
},
destroy: {
    url: BaseUrl + "/hawk/function/remove",
    type: "POST",
    contentType: "application/json"
},
create: {
    url: BaseUrl + "/mt/tag/group/assign/save/ui",
    type: "POST",
    contentType: "application/json"
},

}

parameterMap: function (options, type) {  //参数

if (type !== "read" && options.models) {
    var datas = Hap.prepareSubmitParameter(options, type);
    var validator = $("#mainform").data("kendoValidator");
    if (!validator.validate()) {
       /* kendo.ui.showInfoDialog({
            title: $l('hap.tip.info'),
            message:$l('<@spring.message "mt.need.querydata"/>')
        });*/
    }
    return kendo.stringify(datas);
} else if (type === "read") {
    var params = Object.assign({},viewModelTable.model.toJSON(),{ tagGroupId: viewModel.model.tagGroupId } );
    return Hap.prepareQueryParameter(params, options);
}

}，
batch: true,

serverPaging: true,
pageSize: 10,
schema: {
            data: 'rows',
            total: 'total',
            model: {
                id: "tagGroupAssignId",
                fields: {
                    serialNumber: {validation: {required: true}},
                    tagCode: {validation: {required: true}},
                    tagDescription: {validation: {required: true}},
                    status: {defaultValue: ''},
                    valueType: {defaultValue: ''},
                    collectionMethod: {defaultValue: ''},
                    valueAllowMissing: {defaultValue: ''},
                    TrueValue: {type: "string"},
                    falseValue: {type: "string"},
                    minimumValue: {type: "string"},
                    maximalValue: {type: "string"},
                    unit: {type: "string"},
                    mandatoryNum: {type: "string"},
                    optionalNum: {type: "string"},
                },
editable: function (col) {
/*                    if (col == 'functionName') {
                        if (!this.isNew()) {
                            return false;
                        }
                        return true;
                    };*/
                    return true;
                }
            }
        }

}）

//datasource赋值

$("#grid").kendoGrid({

   dataSource: dataSource,

   resizable: true,
   scrollable: true,
   navigatable: false,

   autoBind: false,

   selectable: 'multiple, rowbox',

dataBound: function () {
    if (parent.autoResizeIframe) {
       // parent.autoResizeIframe('${RequestParameters.functionCode!}')
    }
},
pageable: {
    pageSizes: [5, 10, 20, 50],
    refresh: true,
    buttonCount: 5
},
columns: [
    {
        field: "serialNumber", //序号
        title: '<@spring.message "mt.serialnumber"/>',
        width: 120
    },
    {
        field: "tagCode",//数据项编码
        title: '<@spring.message "tag.itemcode"/>',
        width: 120,
        template: function(datas) {
            return datas['tagCode']
        },
        editor: function (container, options) {
            $('<input name="' + options.field + '"/>')
                .appendTo(container)
                .kendoLov($.extend(<@lov "MT_TAG"/>, {
                query: function (e) {
                    //e.param['enabledFlag'] = 'Y'
                },
                textField: 'tagCode',
                model: options.model,
                change:function(args) {
                   // console.log(this._dataItem.toJSON());
                    var obj = this._dataItem.toJSON();
                    for (var k in obj) {
                        options.model.set(k, obj[k]);
                    }
                    options.model.set('tagGroupId', viewModel.model.tagGroupId);
                }
            }));
        }
    },
    {
        field: "tagDescription",//数据项描述
        title: '<@spring.message "tag.item.describe"/>',
        width: 120
    },
    {
        field: "status",//状态
        title: '<@spring.message "attachcategory.status"/>',
        width: 120
    },
    {
        field: "valueType",//数据类型
        title: '<@spring.message "mt.valuetype"/>',
        width: 120
    },
    {
        field: "collectionMethod",//数据收集方式
        title: '<@spring.message "tag.item.collection.methods"/>',
        width: 120
    },
    {
        field: "valueAllowMissing",//允许缺失值
        title: '<@spring.message "tag.enable.defect"/>',
        width: 120
    },
    {
        field: "TrueValue",//符合值
        title: '<@spring.message "tag.coincidence.value"/>',
        width: 120
    },
    {
        field: "falseValue",//不符合值
        title: '<@spring.message "tag.non.coincidence.value"/>',
        width: 120
    },
    {
        field: "minimumValue",//最小值
        title: '<@spring.message "tag.min.value"/>',
        width: 120
    },
    {
        field: "maximalValue",//最大值
        title: '<@spring.message "tag.max.value"/>',
        width: 120
    },
    {
        field: "unit",//计量单位
        title: '<@spring.message "tag.measurement.unit"/>',
        width: 120
    },
    {
        field: "mandatoryNum",//必需的数据条数
        title: '<@spring.message "mt.mandatory.num"/>',
        width: 120
    },
    {
        field: "optionalNum",//可选的数据条数
        title: '<@spring.message "tag.optional.data.bars"/>',
        width: 120
    },
],
editable: true，

}）；

5、frame

    $("#dialog").kendoWindow({    //定义iframe
        width: "800px",
        height: "500px",
        title: '<@spring.message "mt.changehistory"/>',
        modal: true,
        resizable: false,
        visible: false,
        iframe: true,
        close: function (e) {}
    });

    var roleWin = $("#dialog").data("kendoWindow");   //刷新iframe，获取iframe内容
        roleWin.refresh('mt_tag_group_history.html?type='+type+'&tagGroupId=' + viewModel.model.tagGroupId);
     if (parent.autoResizeIframe) {
            parent.autoResizeIframe('${RequestParameters.functionCode!}', 700, function () {
                roleWin.center().open();
            });
     } else {
            roleWin.center().open();
    }

6、button

<span class="btn btn-primary" style="float:left;margin-right:5px;"  data-bind="click:add"><@spring.message "hap.new"/></span>
<span class="btn btn-success k-grid-save-changes" style="float:left;margin-right:5px;"data-bind="click:save"><@spring.message "hap.save"/></span>
<span class="btn btn-primary k-grid-save-changes" style="float:left;margin-right:5px;"data-bind="click:changeHistory"><@spring.message "mt.changehistory"/></span>

7、form

 <form id="mainform"   method="post"   enctype="application/json;charset=UTF-8"  style="margin-top:20px"></form>

 kendo.bind($('#mainform'), viewModel);

 var viewModel = kendo.observable({
    model: {},
    query: {}
 })

8、tag

  <div class="col-sm-12 col-xs-12"  style="margin-top:50px;">
        <div class="demo-section k-content">
            <div id="tabstrip" >
                <ul>
                    <li class="k-state-active">
                        <@spring.message "数据项信息"/>
                    </li>
                    <li>
                        <@spring.message "关联对象"/>
                    </li>
                    <li>
                        <@spring.message "扩展字段"/>
                    </li>
                </ul>
           <div></div>
            <div></div>
            <div></div>
          </div>
</div>
</div>

9、css

    .k-tabstrip-items li.k-state-active{
        border-top-color: #ccc;
    }
    .k-tabstrip-items .k-loading{
        border-top:none;
    }
    .k-tabstrip-items .k-state-active .k-link{
        color: #555 !important;
    }
    .k-panelbar>li.k-state-default>.k-link, .k-tabstrip-items .k-state-default .k-link{
        color: #758697;
    }
    button[disabled], html input[disabled]{
        background-color:  rgb(245, 245, 245);
    }
    .k-tabstrip .k-content.k-state-active{
        /* padding-left: 50px;
         padding-top: 50px;*/
        color: #758697;
    }
    .k-tabstrip>.k-content{
        overflow-x: hidden;
    }