//easyui地址列信息比较长, 可以加一个tittle悬浮提示的属性 return span即可
{ field: 'address', title: '所属地区', width: '12%', align: 'center' ,
formatter: function (value, rowData, rowIndex){
var add = rowData.address;
if (add.length>=15) {
var subStr = add.substring(0,15) + "...";
return '<span title='+add+'>'+subStr+'</span>';
}else{
return add;
}
}},
$('#provinceId').combobox('select', '330000'); //easyui将指定value的值被选中
easyui自定义验证,使开始日期 结束日期默认选中今天 且 结束日期之后的置为灰色不可选择(这样有一个红色不好看,最后我们对时间的判断还是使用弹框)
$(function () {
//结束日期之后的置灰色不可选择
$('#endDate').datebox().datebox('calendar').calendar({ //用来确定是否可以选择日历上的某一天,返回false将阻止选择某天
validator : function(date){//结束日期
var now = new Date();
var d1 = new Date(now.getFullYear(),now.getMonth(),now.getDate());
return d1 >= date; //这里改为大于(今天及今天以后的不可选中),而不是大于等于
}
});
//开始日期和结束日期默认选择今天
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var clock = year + "-";
if(month < 10) clock += "0";
clock += month + "-";
if(day < 10) clock += "0";
clock += day
$("#endDate").datebox("setValue", ""+clock+"");
$("#beginDate").datebox("setValue", ""+clock+"");//直接date.getMonth()是当前月份减去1
});
//自定义easyui验证 验证开始时间小于结束时间(在endDate的 easyui-datebox 加 validType="end")
$.extend($.fn.validatebox.defaults.rules, {
end: {
validator: function (value, param) {
var startDate = $("#beginDate").val();
var startTmp = new Date(startDate.replace(/-/g, "/"));
var endTmp = new Date(value.replace(/-/g, "/"));
return startTmp <= endTmp;
},
message: '结束时间要大于等于开始时间!'
}
})
2つのドロップダウンボックスコンボボックス連動easyui
<!--单位下拉框-->
<select class="easyui-combobox" name="deptName" id="deptId" label="单位:"
labelPosition="left" data-options="" style="width:20%">
<option value=''>--请选择单位--</option>
<c:forEach items="${officeList}" var="dept" varStatus="status">
<option value="${dept.id}">${dept.name}</option>
</c:forEach>
</select>
<!--项目下拉框-->
<select class="easyui-combobox" name="projectName" id="projectId" label="项目:"
editable="false" labelPosition="left" data-options="" style="width:20%">
<option value=''>--请选择项目--</option>
<c:forEach items="${proList}" var="pro" varStatus="status">
<option value="${pro.id}">${pro.proName}</option>
</c:forEach>
</select>
//这里使用onChange替换onSelect,两者不同之处在于:
// onChange事件用户点击(--请选择单位--)会触发(查询所有单位),
// onSelect事件在用户点击(--请选择单位--)不触发
$("#deptId").combobox({
onChange: function () {
// $("#projectId").combobox("setValue",'');//清空课程
var id = $('#deptId').combobox('getValue');
//如果id为''空串,则查询所有项目,当传入id有值,则查询挂在此单位下的项目
$("#projectId").combobox({
disabled: false,
url: "${baseUrl}/attence/getProjectByDeptId.shtml?deptId=" + id,
//从远程加载列表数据的 URL
valueField: 'id', //这里的id name就是返回的List<Map>中map的键和值
textField: 'name'
});
}
});