JQuery easyUi datagrid 中 editor 動態設置最大值最小值

前言

近來項目中使用到 easyui 來進行頁面設計，感覺挺方便的，但是網上除了api外，其他有價值的資料比較少，故在此分享一點經驗，供大家參考。

 

問題

JQuery easyUi datagrid 可編輯行的editor屬性具有 min 和 max 屬性，設置可以輸入的最大值和最小值，但是這個是固定的，如下：

{field:'workRate',title:'<%/*填報*/%><bean:message key="task.workloadnew.addreport.jsp.message005"/><br><%/*完成率*/%><bean:message key="task.workloadnew.addreport.jsp.message006"/>',align:'center',width:50,
                    formatter:function(value, rowData, rowIndex){
                        if(value && value!=0)
                        {
                            return value + '%';
                        }
                        else
                        {
                            return "";
                        }
                    },
                    editor:{
                        type:'numberspinner',
                        options: {
                            increment:10,
                            min:0,
                            max:100
                        }
                    }
                }

min：0，max：100 限定了每次該輸入框只能輸入的范圍是 0 - 100，而我每條記錄的輸入的范圍是根據這條記錄來定的，也就是說每次都要重新指定。但是，

苦於editor：{...} 中不帶自定義函數。故需要在其他內置函數中想辦法。

 

解決辦法

a. 在激活編輯狀態時觸發編輯器重置最大值和最小值

此方法的主要原理是激活編輯狀態后，得到編輯器的jquery 對象，設置編輯器的范圍，如：

var editors = $('#workloadTable').datagrid('getEditors', rowIndex);

var workRateEditor = editors[0]; // 百分比編輯框

workRateEditor.target.numberspinner({min:rowData.minRate,max:rowData.maxRate})

rowData.minRate 和 rowData.maxRate 是每條記錄的填報范圍。

 

這個是編輯器激活時進行重置的，但是這個觸發有缺點就是，編輯器的初始化已經完成了，而這里會重新初始化，相對於新建了一個編輯器對象，編輯器的寬度會自動調整，這時我們要調整寬度：

workRateEditor.target.css("width","50");

但是還是會有其他問題，比如說每次重寫觸發的時候，會覆蓋原來設置的值，這個操作性就下降了不少。。。也可以進行特殊處理。

b. 在激活編輯器狀態前設置

onBeforeEdit:function(rowIndex, rowData)
            {
                //任務完成100%， 並且已審核通過，不能編輯
                if(rowData && rowData.status && (rowData.status=='TASK_ASSIGNER_AUDITED' || rowData.status=='TASK_MONITOR_AUDITED') && rowData.finishRate == 100)
                {
                    return false;
                }

                // 重要! 重新設置百分比填報范圍
                var columnOption = $('#workloadTable').datagrid('getColumnOption',"workRate");
                columnOption.editor.options.min = rowData.minRate;
                columnOption.editor.options.max = rowData.maxRate;

                // 解決單擊一行會自動設置最小值的問題
                if(rowData.workRate == 0)
                {
                    rowData.workRate = "";
                }
            }

這樣就可以每次輸入前都已經設置好了輸入范圍，所以編輯器激活后已經完成初始化，所以編輯器的大小不會變化。故推薦使用這種方法。