datagrid combobox输入框下拉(取消)选值和编辑已选值处理
by:授客 qq：1033553122
测试环境
jquery-easyui-1.5.3
需求场景
如下，在datagrid中新增、编辑记录：
新增时通过点选指定combobox下拉列表项来实现选择、取消选择所点项(多选combobx：如果输入框中没有该选项，则选中该项，并自动显示在combobox输入框中,否则取消选中该项，并自动去除combobox中对应的项；)
编辑时，点击下拉三角，打开下拉列表，列表中自动选中同输入框中的值对应的列表项；另外，输入框支持手动输入，如果手动输入的值不在下拉列表中，则收起下拉框时，自动去除不在下拉列表项中的值
实现思路和解决方案
这里新增时利用combobox自带的特性就可以满足需求，问题在于编辑时，怎么让combobox自动识别输入框中的值，即自动让输入框中的已选值和下拉列表项关联。（记录刚进入编辑时，这里的已有值是纯文本，和下拉列表是没有关联的。）
出解决方案之前得先认识下combobox特性
1)如果combobox输入框当前valuefield属性和 textfield属性值可以在下拉列表即通过loaddata获取的选项中找到匹配，则才会产生关联。
2）调用settext设置textfield属性值，然后调用setvalue设置valuefield属性值时，最后执行combobox 的loaddata方法时(如果combobox还没有加载数据的情况下)，就等同于未选中选项的情况下，手动点选下拉列表项，会自动触发onselect事件
3）多选combobox，如果点选下拉列表项，如果点击之前选项已选中，则会取消选中该选项，并去掉combobox中对应项，自动触发onselect事件，onselect事件处理函数携带一个参数，接收被点击项目相关信息(包括text和value信息)，同时这会自动触发onunselect事件，onunselect事件处理函数携带一个参数，用于接收被点击项相关信息(包括text和value信息)
如果点击之前选项未选中，则选中该选项，自动触发onselect事件，并自动在combobx输入框中输入被选项
4）单选combobox（设置combobox为不可编辑，只可点选的情况下做的验证）
如果点击之前选项未选中，则选中该选项，自动触发onselect事件，onselect事件处理函数携带一个参数，接收被点击项目相关信息(包括text和value信息)，并自动在combobx输入框中输入被选项，否则不会触发该事件函数。
5）隐藏、收起combobox下拉列表框时，会自动触发onhidepannel事件，该事件处理函数不携带参数
解决方案：
1）设置所属项目combobox多选，可编辑，为其添加onselect，onunselect,onhidepannel事件处理函数
设置全局变量project_id_list 初始化值为 []，执行onselect事件函数时，判断点选项的value值是否存在project_id_list中，如果存在则移除，否则添加到project_id_list中，当执行onunselect事件函数时，判断点选项的value值是否在project_id_list中，如果已存在，则移除，执行onhidepannel事件函数时，设置combobox的value值为project_id_list；
提交保存记录请求前，转project_id_list为字符串，提交后存储到mysql数据库，获取记录时，返回该值
初始化编辑时，获取所属项目combobox当前text对应的value，转为list形式后（setvalue参数类型要求如此），并调用setvalue函数为combobox赋值，然后调用loaddata函数加载数据，让已选项和下拉列表关联
2）设置所属环境combobox单选，不可编辑，为其添加onselect事件处理函数
设置全局变量envronment_id 初始化值为null，执行onselect事件函数时，保存点选项给 获取所属环境对应的value值为envronment_id
请求保存记录后存储到mysql数据库，获取记录时，返回该值
初始化编辑时，获取所属环境combobox当前text对应的value，调用setvalue函数为combobox赋值，然后调用loaddata函数加载数据，让已选项和下拉列表关联
代码实现(片段)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
……略
<script>
……略
var environment = undefined; // 所属环境
var environment_id = null; // 记录所属环境id
var project_id_list = []; // 所属项目id list
var order = undefined; // 顺序
……略
// 点击 保存 按钮的函数实现
function saverow(){
……略
project_id_list = project_id_list.tostring();
if (ifinsert == true) { // 新增
var url = '/action/adddatabasesetting';
var params = {
……略
environment:environment,
environment_id:environment_id,
……略
project_name:project_name,
project_id:project_id_list,
……略
};
} else if (ifinsert == false) { // 修改
var url = '/action/editdatabasesetting';
var params = {
……略
environment:environment,
environment_id:environment_id,
……略
project_name:project_name,
project_id:project_id_list
};
}
$.post(url, params, function(data,status){
if (data == 'success') {
$.messager.alert('提示','保存成功', 'info');
} else {
$.messager.alert('错误', '保存失败: ' + data, 'error');
}
$('#database_setting').datagrid('reload');
}
);
} else {
$.messager.alert('告警', '保存失败,请检查是否设置必填(必选)项', 'error');
$('#database_setting').datagrid('reload');
}
……略
project_id_list = [];
……略
}
// 点击 取消 按钮的函数实现
function canceleditrow() {
……略
project_id_list = [];
……略
}
// 点击表格 修改 按钮的函数实现
function editrow(rowid, index){
……略
var projecttype = rowsselected[0].project_type;
var projectidlist = rowsselected[0].project_id.split(',');
var envidlist = rowsselected[0].environment_id.tostring().split(',');
// 初始化行组件的值
initdataforrowcomponets(projecttype, '修改', projectidlist, envidlist);
ifinsert = false;
}
}
// 初始化行记录组件值
function initdataforrowcomponets(projecttype, optype, projectidlist, envidlist) {
var environmenteditor = $('#database_setting').datagrid('geteditor', {index: editindex, field: 'environment'});
var projecteditor = $('#database_setting').datagrid('geteditor', {index: editindex, field: 'project_name'});
if (optype == '新增') {
……略
} else if (optype == '修改') {
// 做这一步是为了让项目名称、环境名称已选文本值和下拉列表中的选项关联
$(projecteditor.target).combobox('setvalues', projectidlist);
$(environmenteditor.target).combobox('setvalues', envidlist);
// 请求所属环境下拉列表数据
$.get('/action/getenvs', function(data,status) {
var jsondata = json.parse(data);
if (jsondata['result'] == 'success') {
$(environmenteditor.target).combobox('loaddata', jsondata['data']);
} else {
$.messager.alert('错误信息', '获取可用环境列表出错: ' + jsondata['data'], 'error');
}
});
}
……略
}
// 下拉点选所属项目列表选项时触发的事件
function onselectforprojectcombobox(row) {
var index = project_id_list.indexof(row.id2);
// 如果不存在，则添加记录id属性值到数组，否则移除数组
if(index != -1) {
project_id_list.splice(index, 1);
} else {
project_id_list.push(row.id2);
}
}
//取消所属项目列表项时触发事件
function onunselectforprojectcombobox(row) {
var index = project_id_list.indexof(row.id2.tostring());
if(index != -1) { // 如果被取消项的id值存在数组中，则移除对应id
project_id_list.splice(index, 1);
}
}
// 收起 所属项目 下拉列表框时触发的事件
function onhidepanelforprojectcombobox(row){
// 设置commbox输入框的文本值
var projectnameeditor = $('#database_setting').datagrid('geteditor', {index: editindex, field:'project_name'});
$(projectnameeditor.target).combobox('setvalue', project_id_list);
}
//选择所属环境下拉列表项时触发事件
function onselectforenvcombobox(row) {
environment_id = row.id
}
</script>
</head>
<body>
<table class="easyui-datagrid" rownumbers="true" pagination="true" ……略>
<thead>
<tr>
……略
<th data-options="field:'project_name', align: 'left', editor:{
type:'combobox',
options:{
valuefield:'id2',
textfield:'choice',
required:true,
editable:true,
multiple:true,
panelheight:'auto',
onselect: onselectforprojectcombobox,
onunselect:onunselectforprojectcombobox,
onhidepanel:onhidepanelforprojectcombobox,
}}" width="400px">所属项目</th>
<th data-options="field:'environment', align: 'center', editor:{
type:'combobox',
options:{
valuefield:'id',
textfield:'choice',
required:true,
editable:false,
panelheight:'auto',
onselect:onselectforenvcombobox
}}" width="130px">所属环境</th>
……略
</tr>
</thead>
</table>
……略
</body>
</html>
如对本文有疑问， 点击进行留言回复！！
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
bootstrap-closable-tab可实现关闭的tab标签页插件
vue-cli单页面预渲染seo-prerender-spa-plugin操作
我要评论
网友评论