KendoUI框架的多种下拉进行触发

1、 下面这个是对下拉的时间选择器的触发，只要选择的值改变就触发

  <input id="txt_orderDate" data-bind="value: conditionModel.orderDate"  />  
 //只要时间选择器的日期有改动就触发change
    $("#txt_orderDate").kendoDatePicker({
        value: new Date(),
        format: "yyyy-MM-dd",
        change: function (e) {
            ViewModel.conditionModel.orderDate = e.sender._oldText;
            IndexPager.getInfoToMainFine();
        }
    }).data('kendoDatePicker');
//kendoDatePicker的时间选择器，这个方法是对于查询时候动态获取选择的值进行后台查询操作的
//，只要值有变化，change 函数就会触发，调用方法进行操作

2、下面这个是对普通id,也就是由界面输入值的时候进行的触发，只要值改变就触发

$('#txt_order_Id').on('input propertychange', function (e) {
        var order_Id = $('#txt_order_Id').val();
        ViewModel.conditionModel.order_Id = order_Id;
        IndexPager.getInfoToMainFine();
    });

3、下面是关于两个联动下拉类别的触发，只要选择值，第二个就触发根据值改变。

而且选择值赋值给模板

var mylist = new Array();
var mylist2 = new Array();
var n = 0;
//拼接数据源
for (var t = 0; t < result.Data.length; t++) {
    mylist[t] = {
        'markettName': result.Data[t].Name,
        'mairketId': result.Data[t].Market_Id
    };
    mylist2[t] = {
        'addresstName': result.Data[t].Address,
        'addressId': result.Data[t].Market_Id,
        'mairketId': result.Data[t].Market_Id
    };
}
$("#txt_marketId").kendoDropDownList({
    dataSource: mylist,
    dataTextField: "markettName",
    dataValueField: "mairketId",
    optionLabel: "请选择",
    select(e) { //在这里当选择的时候就赋值给ViewModel中，否则取不到值
        ViewModel.data.Header.marketId = e.dataItem.mairketId;
    }
});

$("#txt_address").kendoDropDownList({
    cascadeFrom: "txt_marketId",//关联第一个下拉框的id,也就是父级id
    //关联id=txt_marketId 的下拉框 
    dataSource: mylist2,
    dataTextField: "addresstName",
    dataValueField: "addressId"
});

4.1 下面这个是在KendoUI单元格内设置了下拉，并且选择时候触发，使其他单元格的值也发生改变

在editor这里开始。真正的触发是 select: function (e) {选择的时候触发

{
    title: Language.GetText(FunctionID + "." + PageID + ".GridHeader.shopp_Id", "CN:商品编号~EN:Shopp Id"),
    field: "shopp_Id",
    attributes: {
        style: "text-align: left;"
    },
    //对于kendoUI单元格里面进行下拉列表操作由此开始
    //这里是获取模版时候就动态获取数据库的信息形成列表模版
    editor: function(container, options) {
        $('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
            dataTextField: "shopp_Id",
            dataValueField: "shopp_Id",
            //orderId:对应此“/DetailPager.apiUrl +”返回对象的一个属性名
            valuePrimitive: true,
            autoBind: true,
            dataSource: mylist, //下拉数据源加载进来         
            dataBound: function(e) {
                //添加的时候下拉表默认选择一个
                if (this.select() === -1) {
                    this.select(0);
                    this.trigger("change"); //真实有效的获取到这个值（而非仅仅显示出来）
                }
            },
            select: function(e) { //这里进行下拉取值并且赋值，不然取不到值
                options.model.set('shopp_Id', e.dataItem.shopp_Id);
                options.model.set('shopp_name', e.dataItem.shopp_name);
                options.model.set('shopp_price', e.dataItem.shopp_price);
            },
            //这里是展示开始的模式
            optionLabel: "请选择"
        });
    }
}

 

这个不仅解决了跨field标签进行改值，同时也很简洁
但是数据源是同一个数据源，也即是拼接在一起了

  mylist[t] = {
 'orderName': result.Data[t].Pruduct_Id, 'shopp_Id': result.Data[t].Pruduct_Id,
 'shopp_name': result.Data[t].Name, 'shopp_nameId': result.Data[t].Name 
  };

4.2//下面这个是在KendoUI单元格内的下拉列表，选择后赋值给页面，当选择值的时候就触发change: function ()

//这里是获取模版时候就动态获取数据库的信息形成下拉列表
editor: function(container, options) {
    $('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
        dataTextField: "shopp_Id",
        dataValueField: "shopp_Id",
        //orderId:对应此“/DetailPager.apiUrl +”返回对象的一个属性名
        valuePrimitive: true,
        autoBind: true,
        dataSource: mylist,
        //数据源
        dataBound: function(e) {
            //添加的时候下拉表默认选择一个
            if (this.select() === -1) {
                this.select(0);
                this.trigger("change"); //真实有效的获取到这个值（而非仅仅显示出来）
            }
        },
        change: function() {
            //修改值后更新下拉列表 
            var filter = {
                logic: "and",
                filters: []
            };
            var Id_filter = {
                field: "shopp_Id",
                operator: "shopp_Id",
                value: this._old
            };
            filter.filters.push(Id_filter); //把选择的值赋给单元格
        },
        //这里是展示开始的模式
        optionLabel: {
            shopp_Id: "请选择商品编号",
        }
    });
}

 其实4.1和4.2都是KendoUI单元格内的下拉选择时候的触发，不过4.1比4.2更好用，而且能跨单元格

 

5、下面是关于KendoUI的kendoGrid单元格内的值改变是的触发

当改变值的时候，就触发此函数.keyup(function (k) {

 DetailPager._grid.kendoGrid({
..........

 edit: function (e) {
                var numericprice = e.container.find("input[name=shopp_price]");
                numericprice.keyup(function (k) {
                    if (!(/(^[0-9]*[1-9][0-9]*$)/.test(this.value)) && !(/^\d*\.?\d{1,2}$/.test(this.value)) && !(/^\d*\.?\d{0}$/.test(this.value))) {
                        alert('请输入正确的价格！');
                            $(this).val('');
                    } else {
                        var unitprice = parseFloat(this.value);
                        var unitnum = parseFloat(e.model.shopp_num);
                        var tt = (unitprice * unitnum);
                        e.container.next().next().html(tt.toFixed(2))//这个只是用来进行展示在表格上而已
                        e.model.tatol_money = tt.toFixed(2);//这个是真正的绑定到数据模型中
                        if (e.sender._data.length > 0) {
                            var allnum =0;
                        for (var i = 0; i < e.sender._data.length; i++) {
                            allnum += (e.sender._data[i].tatol_money) * 1;
                        }
                        $("#txt_orderMoney").val(allnum.toFixed(2));//把总数赋给头部
                        }
                    }
                });

}

 其实kendoDropDownList还有很多定义的方法，如下面所示

 $("#dropdownlist").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            select: onSelect,
            change: onChange,
            close: onClose,
            open: onOpen
        });
               

多选下拉控件kendoMultiSelect的选中触择触发事件

   $("#optionalselect").data("kendoMultiSelect").setOptions(function () {
            var tt = "1";
        });