easyui基本元素之日历:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>learn easyui 01</title> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> </head> <body> <table> <tr> <td> common <div class="easyui-calendar" style="width:250px;height:250px;"></div> </td> <td> 定制 <div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div> </td> </tr> <tr> <td> 禁用 <div class="easyui-calendar" style="width:250px;height:250px;" data-options=" validator:validate"></div> </td> </tr> </table> <script> //Math.random()产生0-1的随机数 var d1 = Math.floor((Math.random()*30)+1); //1-31 var d2 = Math.floor((Math.random()*30)+1); function formatDay(date){ var m = date.getMonth()+1; var d = date.getDate(); var opts = $(this).calendar('options'); console.log('month is '+m+', date is '+d); console.log('opts month is '+opts.month+', date is '+opts.date); if (opts.month == m && d == d1){ return '<div class="icon-ok md">' + d + '</div>'; } else if (opts.month == m && d == d2){ return '<div class="icon-search md">' + d + '</div>'; } return d; } function validate(date){ if (date.getDay() == 1){ return true; } else { return false; } } </script> <style scoped="scoped"> .md{ height:16px; line-height:16px; background-position:2px center; text-align:right; font-weight:bold; padding:0 2px; color:red; } </style> </body> </html>
easyui基本元素之复合树:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Multiple ComboTree - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <div style="margin:20px 0"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a> </div> <div style="margin:20px 0"> <span>Cascade Check: </span> <input type="checkbox" checked onclick="$('#cc').combotree({cascadeCheck:$(this).is(':checked')})"> </div> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;"> <div style="margin-bottom:20px"> <input id="cc" class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',label:'Select Nodes:',labelPosition:'top',multiple:true,value:[122,124]" style="width:100%"> </div> </div> <script type="text/javascript"> function getValue(){ var val = $('#cc').combotree('getValue');//如何获取多个选定值,没找到是怎么做 //alert(val); console.log(val); } function setValue(){ //$('#cc').combotree('setValue', 11);//设置单个值 $('#cc').combotree('setValue', [1,11]);//设置多个值 } function disable(){ $('#cc').combotree('disable'); } function enable(){ $('#cc').combotree('enable'); } </script> </body> </html>
扫描二维码关注公众号,回复:
1485237 查看本文章