easyui dataList动态加载

来源：互联网发布：淘宝武汉飞鱼运动编辑：程序博客网时间：2024/05/01 09:15

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" onfocus="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);}

0 0