JQuery easyUi datagrid 中 editor 动态设置最大值最小值
2024-10-10 20:51:00
前言
近来项目中使用到 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 = "";
- }
- }
这样就可以每次输入前都已经设置好了输入范围,所以编辑器激活后已经完成初始化,所以编辑器的大小不会变化。故推荐使用这种方法。
最新文章
- ArcGIS Engine开发前基础知识(3)
- oracle存储过程
- JMeter专题系列(七)聚合报告之 90% Line
- POJ 2251 BFS(简单)
- HTML 5 video 标签跨浏览器兼容
- 循序渐进Python3(三) -- 3 -- 内置函数
- popupWindow弹出来后,背景变暗,半透明
- 仓鼠找sugar(洛谷 3398)
- POJ1637 Sightseeing tour (混合图欧拉回路)(网络流)
- c语言中static的用法
- label语句和break continue的使用(高程第三章)
- 常用语句1【weber出品】
- flex
- Audio Offload
- nodejs querystring踩坑笔记----只能用于表单提交
- 自学Zabbix2.1-安装需求
- Win10 UWP开发系列:解决Win10不同版本的Style差异导致的兼容性问题
- laravel windows安装
- ubuntu下msmtp+mutt的安装和配置
- C#中泛型容器Stack<;T>;的用法,以及借此实现&rdquo;撤销/重做&rdquo;功能
热门文章
- Spring配置--Aop配置详情
- BZOJ4540 Hnoi2016 序列 【莫队+RMQ+单调栈预处理】*
- Python学习-使用Python爬取陈奕迅新歌《我们》网易云热门评论
- 错误:&#39;class QApplication&#39; has no member named &#39;setMainwidget&#39;
- Mac根据端口号查询进程
- MySQL优化之表结构优化的5大建议
- uGUI知识点剖析之RectTransform
- 利用 netsh 给 mysql 开启多端口监听
- 我的 Git 学习过程
- 含锂电池的 PCBA 运输快递时如何包装?