之前写了篇博客叫:EasyUI——Combobox的onChange事件,今天这篇博客,我们就来谈一谈选课页面的另一个EasyUI控件——numberspinner,说英文可能陌生了,也叫数值微调器。
样子是张酱紫的:
html的样式代码:
<input id="ss" class="easyui-numberspinner" value="25" data-options="increment:5,required:true,min:0,max:100" style="width: 120px;" />
介绍一下几个属性吧:
value:微调器里的数值
data-options:min是微调器的最小值,max是最大值,increment是递增或递减的值
那么,我点击上下两个箭头的时候,如何调整微调器里面的数值呢。
<input id="ss" class="easyui-numberspinner" value="25" data-options="increment:5,required:true,min:0,max:100" οnclick="change('Percent')"/>
一开始,我在onclick事件里调用了js里面的change方法。然而并没有什么卵用。
借鉴combobox的经验。也在js中写了如下的方法:
$(document).ready(function () {
//设置百分比微调器值改变时,datagrid也随之改变-王孟梅-2016年7月16日17:01:29
$('#ss').numberspinner({
"onChange": function changePer(newValue,oldValue)
{if(document.getElementById("Percent").checked){
{
//微调器的值
var ssValue
// 修改页面表格的数据
var rows = $('#dg').datagrid('getSelections');
if (rows.length <= 0) {
$.messager.alert("配课管理", "请选择要配置的课程!", "info");
$("input[name='number']").get(0).checked=false;
$("input[name='number']").get(1).checked=false;
$("input[name='number']").get(2).checked=false;
} else {
//获取值的微调器的值
var ccValue=newValue;
modifyTable(newValue);
return false;
}
}
}
}});
其实跟combobox的onchange事件一样。只是方法的参数为(newValue,oldValue),所以之前一直调不通。