Easyui datagrid combobox輸入框下拉(取消)選值和編輯已選值處理

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>

相關文章
相關標籤/搜索