datagrid combobox輸入框下拉(取消)選值和編輯已選值處理html
by:授客 QQ:1033553122mysql
測試環境jquery
jquery-easyui-1.5.3sql
需求場景數據庫
以下,在datagrid中新增、編輯記錄:json
新增時經過點選指定combobox下拉列表項來實現選擇、取消選擇所點項(多選combobx:若是輸入框中沒有該選項,則選中該項,並自動顯示在combobox輸入框中,不然取消選中該項,並自動去除combobox中對應的項;)數組
編輯時,點擊下拉三角,打開下拉列表,列表中自動選中同輸入框中的值對應的列表項;另外,輸入框支持手動輸入,若是手動輸入的值不在下拉列表中,則收起下拉框時,自動去除不在下拉列表項中的值ide
實現思路和解決方案函數
這裏新增時利用combobox自帶的特性就能夠知足需求,問題在於編輯時,怎麼讓combobox自動識別輸入框中的值,即自動讓輸入框中的已選值和下拉列表項關聯。(記錄剛進入編輯時,這裏的已有值是純文本,和下拉列表是沒有關聯的。)post
出解決方案以前得先認識下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>