Kendo UI知识点学习和使用

作者：艾志谋
时间：2017/10/29
版本：1.0

1.Kendo UI实现Grid中某一个input根据另一个input的值绑定不同的LOV

有时候我们可能会遇到这样的需求：第二个输入框需要绑定一个LOV或者下拉列表，但是这个被绑定的这个LOV和下拉框的数据源是不定的。例如输入框１的值为“A”时，需要为输入框２绑定“LOVⅠ”，当输入框１的值为“B”时，需要输入框２绑定“LOVⅡ”，当输入框１的值为“C”时，需要输入框２绑定别的或者进行别的操作。

这个时候我们可以在输入框2的editor中加一个判断，以输入框1的值作为判断条件，为editor绑定不同的LOV或者下拉框，具体代码如下：

{
    field: "ruleCode",
    title: '<@spring.message "approvenode.approvalrule"/>',
    width: 100,
     headerAttributes: {
         style: "text-align: center"
     },
    template: function (item) {
        return (ruleCodeData.filter(function (elem) {
            return elem.value === item.ruleCode;
        })[0] || {meaning: ''}).meaning;
    },
    editor: function (container, options) {
        $('<input name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "meaning",
                dataValueField: "value",
                valuePrimitive: true,
                dataSource: ruleCodeData,
                select:function (e) {
                    console.log(ruleCodeData)
                }
            });
    }
},
        {
    field: "approver",
    title: '<@spring.message "ApproveRule.approver"/>',
    width: 150,
    headerAttributes: {
        style: "text-align: center"
    },
    editor:function (container,options) {
        if (options.model.ruleCode == "APPOINTED_EMPLOYEE"){
            $('<input required data-required-msg="必输" name="' + options.field + '"/>')
                .appendTo(container).kendoLov({
                code: 'LOV_ACT_EMPLOYEE',
                contextPath: '${base.contextPath}',
                locale: '${base.locale}',
                model: options.model,
                textField: 'name',
                valueField:'name',
                select: function (e) {
                    options.model.set("approverCode",e.item.employeeCode);
                    options.model.set("approver",e.item.name);
                },
                clearButton: false
            });
        }else if (options.model.ruleCode == "APPOINTED_POSITION"){
            $('<input required data-required-msg="必输" name="' + options.field + '"/>')
                .appendTo(container).kendoLov({
                code: 'LOV_POSITION',
                contextPath: '${base.contextPath}',
                locale: '${base.locale}',
                model: options.model,
                textField: 'name',
                valueField:'name',
                select: function (e) {
                    options.model.set("approverCode",e.item.positionCode);
                    options.model.set("approver",e.item.name);
                },
                clearButton: false
            });
        }
    }
}

2.根据需求过滤块码中的某些值

有时候我们可能会碰到这样的需求：第二个输入框绑定了一个块码作为下拉列表的数据源，这个块码是不能变的的，但是需要根据第一个输入框的值决定这个下拉列表中能显示哪些值而不能显示哪些值。例如输入框2绑定了一个下拉列表，下拉列表的数据源是值集A，值集A中的值有1、2、3、4、5五个，当输入框1的值为"a"时，下拉列表显示值1、2、3，隐藏4和5，当输入框1的值为"b"时，将值集A中所有的值都显示出来。

这个时候我们可以将值集中的值做一个过滤。

我们从块码中拿出来的值集是一个json格式的数组，这个数组中存放了块码中的所有值，如下图：

值集.png

这里我们需要用到JavaScript中array对象的一个splice方法，使用方法如下：

var list = [];
list.push(1);
list.push(2);
list.push(3);
console.log(list); // [1, 2, 3]

// 删除
list.splice(0,1);  // 删除  -> 从下标为0开始,长度为1
console.log(list); // [2,3]
list.splice(0,2);  // 删除  -> 从下标为0开始,长度为2
console.log(list); // []

//替换
list.splice(0,1,4); // 替换 -> 从下标为0开始,长度为1的数组元素替换成4
console.log(list);  // [4,2,3]
list.splice(0,2,4); // 替换 -> 从下标为0开始,长度为2的数组元素替换成4(即4,2整体替换成4)
console.log(list);  // [4,3]

//添加
list.splice(1,0,5); // 表示在下标为1处添加一项5
console.log(list);    // [1,5,2,3]   

所以这里我们可以用splice将我们不需要的值删除掉，具体代码如下：

var approvalStrategy = '${RequestParameters.approvalStrategy!0}';
if (approvalStrategy != "ONE_APPROVAL"){
    ruleCodeData.splice(0,4)
}

但是这里我们无法将已删除的数据再还回去，所有如果需要还回去，那还需要找别的办法

3. Kendo UI的数字输入控件

Kendo UI中有针对数字输入优化的输入控件，使用方法很简单，如下代码所示：

{
    field: "nodeSeq",
    title: '<@spring.message "ApproveNode.nodeSeq"/>',
    width: 120,
    headerAttributes: {
        style: "text-align: center"
    },
    editor: function (container, options) {
        $('<input name="' + options.field + '"/>')
            .appendTo(container)
            .kendoNumericTextBox({
                min :0,
                step :1,
                format :"0"
            })
    }
}

核心代码是这段：

.kendoNumericTextBox({
    min :0,
    step :1,
    format :"0"
})

控件名称叫做kendoNumericTextBox，这里的format和step可以实现不同单位和增量效果，具体可以参考kendo ui官方指导