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";
});