KendoUI Row绑定下拉菜单.note有很多类似的地方

KendoUI Row绑定下拉菜单.note有很多类似的地方

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=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: "请选择"

});

}

}

4.2第二种改值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);//把选择的值赋给单元格

},

如果是一个列进行选择下拉，可以用change，也可以用select 方法

上面就是只用了change，但是不能对同一行的表格内数据进行联动赋值，所有参考了

https://blog.youkuaiyun.com/a1786223749/article/details/78330908

改用change方法

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));//把总数赋给头部

}

}

});

 

}

 

===================================================================

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

1、普通id或标签的触发

// 失去焦点进行触发

$("#txt_orderMoney").on('blur', function () {

});

//取空格

var orderno = $("#_easyui_textbox_input1").val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');

2、下面是easyUI的grid表格中进行修改或者是添加新的行的时候进行的触发

toolbar: [

{

text: "添加",

iconCls: "icon-add",

handler: function () {

$dg.datagrid('appendRow', {});

var rows = $dg.datagrid('getRows');

$dg.datagrid('beginEdit', rows.length - 1);

//因为是有下标，而且是规律的变化，所有形成这样子

var nu1 = '#_easyui_textbox_input' + (nu+1);

var nu2 = '#_easyui_textbox_input' + (nu+2);

var nu3 = '#_easyui_textbox_input' + (nu+3);

//只要值发生改变就判断

$(nu1).on('input propertychange', function (evt) {

var t = $(nu2).val() * $(nu1).val();

setEditing(rows.length - 1, t);

});

$(nu2).on('input propertychange', function (evt) {

var t = $(nu2).val() * $(nu1).val();

setEditing(rows.length - 1, t);

});

nu = nu + 3;//增加一行，下标需要向下移动

}

},

{

text: "修改",

iconCls: "icon-edit",

handler: function () {

var row = $dg.datagrid('getSelected');

if (row) {

var rowIndex = $dg.datagrid('getRowIndex', row);

$dg.datagrid('beginEdit', rowIndex);

}

var rowsNo = $dg.datagrid('getRowIndex', row);//获取当前行号

var nu1 = '#_easyui_textbox_input' + (nu + 1);

var nu2 = '#_easyui_textbox_input' + (nu + 2);

var nu3 = '#_easyui_textbox_input' + (nu + 3);

//只要值发生改变就判断

$(nu1).on('input propertychange', function (evt) {

var t = $(nu2).val() * $(nu1).val();

setEditing(rowsNo, t);

});

$(nu2).on('input propertychange', function (evt) {

var t = $(nu2).val() * $(nu1).val();

setEditing(rowsNo, t);

});

nu = nu + 3;//增加一行，下标需要向下移动

}

},

{

text: "删除",

iconCls: "icon-remove",

handler: function () {

var row = $dg.datagrid('getSelected');

if (row) {

var rowIndex = $dg.datagrid('getRowIndex', row);

$dg.datagrid('deleteRow', rowIndex);

 

}

}

}

],