easyui应用（二）--- calendar,comboTree
程序员文章站
2024-02-03 21:05:10
...
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>上一篇： sklearn决策树实战案例