MVC，在easy ui 中两个下拉框联动处理

来源：互联网发布：公务员取消编制知乎编辑：程序博客网时间：2024/06/05 07:42

最近开始学编程。使用了MVC，EF。界面上使用easy ui。

easy ui遇到一个需求，就是第一个下拉框选择数据后，第二个下拉框的数据要相应的改变。经过网上查资料和泡论坛，终于实现了。

现整理一个，留以后查用，也希望能给其他人提供帮助。

这是实现的界面：

首先在view里定义一个table。注意这个只定义一个table就可以，具体的设置在JS里处理。

接着，建立一个js文件，在文件里编写代码：

$(function () {

//初始化界面上的datagrid
$("#bomdg").datagrid({
toolbar: '#tb',
singleSelect: true,
onClickRow: onClickRow,
columns: [[
{
title: '物料',
field: 'pdm_bomdetail_tb_id_part',
width: 180,
formatter: function (value, row) {
return row.name;
},
editor: {
type: 'combobox', //设置第一个下拉框
options: {
valueField: 'id',
textField: 'name',
method: 'get',
url: '/Bom/GetPartData', //通过action取数据
required: true,
missingMessage: '物料必须输入',
onSelect: function (value) { //当下拉框取值时，设置第二个下拉框的数据
var row = $("#bomdg").datagrid('getSelected');
var rindex = $("#bomdg").datagrid('getRowIndex', row);
bomver = $('#bomdg').datagrid('getEditor', { index: rindex, field: 'pdm_bomdetail_tb_id_part_bom' });
if (value.id == '') return;
//设置版本的下拉数据
$.getJSON('/Bom/GetPartBom', { partid: value.id }, function (data) {//通过action取数据第一个参数是action名称，第二个是action参数｛参数名:值｝，第三个是回调函数
bomver.target.combobox('loadData', data);//第二个下拉框获取数据
bomver.target.combobox("setValue", "");//先清空
edv = $('#bomdg').datagrid('getEditor', { index: rindex, field: 'bom_version' });
$(edv.target).textbox('setValue', "");
});
//设置物料的显示信息的数据
$.getJSON('/Bom/GetSinglePart', { partid: value.id }, function (data) {
var edc = $('#bomdg').datagrid('getEditor', { index: rindex, field: 'part_code' });
$(edc.target).textbox('setValue', data[0].code);

var edn = $('#bomdg').datagrid('getEditor', { index: rindex, field: 'part_name' });
$(edn.target).textbox('setValue', data[0].name);
});
}
}
}
},
{
title: '物料编码',
field: 'part_code',
width: 80,
editor: {
type: 'textbox',
options: {
readonly: true
}
}
},
{
title: '物料名称',
field: 'part_name',
width: 180,
editor: {
type: 'textbox',
options: {
readonly: true
}
}
},
{
title: 'BOM编码',
field: 'pdm_bomdetail_tb_id_part_bom',
width: 120,
formatter: function (value, row) {
return row.bomname;
},
editor: {
type: 'combobox', //设置第二个下拉框
options: {
valueField: 'id',
textField: 'name',
data: databom, //此处的数据是第一个下拉框处理的
onSelect: function (value) {
var row = $("#bomdg").datagrid('getSelected');
var rindex = $("#bomdg").datagrid('getRowIndex', row);
if (value.id == '') return;
//设置物料的显示信息的数据
$.getJSON('/Bom/GetBomVersion', { bomid: value.id }, function (data) {
var edc = $('#bomdg').datagrid('getEditor', { index: rindex, field: 'bom_version' });
$(edc.target).textbox('setValue', data[0].code);
});
}
}
}
},
{
title: 'BOM版本',
field: 'bom_version',
width: 80,
editor: {
type: 'textbox',
options: {
readonly: true
}
}
},
{
title: '数量',
field: 'pdm_bomdetail_tb_qty',
width: 80,
editor: {
type: 'numberbox', options: { precision: 4, min: 0, required: true, missingMessage: '数量必须输入' }
}
}
]]
});

}

这样处理后，就能实现下拉框联动处理了。

JS中使用$.getJSON的地方，URL都是controller/action，在action里返回的是json数据。

return Json(bomdata.getPartList(), JsonRequestBehavior.AllowGet);

其实没有什么技术难度，最主要的是在js里对 onSelect进行处理。

刚使用的时候，不知道在什么地方处理onSelect，如果会这个，其他就都不是问题。

0 0