JQuery easyUi datagrid 中 editor 动态设置最大值最小值

Posted 2020-09-21 Fight With Me!!!

前言

近来项目中使用到 easyui 来进行页面设计，感觉挺方便的，但是网上除了api外，其他有价值的资料比较少，故在此分享一点经验，供大家参考。

 

问题

JQuery easyUi datagrid 可编辑行的editor属性具有 min 和 max 属性，设置可以输入的最大值和最小值，但是这个是固定的，如下：

[html] view plain copy

 

1. {field:‘workRate‘,title:‘<%/*填报*/%><bean:message key="task.workloadnew.addreport.jsp.message005"/><br><%/*完成率*/%><bean:message key="task.workloadnew.addreport.jsp.message006"/>‘,align:‘center‘,width:50,  
2.                     formatter:function(value, rowData, rowIndex){  
3.                         if(value && value!=0)  
4.                         {  
5.                             return value + ‘%‘;  
6.                         }  
7.                         else  
8.                         {  
9.                             return "";  
10.                         }  
11.                     },  
12.                     editor:{  
13.                         type:‘numberspinner‘,  
14.                         options: {  
15.                             increment:10,  
16.                             min:0,  
17.                             max:100  
18.                         }  
19.                     }  
20.                 }  

min：0，max：100 限定了每次该输入框只能输入的范围是 0 - 100，而我每条记录的输入的范围是根据这条记录来定的，也就是说每次都要重新指定。但是，

苦于editor：{...} 中不带自定义函数。故需要在其他内置函数中想办法。

 

解决办法

a. 在激活编辑状态时触发编辑器重置最大值和最小值

此方法的主要原理是激活编辑状态后，得到编辑器的jquery 对象，设置编辑器的范围，如：

[html] view plain copy

 

1. var editors = $(‘#workloadTable‘).datagrid(‘getEditors‘, rowIndex);  
2.   
3. var workRateEditor = editors[0]; // 百分比编辑框  
4.   
5. workRateEditor.target.numberspinner({min:rowData.minRate,max:rowData.maxRate})  

rowData.minRate 和 rowData.maxRate 是每条记录的填报范围。

 

这个是编辑器激活时进行重置的，但是这个触发有缺点就是，编辑器的初始化已经完成了，而这里会重新初始化，相对于新建了一个编辑器对象，编辑器的宽度会自动调整，这时我们要调整宽度：

[html] view plain copy

 

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

但是还是会有其他问题，比如说每次重写触发的时候，会覆盖原来设置的值，这个操作性就下降了不少。。。也可以进行特殊处理。

b. 在激活编辑器状态前设置

[javascript] view plain copy

 

1. onBeforeEdit:function(rowIndex, rowData)  
2.             {  
3.                 //任务完成100%， 并且已审核通过，不能编辑  
4.                 if(rowData && rowData.status && (rowData.status==‘TASK_ASSIGNER_AUDITED‘ || rowData.status==‘TASK_MONITOR_AUDITED‘) && rowData.finishRate == 100)  
5.                 {  
6.                     return false;  
7.                 }  
8.   
9.                 // 重要! 重新设置百分比填报范围  
10.                 var columnOption = $(‘#workloadTable‘).datagrid(‘getColumnOption‘,"workRate");  
11.                 columnOption.editor.options.min = rowData.minRate;  
12.                 columnOption.editor.options.max = rowData.maxRate;  
13.   
14.                 // 解决单击一行会自动设置最小值的问题  
15.                 if(rowData.workRate == 0)  
16.                 {  
17.                     rowData.workRate = "";  
18.                 }  
19.             }  

这样就可以每次输入前都已经设置好了输入范围，所以编辑器激活后已经完成初始化，所以编辑器的大小不会变化。故推荐使用这种方法。