datalist的可用地方比较少,早期很多系统使用datalist做员工多选,角色多选,从左边的数据,选到右边。但怎么用,还是可以灵活运行。比如上图排班使用。
jsp比较简单,定义一个div就可以
<div id="dateList"></div>
排班日期用的My97DatePicker,主要是因为easyui的日期有些弱,年月格式的没有。
<tr>
<td width="25%" style="text-align: right">排班月份:</td>
<td width="75%">
<input type="text" style="width: 90%" id="month" name="month" class="Wdate" οnfοcus="WdatePicker({minDate:'2016-07-01',el:'month', lang:'zh-cn',dateFmt:'yyyy-MM',onpicked:loadDates})"
data-options="width:150,prompt: '排班年月'" />
</td>
</tr>
先对dataList进行初始化,构建dom成datalist
function initDateList(){
dateList = $('#dateList').datalist({fit:true, plain:true, valueField:'valueField',textField:'textField',singleSelect:false});
}
根据排班月份,动态datalist。下面$dp是My97DatePicker特有的传值。因为datalist继承的是datagrid,所以datagrid的method,datalist也都可以使用。
function loadDates(){
var year = $dp.cal.getP('y');
var month = $dp.cal.getP('M');
var day;
var dates = [];
for (var i=1; i<=28; i++){
day = year + '-' + month + '-' + DzmFrame.EasyUI.pad(i,2);
dates.push({valueField:day, textField:day});
}
switch(month){
case '01':case '03':case '05':case '07': case '08':case '10': case '12':
day = year + '-' + month + '-' + '29';
dates.push({valueField:day, textField:day});
day = year + '-' + month + '-' + '30';
dates.push({valueField:day, textField:day});
day = year + '-' + month + '-' + '31';
dates.push({valueField:day, textField:day});
break;
case '04':case '06':case '09':case '11':
day = year + '-' + month + '-' + '29';
dates.push({valueField:day, textField:day});
day = year + '-' + month + '-' + '30';
dates.push({valueField:day, textField:day});
break;
case '02':
if ($.date.isLeapYear(year)){
day = year + '-' + month + '-' + '29';
dates.push({valueField:day, textField:day});
}
break;
}
//
dateList.datalist('loadData',dates);
}