This commit is contained in:
季圣华
18
WebRoot/js/easyui-1.3.5/demo/accordion/_content.html
Normal file
18
WebRoot/js/easyui-1.3.5/demo/accordion/_content.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AJAX Content</title>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-size:14px">Here is the content loaded via AJAX.</p>
|
||||
<ul>
|
||||
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
|
||||
<li>easyui provides essential functionality for building modern, interactive, javascript applications.</li>
|
||||
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
|
||||
<li>complete framework for HTML5 web page.</li>
|
||||
<li>easyui save your time and scales while developing your products.</li>
|
||||
<li>easyui is very easy but powerful.</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
54
WebRoot/js/easyui-1.3.5/demo/accordion/actions.html
Normal file
54
WebRoot/js/easyui-1.3.5/demo/accordion/actions.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Accordion Actions - 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>
|
||||
<h2>Accordion Actions</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons below to add or remove accordion items.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">Select</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>
|
||||
</div>
|
||||
<div id="aa" class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function selectPanel(){
|
||||
$.messager.prompt('Prompt','Please enter the panel title:',function(s){
|
||||
if (s){
|
||||
$('#aa').accordion('select',s);
|
||||
}
|
||||
});
|
||||
}
|
||||
var idx = 1;
|
||||
function addPanel(){
|
||||
$('#aa').accordion('add',{
|
||||
title:'Title'+idx,
|
||||
content:'<div style="padding:10px">Content'+idx+'</div>'
|
||||
});
|
||||
idx++;
|
||||
}
|
||||
function removePanel(){
|
||||
var pp = $('#aa').accordion('getSelected');
|
||||
if (pp){
|
||||
var index = $('#aa').accordion('getPanelIndex',pp);
|
||||
$('#aa').accordion('remove',index);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
WebRoot/js/easyui-1.3.5/demo/accordion/ajax.html
Normal file
31
WebRoot/js/easyui-1.3.5/demo/accordion/ajax.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Loading Accordion Content with AJAX - 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>
|
||||
<h2>Loading Accordion Content with AJAX</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click AJAX panel header to load content via AJAX.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="Ajax" data-options="href:'_content.html'" style="padding:10px">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
55
WebRoot/js/easyui-1.3.5/demo/accordion/basic.html
Normal file
55
WebRoot/js/easyui-1.3.5/demo/accordion/basic.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Accordion - 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>
|
||||
<h2>Basic Accordion</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click on panel header to show its content.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
|
||||
<ul class="easyui-tree">
|
||||
<li>
|
||||
<span>Foods</span>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Fruits</span>
|
||||
<ul>
|
||||
<li>apple</li>
|
||||
<li>orange</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span>Vegetables</span>
|
||||
<ul>
|
||||
<li>tomato</li>
|
||||
<li>carrot</li>
|
||||
<li>cabbage</li>
|
||||
<li>potato</li>
|
||||
<li>lettuce</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
WebRoot/js/easyui-1.3.5/demo/accordion/datagrid_data1.json
Normal file
12
WebRoot/js/easyui-1.3.5/demo/accordion/datagrid_data1.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{"total":28,"rows":[
|
||||
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
|
||||
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
|
||||
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
|
||||
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
|
||||
]}
|
||||
36
WebRoot/js/easyui-1.3.5/demo/accordion/expandable.html
Normal file
36
WebRoot/js/easyui-1.3.5/demo/accordion/expandable.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Keep Expandable Panel in Accordion - 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>
|
||||
<h2>Keep Expandable Panel in Accordion</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Keep a expandable panel and prevent it from collapsing.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="Top Panel" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:10px;">
|
||||
<input class="easyui-searchbox" prompt="Enter something here" style="width:300px;height:25px;">
|
||||
</div>
|
||||
<div title="About" data-options="selected:true" style="padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Title1" style="padding:10px">
|
||||
<p>Content1</p>
|
||||
</div>
|
||||
<div title="Title2" style="padding:10px">
|
||||
<p>Content2</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
37
WebRoot/js/easyui-1.3.5/demo/accordion/multiple.html
Normal file
37
WebRoot/js/easyui-1.3.5/demo/accordion/multiple.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple Accordion Panels - 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>
|
||||
<h2>Multiple Accordion Panels</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Enable 'multiple' mode to expand multiple panels at one time.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-accordion" data-options="multiple:true" style="width:500px;height1:300px;">
|
||||
<div title="Language" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<p>A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely.</p>
|
||||
</div>
|
||||
<div title="Java" style="padding:10px;">
|
||||
<p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 135 million (excluding the 3.6 million on the island of Madura which is administered as part of the provinces of Java), Java is the world's most populous island, and one of the most densely populated places in the world.</p>
|
||||
</div>
|
||||
<div title="C#" style="padding:10px;">
|
||||
<p>C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.</p>
|
||||
</div>
|
||||
<div title="Ruby" style="padding:10px;">
|
||||
<p>A dynamic, reflective, general-purpose object-oriented programming language.</p>
|
||||
</div>
|
||||
<div title="Fortran" style="padding:10px;">
|
||||
<p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
51
WebRoot/js/easyui-1.3.5/demo/accordion/tools.html
Normal file
51
WebRoot/js/easyui-1.3.5/demo/accordion/tools.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Accordion Tools - 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>
|
||||
<h2>Accordion Tools</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the tools on top right of panel to perform actions.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one ore more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="DataGrid" style="padding:10px" data-options="
|
||||
selected:true,
|
||||
tools:[{
|
||||
iconCls:'icon-reload',
|
||||
handler:function(){
|
||||
$('#dg').datagrid('reload');
|
||||
}
|
||||
}]">
|
||||
<table id="dg" class="easyui-datagrid"
|
||||
data-options="url:'datagrid_data1.json',method:'get',fit:true,fitColumns:true,singleSelect:true">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product ID</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:150">Attribute</th>
|
||||
<th data-options="field:'status',width:50,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
22
WebRoot/js/easyui-1.3.5/demo/calendar/basic.html
Normal file
22
WebRoot/js/easyui-1.3.5/demo/calendar/basic.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Calendar - 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>
|
||||
<h2>Basic Calendar</h2>
|
||||
<div class="demo-info" style="margin-bottom:10px">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click to select date.</div>
|
||||
</div>
|
||||
|
||||
<div class="easyui-calendar" style="width:180px;height:180px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
WebRoot/js/easyui-1.3.5/demo/calendar/firstday.html
Normal file
33
WebRoot/js/easyui-1.3.5/demo/calendar/firstday.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>First Day of Week - 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>
|
||||
<h2>First Day of Week</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Choose the first day of the week.</div>
|
||||
</div>
|
||||
|
||||
<div style="margin:10px 0">
|
||||
<select onchange="$('#cc').calendar({firstDay:this.value})">
|
||||
<option value="0">Sunday</option>
|
||||
<option value="1">Monday</option>
|
||||
<option value="2">Tuesday</option>
|
||||
<option value="3">Wednesday</option>
|
||||
<option value="4">Thursday</option>
|
||||
<option value="5">Friday</option>
|
||||
<option value="6">Saturday</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
42
WebRoot/js/easyui-1.3.5/demo/combo/basic.html
Normal file
42
WebRoot/js/easyui-1.3.5/demo/combo/basic.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Combo - 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>
|
||||
<h2>Basic Combo</h2>
|
||||
<div class="demo-info" style="margin-bottom:10px">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the right arrow button to show drop down panel that can be filled with any content.</div>
|
||||
</div>
|
||||
<select id="cc" style="width:150px"></select>
|
||||
<div id="sp">
|
||||
<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
|
||||
<input type="radio" name="lang" value="01"><span>Java</span><br/>
|
||||
<input type="radio" name="lang" value="02"><span>C#</span><br/>
|
||||
<input type="radio" name="lang" value="03"><span>Ruby</span><br/>
|
||||
<input type="radio" name="lang" value="04"><span>Basic</span><br/>
|
||||
<input type="radio" name="lang" value="05"><span>Fortran</span>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#cc').combo({
|
||||
required:true,
|
||||
editable:false
|
||||
});
|
||||
$('#sp').appendTo($('#cc').combo('panel'));
|
||||
$('#sp input').click(function(){
|
||||
var v = $(this).val();
|
||||
var s = $(this).next('span').text();
|
||||
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
89
WebRoot/js/easyui-1.3.5/demo/combobox/actions.html
Normal file
89
WebRoot/js/easyui-1.3.5/demo/combobox/actions.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ComboBox Actions - 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>
|
||||
<h2>ComboBox</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons below to perform actions.</div>
|
||||
</div>
|
||||
|
||||
<div style="margin:10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">GetValue</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">Disable</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">Enable</a>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function setvalue(){
|
||||
$.messager.prompt('SetValue','Please input the value(CO,NV,UT,etc):',function(v){
|
||||
if (v){
|
||||
$('#state').combobox('setValue',v);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<select id="state" class="easyui-combobox" name="state" style="width:200px;">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH" selected>Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
73
WebRoot/js/easyui-1.3.5/demo/combobox/basic.html
Normal file
73
WebRoot/js/easyui-1.3.5/demo/combobox/basic.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic ComboBox - 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>
|
||||
<h2>Basic ComboBox</h2>
|
||||
<div class="demo-info" style="margin-bottom:10px">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Type in ComboBox to try auto complete.</div>
|
||||
</div>
|
||||
|
||||
<select class="easyui-combobox" name="state" style="width:200px;">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH" selected>Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
WebRoot/js/easyui-1.3.5/demo/combobox/combobox_data1.json
Normal file
22
WebRoot/js/easyui-1.3.5/demo/combobox/combobox_data1.json
Normal file
@@ -0,0 +1,22 @@
|
||||
[{
|
||||
"id":1,
|
||||
"text":"Java",
|
||||
"desc":"Write once, run anywhere"
|
||||
},{
|
||||
"id":2,
|
||||
"text":"C#",
|
||||
"desc":"One of the programming languages designed for the Common Language Infrastructure"
|
||||
},{
|
||||
"id":3,
|
||||
"text":"Ruby",
|
||||
"selected":true,
|
||||
"desc":"A dynamic, reflective, general-purpose object-oriented programming language"
|
||||
},{
|
||||
"id":4,
|
||||
"text":"Perl",
|
||||
"desc":"A high-level, general-purpose, interpreted, dynamic programming language"
|
||||
},{
|
||||
"id":5,
|
||||
"text":"Basic",
|
||||
"desc":"A family of general-purpose, high-level programming languages"
|
||||
}]
|
||||
47
WebRoot/js/easyui-1.3.5/demo/combobox/combobox_data2.json
Normal file
47
WebRoot/js/easyui-1.3.5/demo/combobox/combobox_data2.json
Normal file
@@ -0,0 +1,47 @@
|
||||
[{
|
||||
"value":"f20",
|
||||
"text":"Firefox 2.0 or higher",
|
||||
"group":"Firefox"
|
||||
},{
|
||||
"value":"f15",
|
||||
"text":"Firefox 1.5.x",
|
||||
"group":"Firefox"
|
||||
},{
|
||||
"value":"f10",
|
||||
"text":"Firefox 1.0.x",
|
||||
"group":"Firefox"
|
||||
},{
|
||||
"value":"ie7",
|
||||
"text":"Microsoft Internet Explorer 7.0 or higher",
|
||||
"group":"Microsoft Internet Explorer"
|
||||
},{
|
||||
"value":"ie6",
|
||||
"text":"Microsoft Internet Explorer 6.x",
|
||||
"group":"Microsoft Internet Explorer"
|
||||
},{
|
||||
"value":"ie5",
|
||||
"text":"Microsoft Internet Explorer 5.x",
|
||||
"group":"Microsoft Internet Explorer"
|
||||
},{
|
||||
"value":"ie4",
|
||||
"text":"Microsoft Internet Explorer 4.x",
|
||||
"group":"Microsoft Internet Explorer"
|
||||
},{
|
||||
"value":"op9",
|
||||
"text":"Opera 9.0 or higher",
|
||||
"group":"Opera"
|
||||
},{
|
||||
"value":"op8",
|
||||
"text":"Opera 8.x",
|
||||
"group":"Opera"
|
||||
},{
|
||||
"value":"op7",
|
||||
"text":"Opera 7.x",
|
||||
"group":"Opera"
|
||||
},{
|
||||
"value":"Safari",
|
||||
"text":"Safari"
|
||||
},{
|
||||
"value":"Other",
|
||||
"text":"Other"
|
||||
}]
|
||||
35
WebRoot/js/easyui-1.3.5/demo/combobox/customformat.html
Normal file
35
WebRoot/js/easyui-1.3.5/demo/combobox/customformat.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Custom Format in ComboBox - 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>
|
||||
<h2>Custom Format in ComboBox</h2>
|
||||
<div class="demo-info" style="margin-bottom:10px">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to custom the format of list item.</div>
|
||||
</div>
|
||||
<input class="easyui-combobox" name="language" data-options="
|
||||
url: 'combobox_data1.json',
|
||||
method: 'get',
|
||||
valueField: 'id',
|
||||
textField: 'text',
|
||||
panelWidth: 350,
|
||||
panelHeight: 'auto',
|
||||
formatter: formatItem
|
||||
">
|
||||
<script type="text/javascript">
|
||||
function formatItem(row){
|
||||
var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
|
||||
'<span style="color:#888">' + row.desc + '</span>';
|
||||
return s;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
25
WebRoot/js/easyui-1.3.5/demo/combobox/dynamicdata.html
Normal file
25
WebRoot/js/easyui-1.3.5/demo/combobox/dynamicdata.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Load Dynamic ComboBox Data - 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>
|
||||
<h2>Load Dynamic ComboBox Data</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the button below to load data.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#language').combobox('reload', 'combobox_data1.json')">LoadData</a>
|
||||
</div>
|
||||
|
||||
<input class="easyui-combobox" id="language" name="language"
|
||||
data-options="valueField:'id',textField:'text'">
|
||||
</body>
|
||||
</html>
|
||||
28
WebRoot/js/easyui-1.3.5/demo/combobox/group.html
Normal file
28
WebRoot/js/easyui-1.3.5/demo/combobox/group.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Group ComboBox - 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>
|
||||
<h2>Group ComboBox</h2>
|
||||
<div class="demo-info" style="margin-bottom:10px">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This example shows how to display combobox items in groups.</div>
|
||||
</div>
|
||||
|
||||
<input class="easyui-combobox" name="browser" style="width:280px;" data-options="
|
||||
url: 'combobox_data2.json',
|
||||
method: 'get',
|
||||
valueField:'value',
|
||||
textField:'text',
|
||||
groupField:'group'
|
||||
">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
WebRoot/js/easyui-1.3.5/demo/combobox/multiple.html
Normal file
30
WebRoot/js/easyui-1.3.5/demo/combobox/multiple.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple Select - 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>
|
||||
<h2>Load Dynamic ComboBox Data</h2>
|
||||
<div class="demo-info" style="margin-bottom:10px">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Drop down the panel and select multiple items.</div>
|
||||
</div>
|
||||
<input class="easyui-combobox"
|
||||
name="language"
|
||||
data-options="
|
||||
url:'combobox_data1.json',
|
||||
method:'get',
|
||||
valueField:'id',
|
||||
textField:'text',
|
||||
multiple:true,
|
||||
panelHeight:'auto'
|
||||
">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
76
WebRoot/js/easyui-1.3.5/demo/combobox/navigation.html
Normal file
76
WebRoot/js/easyui-1.3.5/demo/combobox/navigation.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Navigate ComboBox - 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>
|
||||
<h2>Navigate ComboBox</h2>
|
||||
<div class="demo-info" style="margin-bottom:10px">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Navigate through combobox items width keyboard to select an item.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<input type="checkbox" checked onchange="$('#cc').combobox({selectOnNavigation:$(this).is(':checked')})">
|
||||
<span>SelectOnNavigation</span>
|
||||
</div>
|
||||
|
||||
<select id="cc" class="easyui-combobox" name="state" style="width:200px;">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
29
WebRoot/js/easyui-1.3.5/demo/combobox/remotedata.html
Normal file
29
WebRoot/js/easyui-1.3.5/demo/combobox/remotedata.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Binding to Remote Data - 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>
|
||||
<h2>Binding to Remote Data</h2>
|
||||
<div class="demo-info" style="margin-bottom:10px">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The ComboBox is bound to a remote data.</div>
|
||||
</div>
|
||||
<input class="easyui-combobox"
|
||||
name="language"
|
||||
data-options="
|
||||
url:'combobox_data1.json',
|
||||
method:'get',
|
||||
valueField:'id',
|
||||
textField:'text',
|
||||
panelHeight:'auto'
|
||||
">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
53
WebRoot/js/easyui-1.3.5/demo/combobox/remotejsonp.html
Normal file
53
WebRoot/js/easyui-1.3.5/demo/combobox/remotejsonp.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Remote JSONP - 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>
|
||||
<h2>Remote JSONP</h2>
|
||||
<div class="demo-info" style="margin-bottom:10px">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to use JSONP to retrieve data from a remote site.</div>
|
||||
</div>
|
||||
<input class="easyui-combobox" style="width:250px" data-options="
|
||||
loader: myloader,
|
||||
mode: 'remote',
|
||||
valueField: 'id',
|
||||
textField: 'name'
|
||||
">
|
||||
<script>
|
||||
var myloader = function(param,success,error){
|
||||
var q = param.q || '';
|
||||
if (q.length <= 1){return false}
|
||||
$.ajax({
|
||||
url: 'http://ws.geonames.org/searchJSON',
|
||||
dataType: 'jsonp',
|
||||
data: {
|
||||
featureClass: "P",
|
||||
style: "full",
|
||||
maxRows: 20,
|
||||
name_startsWith: q
|
||||
},
|
||||
success: function(data){
|
||||
var items = $.map(data.geonames, function(item){
|
||||
return {
|
||||
id: item.geonameId,
|
||||
name: item.name + (item.adminName1 ? ', ' + item.adminName1 : '') + ', ' + item.countryName
|
||||
};
|
||||
});
|
||||
success(items);
|
||||
},
|
||||
error: function(){
|
||||
error.apply(this, arguments);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
56
WebRoot/js/easyui-1.3.5/demo/combogrid/actions.html
Normal file
56
WebRoot/js/easyui-1.3.5/demo/combogrid/actions.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ComboGrid Actions - 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>
|
||||
<h2>ComboGrid Actions</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons below to perform actions.</div>
|
||||
</div>
|
||||
<div style="margin:10px 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>
|
||||
<input id="cc" class="easyui-combogrid" style="width:250px" data-options="
|
||||
panelWidth: 500,
|
||||
idField: 'itemid',
|
||||
textField: 'productname',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
columns: [[
|
||||
{field:'itemid',title:'Item ID',width:80},
|
||||
{field:'productname',title:'Product',width:120},
|
||||
{field:'listprice',title:'List Price',width:80,align:'right'},
|
||||
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
|
||||
{field:'attr1',title:'Attribute',width:200},
|
||||
{field:'status',title:'Status',width:60,align:'center'}
|
||||
]],
|
||||
fitColumns: true
|
||||
">
|
||||
<script type="text/javascript">
|
||||
function getValue(){
|
||||
var val = $('#cc').combogrid('getValue');
|
||||
alert(val);
|
||||
}
|
||||
function setValue(){
|
||||
$('#cc').combogrid('setValue', 'EST-13');
|
||||
}
|
||||
function disable(){
|
||||
$('#cc').combogrid('disable');
|
||||
}
|
||||
function enable(){
|
||||
$('#cc').combogrid('enable');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
37
WebRoot/js/easyui-1.3.5/demo/combogrid/basic.html
Normal file
37
WebRoot/js/easyui-1.3.5/demo/combogrid/basic.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic ComboGrid - 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>
|
||||
<h2>Basic ComboGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the right arrow button to show the DataGrid.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0"></div>
|
||||
<select class="easyui-combogrid" style="width:250px" data-options="
|
||||
panelWidth: 500,
|
||||
idField: 'itemid',
|
||||
textField: 'productname',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
columns: [[
|
||||
{field:'itemid',title:'Item ID',width:80},
|
||||
{field:'productname',title:'Product',width:120},
|
||||
{field:'listprice',title:'List Price',width:80,align:'right'},
|
||||
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
|
||||
{field:'attr1',title:'Attribute',width:200},
|
||||
{field:'status',title:'Status',width:60,align:'center'}
|
||||
]],
|
||||
fitColumns: true
|
||||
">
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
||||
12
WebRoot/js/easyui-1.3.5/demo/combogrid/datagrid_data1.json
Normal file
12
WebRoot/js/easyui-1.3.5/demo/combogrid/datagrid_data1.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{"total":28,"rows":[
|
||||
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
|
||||
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
|
||||
{"selected":true,"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
|
||||
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
|
||||
]}
|
||||
36
WebRoot/js/easyui-1.3.5/demo/combogrid/initvalue.html
Normal file
36
WebRoot/js/easyui-1.3.5/demo/combogrid/initvalue.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Initialize Value for ComboGrid - 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>
|
||||
<h2>Initialize Value for ComboGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Initialize value when ComboGrid is created.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0"></div>
|
||||
<input class="easyui-combogrid" style="width:250px" value="EST-12" data-options="
|
||||
panelWidth: 500,
|
||||
idField: 'itemid',
|
||||
textField: 'productname',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
columns: [[
|
||||
{field:'itemid',title:'Item ID',width:80},
|
||||
{field:'productname',title:'Product',width:120},
|
||||
{field:'listprice',title:'List Price',width:80,align:'right'},
|
||||
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
|
||||
{field:'attr1',title:'Attribute',width:200},
|
||||
{field:'status',title:'Status',width:60,align:'center'}
|
||||
]],
|
||||
fitColumns: true
|
||||
">
|
||||
</body>
|
||||
</html>
|
||||
40
WebRoot/js/easyui-1.3.5/demo/combogrid/multiple.html
Normal file
40
WebRoot/js/easyui-1.3.5/demo/combogrid/multiple.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple ComboGrid - 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>
|
||||
<h2>Multiple ComboGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the right arrow button to show the DataGrid and select items.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0"></div>
|
||||
<select class="easyui-combogrid" style="width:250px" data-options="
|
||||
panelWidth: 500,
|
||||
multiple: true,
|
||||
idField: 'itemid',
|
||||
textField: 'productname',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
columns: [[
|
||||
{field:'ck',checkbox:true},
|
||||
{field:'itemid',title:'Item ID',width:80},
|
||||
{field:'productname',title:'Product',width:120},
|
||||
{field:'listprice',title:'List Price',width:80,align:'right'},
|
||||
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
|
||||
{field:'attr1',title:'Attribute',width:200},
|
||||
{field:'status',title:'Status',width:60,align:'center'}
|
||||
]],
|
||||
fitColumns: true
|
||||
">
|
||||
</select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
41
WebRoot/js/easyui-1.3.5/demo/combogrid/navigation.html
Normal file
41
WebRoot/js/easyui-1.3.5/demo/combogrid/navigation.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Navigate ComboGrid - 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>
|
||||
<h2>Navigate ComboGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Navigate through grid items with keyboard to select an item.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0">
|
||||
<input type="checkbox" checked onchange="$('#cc').combogrid({selectOnNavigation:$(this).is(':checked')})">
|
||||
<span>SelectOnNavigation</span>
|
||||
</div>
|
||||
<select id="cc" class="easyui-combogrid" style="width:250px" data-options="
|
||||
panelWidth: 500,
|
||||
idField: 'itemid',
|
||||
textField: 'productname',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
columns: [[
|
||||
{field:'itemid',title:'Item ID',width:80},
|
||||
{field:'productname',title:'Product',width:120},
|
||||
{field:'listprice',title:'List Price',width:80,align:'right'},
|
||||
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
|
||||
{field:'attr1',title:'Attribute',width:200},
|
||||
{field:'status',title:'Status',width:60,align:'center'}
|
||||
]],
|
||||
fitColumns: true
|
||||
">
|
||||
</select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
WebRoot/js/easyui-1.3.5/demo/combotree/actions.html
Normal file
42
WebRoot/js/easyui-1.3.5/demo/combotree/actions.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ComboTree Actions - 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>
|
||||
<h2>ComboTree Actions</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons below to perform actions</div>
|
||||
</div>
|
||||
<div style="margin:10px 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>
|
||||
<input id="cc" class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;">
|
||||
<script type="text/javascript">
|
||||
function getValue(){
|
||||
var val = $('#cc').combotree('getValue');
|
||||
alert(val);
|
||||
}
|
||||
function setValue(){
|
||||
$('#cc').combotree('setValue', '122');
|
||||
}
|
||||
function disable(){
|
||||
$('#cc').combotree('disable');
|
||||
}
|
||||
function enable(){
|
||||
$('#cc').combotree('enable');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
WebRoot/js/easyui-1.3.5/demo/combotree/basic.html
Normal file
22
WebRoot/js/easyui-1.3.5/demo/combotree/basic.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic 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>
|
||||
<h2>Basic ComboTree</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the right arrow button to show the tree panel.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0"></div>
|
||||
<input class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
WebRoot/js/easyui-1.3.5/demo/combotree/initvalue.html
Normal file
22
WebRoot/js/easyui-1.3.5/demo/combotree/initvalue.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Initialize Value for 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>
|
||||
<h2>Initialize Value for ComboTree</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Initialize Value when ComboTree is created.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0"></div>
|
||||
<input class="easyui-combotree" value="122" data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
25
WebRoot/js/easyui-1.3.5/demo/combotree/multiple.html
Normal file
25
WebRoot/js/easyui-1.3.5/demo/combotree/multiple.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!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>
|
||||
<h2>Multiple ComboTree</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the right arrow button to show the tree panel and select multiple nodes.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0">
|
||||
<span>Cascade Check: </span>
|
||||
<input type="checkbox" checked onclick="$('#cc').combotree({cascadeCheck:$(this).is(':checked')})">
|
||||
</div>
|
||||
<select id="cc" class="easyui-combotree" data-options="url:'tree_data1.json',method:'get'" multiple style="width:200px;"></select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
WebRoot/js/easyui-1.3.5/demo/combotree/tree_data1.json
Normal file
49
WebRoot/js/easyui-1.3.5/demo/combotree/tree_data1.json
Normal file
@@ -0,0 +1,49 @@
|
||||
[{
|
||||
"id":1,
|
||||
"text":"My Documents",
|
||||
"children":[{
|
||||
"id":11,
|
||||
"text":"Photos",
|
||||
"state":"closed",
|
||||
"children":[{
|
||||
"id":111,
|
||||
"text":"Friend"
|
||||
},{
|
||||
"id":112,
|
||||
"text":"Wife"
|
||||
},{
|
||||
"id":113,
|
||||
"text":"Company"
|
||||
}]
|
||||
},{
|
||||
"id":12,
|
||||
"text":"Program Files",
|
||||
"children":[{
|
||||
"id":121,
|
||||
"text":"Intel"
|
||||
},{
|
||||
"id":122,
|
||||
"text":"Java",
|
||||
"attributes":{
|
||||
"p1":"Custom Attribute1",
|
||||
"p2":"Custom Attribute2"
|
||||
}
|
||||
},{
|
||||
"id":123,
|
||||
"text":"Microsoft Office"
|
||||
},{
|
||||
"id":124,
|
||||
"text":"Games",
|
||||
"checked":true
|
||||
}]
|
||||
},{
|
||||
"id":13,
|
||||
"text":"index.html"
|
||||
},{
|
||||
"id":14,
|
||||
"text":"about.html"
|
||||
},{
|
||||
"id":15,
|
||||
"text":"welcome.html"
|
||||
}]
|
||||
}]
|
||||
35
WebRoot/js/easyui-1.3.5/demo/datagrid/aligncolumns.html
Normal file
35
WebRoot/js/easyui-1.3.5/demo/datagrid/aligncolumns.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Aligning Columns in DataGrid - 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>
|
||||
<h2>Aligning Columns in DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Use align and halign properties to set the alignment of the columns and their header.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
|
||||
<table class="easyui-datagrid" title="Aligning Columns in DataGrid" style="width:700px;height:250px"
|
||||
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80,halign:'center'">Item ID</th>
|
||||
<th data-options="field:'productid',width:100,halign:'center'">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',halign:'center'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right',halign:'center'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250,halign:'center'">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center',halign:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
35
WebRoot/js/easyui-1.3.5/demo/datagrid/basic.html
Normal file
35
WebRoot/js/easyui-1.3.5/demo/datagrid/basic.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic DataGrid - 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>
|
||||
<h2>Basic DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The DataGrid is created from markup, no JavaScript code needed.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
|
||||
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
|
||||
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
82
WebRoot/js/easyui-1.3.5/demo/datagrid/cellediting.html
Normal file
82
WebRoot/js/easyui-1.3.5/demo/datagrid/cellediting.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Cell Editing in DataGrid - 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>
|
||||
<h2>Cell Editing in DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click a cell to start editing.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
|
||||
<table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto"
|
||||
data-options="
|
||||
iconCls: 'icon-edit',
|
||||
singleSelect: true,
|
||||
url: 'datagrid_data1.json',
|
||||
method:'get',
|
||||
onClickCell: onClickCell
|
||||
">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100,editor:'text'">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript">
|
||||
$.extend($.fn.datagrid.methods, {
|
||||
editCell: function(jq,param){
|
||||
return jq.each(function(){
|
||||
var opts = $(this).datagrid('options');
|
||||
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
|
||||
for(var i=0; i<fields.length; i++){
|
||||
var col = $(this).datagrid('getColumnOption', fields[i]);
|
||||
col.editor1 = col.editor;
|
||||
if (fields[i] != param.field){
|
||||
col.editor = null;
|
||||
}
|
||||
}
|
||||
$(this).datagrid('beginEdit', param.index);
|
||||
for(var i=0; i<fields.length; i++){
|
||||
var col = $(this).datagrid('getColumnOption', fields[i]);
|
||||
col.editor = col.editor1;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var editIndex = undefined;
|
||||
function endEditing(){
|
||||
if (editIndex == undefined){return true}
|
||||
if ($('#dg').datagrid('validateRow', editIndex)){
|
||||
$('#dg').datagrid('endEdit', editIndex);
|
||||
editIndex = undefined;
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function onClickCell(index, field){
|
||||
if (endEditing()){
|
||||
$('#dg').datagrid('selectRow', index)
|
||||
.datagrid('editCell', {index:index,field:field});
|
||||
editIndex = index;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
WebRoot/js/easyui-1.3.5/demo/datagrid/cellstyle.html
Normal file
45
WebRoot/js/easyui-1.3.5/demo/datagrid/cellstyle.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DataGrid Cell Style - 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>
|
||||
<h2>DataGrid Cell Style</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The cells which listprice value is less than 30 are highlighted.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" title="DataGrid Cell Style" style="width:700px;height:250px"
|
||||
data-options="
|
||||
singleSelect: true,
|
||||
iconCls: 'icon-save',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get'
|
||||
">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',styler:cellStyler">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
function cellStyler(value,row,index){
|
||||
if (value < 30){
|
||||
return 'background-color:#ffee00;color:red;';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
WebRoot/js/easyui-1.3.5/demo/datagrid/checkbox.html
Normal file
45
WebRoot/js/easyui-1.3.5/demo/datagrid/checkbox.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CheckBox Selection on DataGrid - 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>
|
||||
<h2>CheckBox Selection on DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the checkbox on header to select or unselect all selections.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
|
||||
<table id="dg" class="easyui-datagrid" title="CheckBox Selection on DataGrid" style="width:700px;height:250px"
|
||||
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'ck',checkbox:true"></th>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:220">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div style="margin:10px 0;">
|
||||
<span>Selection Mode: </span>
|
||||
<select onchange="$('#dg').datagrid({singleSelect:(this.value==0)})">
|
||||
<option value="0">Single Row</option>
|
||||
<option value="1">Multiple Rows</option>
|
||||
</select><br/>
|
||||
SelectOnCheck: <input type="checkbox" checked onchange="$('#dg').datagrid({selectOnCheck:$(this).is(':checked')})"><br/>
|
||||
CheckOnSelect: <input type="checkbox" checked onchange="$('#dg').datagrid({checkOnSelect:$(this).is(':checked')})">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
92
WebRoot/js/easyui-1.3.5/demo/datagrid/clientpagination.html
Normal file
92
WebRoot/js/easyui-1.3.5/demo/datagrid/clientpagination.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Client Side Pagination in DataGrid - 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>
|
||||
<h2>Client Side Pagination in DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to implement client side pagination in DataGrid.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
|
||||
<table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
|
||||
rownumbers:true,
|
||||
singleSelect:true,
|
||||
autoRowHeight:false,
|
||||
pagination:true,
|
||||
pageSize:10">
|
||||
<thead>
|
||||
<tr>
|
||||
<th field="inv" width="80">Inv No</th>
|
||||
<th field="date" width="100">Date</th>
|
||||
<th field="name" width="80">Name</th>
|
||||
<th field="amount" width="80" align="right">Amount</th>
|
||||
<th field="price" width="80" align="right">Price</th>
|
||||
<th field="cost" width="100" align="right">Cost</th>
|
||||
<th field="note" width="110">Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<script>
|
||||
function getData(){
|
||||
var rows = [];
|
||||
for(var i=1; i<=800; i++){
|
||||
var amount = Math.floor(Math.random()*1000);
|
||||
var price = Math.floor(Math.random()*1000);
|
||||
rows.push({
|
||||
inv: 'Inv No '+i,
|
||||
date: $.fn.datebox.defaults.formatter(new Date()),
|
||||
name: 'Name '+i,
|
||||
amount: amount,
|
||||
price: price,
|
||||
cost: amount*price,
|
||||
note: 'Note '+i
|
||||
});
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
function pagerFilter(data){
|
||||
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
|
||||
data = {
|
||||
total: data.length,
|
||||
rows: data
|
||||
}
|
||||
}
|
||||
var dg = $(this);
|
||||
var opts = dg.datagrid('options');
|
||||
var pager = dg.datagrid('getPager');
|
||||
pager.pagination({
|
||||
onSelectPage:function(pageNum, pageSize){
|
||||
opts.pageNumber = pageNum;
|
||||
opts.pageSize = pageSize;
|
||||
pager.pagination('refresh',{
|
||||
pageNumber:pageNum,
|
||||
pageSize:pageSize
|
||||
});
|
||||
dg.datagrid('loadData',data);
|
||||
}
|
||||
});
|
||||
if (!data.originalRows){
|
||||
data.originalRows = (data.rows);
|
||||
}
|
||||
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
|
||||
var end = start + parseInt(opts.pageSize);
|
||||
data.rows = (data.originalRows.slice(start, end));
|
||||
return data;
|
||||
}
|
||||
|
||||
$(function(){
|
||||
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
37
WebRoot/js/easyui-1.3.5/demo/datagrid/columngroup.html
Normal file
37
WebRoot/js/easyui-1.3.5/demo/datagrid/columngroup.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Column Group - 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>
|
||||
<h2>Column Group</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The header cells can be merged. Useful to group columns under a category.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" title="Column Group" style="width:700px;height:250px"
|
||||
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80" rowspan="2">Item ID</th>
|
||||
<th data-options="field:'productid',width:100" rowspan="2">Product</th>
|
||||
<th colspan="4">Item Details</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:240">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
55
WebRoot/js/easyui-1.3.5/demo/datagrid/complextoolbar.html
Normal file
55
WebRoot/js/easyui-1.3.5/demo/datagrid/complextoolbar.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DataGrid Complex Toolbar - 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>
|
||||
<h2>DataGrid Complex Toolbar</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The DataGrid toolbar can be defined from a <div/> markup, so you can define the layout of toolbar easily.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" title="DataGrid Complex Toolbar" style="width:700px;height:250px"
|
||||
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:'#tb'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:240">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div id="tb" style="padding:5px;height:auto">
|
||||
<div style="margin-bottom:5px">
|
||||
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
|
||||
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
|
||||
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
|
||||
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
|
||||
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
|
||||
</div>
|
||||
<div>
|
||||
Date From: <input class="easyui-datebox" style="width:80px">
|
||||
To: <input class="easyui-datebox" style="width:80px">
|
||||
Language:
|
||||
<select class="easyui-combobox" panelHeight="auto" style="width:100px">
|
||||
<option value="java">Java</option>
|
||||
<option value="c">C</option>
|
||||
<option value="basic">Basic</option>
|
||||
<option value="perl">Perl</option>
|
||||
<option value="python">Python</option>
|
||||
</select>
|
||||
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
84
WebRoot/js/easyui-1.3.5/demo/datagrid/contextmenu.html
Normal file
84
WebRoot/js/easyui-1.3.5/demo/datagrid/contextmenu.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Context Menu on DataGrid - 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>
|
||||
<h2>Context Menu on DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Right click on the header of DataGrid to display context menu.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table id="dg"></table>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#dg').datagrid({
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
title: 'Context Menu on DataGrid',
|
||||
iconCls: 'icon-save',
|
||||
width: 700,
|
||||
height: 250,
|
||||
fitColumns: true,
|
||||
singleSelect: true,
|
||||
columns:[[
|
||||
{field:'itemid',title:'Item ID',width:80},
|
||||
{field:'productid',title:'Product ID',width:120},
|
||||
{field:'listprice',title:'List Price',width:80,align:'right'},
|
||||
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
|
||||
{field:'attr1',title:'Attribute',width:250},
|
||||
{field:'status',title:'Status',width:60,align:'center'}
|
||||
]],
|
||||
onHeaderContextMenu: function(e, field){
|
||||
e.preventDefault();
|
||||
if (!cmenu){
|
||||
createColumnMenu();
|
||||
}
|
||||
cmenu.menu('show', {
|
||||
left:e.pageX,
|
||||
top:e.pageY
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
var cmenu;
|
||||
function createColumnMenu(){
|
||||
cmenu = $('<div/>').appendTo('body');
|
||||
cmenu.menu({
|
||||
onClick: function(item){
|
||||
if (item.iconCls == 'icon-ok'){
|
||||
$('#dg').datagrid('hideColumn', item.name);
|
||||
cmenu.menu('setIcon', {
|
||||
target: item.target,
|
||||
iconCls: 'icon-empty'
|
||||
});
|
||||
} else {
|
||||
$('#dg').datagrid('showColumn', item.name);
|
||||
cmenu.menu('setIcon', {
|
||||
target: item.target,
|
||||
iconCls: 'icon-ok'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
var fields = $('#dg').datagrid('getColumnFields');
|
||||
for(var i=0; i<fields.length; i++){
|
||||
var field = fields[i];
|
||||
var col = $('#dg').datagrid('getColumnOption', field);
|
||||
cmenu.menu('appendItem', {
|
||||
text: col.title,
|
||||
name: field,
|
||||
iconCls: 'icon-ok'
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
56
WebRoot/js/easyui-1.3.5/demo/datagrid/custompager.html
Normal file
56
WebRoot/js/easyui-1.3.5/demo/datagrid/custompager.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Custom DataGrid Pager - 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>
|
||||
<h2>Custom DataGrid Pager</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>You can append some buttons to the standard datagrid pager bar.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table id="dg" title="Custom DataGrid Pager" style="width:700px;height:250px"
|
||||
data-options="rownumbers:true,singleSelect:true,pagination:true,url:'datagrid_data1.json',method:'get'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:240">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
|
||||
pager.pagination({
|
||||
buttons:[{
|
||||
iconCls:'icon-search',
|
||||
handler:function(){
|
||||
alert('search');
|
||||
}
|
||||
},{
|
||||
iconCls:'icon-add',
|
||||
handler:function(){
|
||||
alert('add');
|
||||
}
|
||||
},{
|
||||
iconCls:'icon-edit',
|
||||
handler:function(){
|
||||
alert('edit');
|
||||
}
|
||||
}]
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
12
WebRoot/js/easyui-1.3.5/demo/datagrid/datagrid_data1.json
Normal file
12
WebRoot/js/easyui-1.3.5/demo/datagrid/datagrid_data1.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{"total":28,"rows":[
|
||||
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
|
||||
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
|
||||
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
|
||||
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
|
||||
]}
|
||||
15
WebRoot/js/easyui-1.3.5/demo/datagrid/datagrid_data2.json
Normal file
15
WebRoot/js/easyui-1.3.5/demo/datagrid/datagrid_data2.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{"total":28,"rows":[
|
||||
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
|
||||
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
|
||||
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
|
||||
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
|
||||
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
|
||||
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
|
||||
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
|
||||
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
|
||||
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
|
||||
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
|
||||
],"footer":[
|
||||
{"unitcost":19.80,"listprice":60.40,"productid":"Average:"},
|
||||
{"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
|
||||
]}
|
||||
41
WebRoot/js/easyui-1.3.5/demo/datagrid/footer.html
Normal file
41
WebRoot/js/easyui-1.3.5/demo/datagrid/footer.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Footer Rows in DataGrid - 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>
|
||||
<h2>Footer Rows in DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The summary informations can be displayed in footer rows.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" title="Footer Rows in DataGrid" style="width:700px;height:220px"
|
||||
data-options="
|
||||
url: 'datagrid_data2.json',
|
||||
method: 'get',
|
||||
fitColumns: true,
|
||||
singleSelect: true,
|
||||
rownumbers: true,
|
||||
showFooter: true
|
||||
">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:120">Product ID</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
WebRoot/js/easyui-1.3.5/demo/datagrid/formatcolumns.html
Normal file
42
WebRoot/js/easyui-1.3.5/demo/datagrid/formatcolumns.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Format DataGrid Columns - 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>
|
||||
<h2>Format DataGrid Columns</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The list price value will show red color when less than 30.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px"
|
||||
data-options="rownumbers:true,singleSelect:true,iconCls:'icon-ok',url:'datagrid_data1.json',method:'get'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',formatter:formatPrice">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:240">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<script>
|
||||
function formatPrice(val,row){
|
||||
if (val < 30){
|
||||
return '<span style="color:red;">('+val+')</span>';
|
||||
} else {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
38
WebRoot/js/easyui-1.3.5/demo/datagrid/frozencolumns.html
Normal file
38
WebRoot/js/easyui-1.3.5/demo/datagrid/frozencolumns.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Frozen Columns in DataGrid - 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>
|
||||
<h2>Frozen Columns in DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>You can freeze some columns that can't scroll out of view.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"
|
||||
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
|
||||
<thead data-options="frozen:true">
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:100">Item ID</th>
|
||||
<th data-options="field:'productid',width:120">Product</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'listprice',width:90,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
47
WebRoot/js/easyui-1.3.5/demo/datagrid/frozenrows.html
Normal file
47
WebRoot/js/easyui-1.3.5/demo/datagrid/frozenrows.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Frozen Rows in DataGrid - 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>
|
||||
<h2>Frozen Rows in DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to freeze some rows that will always be displayed at the top when the datagrid is scrolled down.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" title="Frozen Rows in DataGrid" style="width:700px;height:250px"
|
||||
data-options="
|
||||
singleSelect: true,
|
||||
collapsible: true,
|
||||
rownumbers: true,
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
onLoadSuccess: function(){
|
||||
$(this).datagrid('freezeRow',0).datagrid('freezeRow',1);
|
||||
}
|
||||
">
|
||||
<thead data-options="frozen:true">
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:100">Item ID</th>
|
||||
<th data-options="field:'productid',width:120">Product</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'listprice',width:90,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:230">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
61
WebRoot/js/easyui-1.3.5/demo/datagrid/mergecells.html
Normal file
61
WebRoot/js/easyui-1.3.5/demo/datagrid/mergecells.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Merge Cells for DataGrid - 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>
|
||||
<h2>Merge Cells for DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Cells in DataGrid body can be merged.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" title="Merge Cells for DataGrid" style="width:700px;height:250px"
|
||||
data-options="
|
||||
rownumbers: true,
|
||||
singleSelect: true,
|
||||
iconCls: 'icon-save',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
onLoadSuccess: onLoadSuccess
|
||||
">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:240">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
function onLoadSuccess(data){
|
||||
var merges = [{
|
||||
index: 2,
|
||||
rowspan: 2
|
||||
},{
|
||||
index: 5,
|
||||
rowspan: 2
|
||||
},{
|
||||
index: 7,
|
||||
rowspan: 2
|
||||
}];
|
||||
for(var i=0; i<merges.length; i++){
|
||||
$(this).datagrid('mergeCells',{
|
||||
index: merges[i].index,
|
||||
field: 'productid',
|
||||
rowspan: merges[i].rowspan
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
40
WebRoot/js/easyui-1.3.5/demo/datagrid/multisorting.html
Normal file
40
WebRoot/js/easyui-1.3.5/demo/datagrid/multisorting.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple Sorting - 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>
|
||||
<h2>Multiple Sorting</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Set 'multiSort' property to true to enable multiple column sorting.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
|
||||
<table class="easyui-datagrid" title="Multiple Sorting" style="width:700px;height:250px"
|
||||
data-options="singleSelect:true,collapsible:true,
|
||||
url:'datagrid_data1.json',
|
||||
method:'get',
|
||||
remoteSort:false,
|
||||
multiSort:true
|
||||
">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80,sortable:true">Item ID</th>
|
||||
<th data-options="field:'productid',width:100,sortable:true">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',sortable:true">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right',sortable:true">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
9
WebRoot/js/easyui-1.3.5/demo/datagrid/products.json
Normal file
9
WebRoot/js/easyui-1.3.5/demo/datagrid/products.json
Normal file
@@ -0,0 +1,9 @@
|
||||
[
|
||||
{"productid":"FI-SW-01","productname":"Koi"},
|
||||
{"productid":"K9-DL-01","productname":"Dalmation"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake"},
|
||||
{"productid":"RP-LI-02","productname":"Iguana"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian"},
|
||||
{"productid":"AV-CB-01","productname":"Amazon Parrot"}
|
||||
]
|
||||
63
WebRoot/js/easyui-1.3.5/demo/datagrid/rowborder.html
Normal file
63
WebRoot/js/easyui-1.3.5/demo/datagrid/rowborder.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Row Border in DataGrid - 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>
|
||||
<h2>Row Border in DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to change the row border style of datagrid.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<span>Border:</span>
|
||||
<select onchange="changeBorder(this.value)">
|
||||
<option value="lines-both">Both</option>
|
||||
<option value="lines-no">No Border</option>
|
||||
<option value="lines-right">Right Border</option>
|
||||
<option value="lines-bottom">Bottom Border</option>
|
||||
</select>
|
||||
<span>Striped:</span>
|
||||
<input type="checkbox" onclick="$('#dg').datagrid({striped:$(this).is(':checked')})">
|
||||
</div>
|
||||
<table id="dg" class="easyui-datagrid" title="Row Border in DataGrid" style="width:700px;height:250px"
|
||||
data-options="singleSelect:true,fitColumns:true,url:'datagrid_data1.json',method:'get'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
function changeBorder(cls){
|
||||
$('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls);
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.lines-both .datagrid-body td{
|
||||
}
|
||||
.lines-no .datagrid-body td{
|
||||
border-right:1px dotted transparent;
|
||||
border-bottom:1px dotted transparent;
|
||||
}
|
||||
.lines-right .datagrid-body td{
|
||||
border-bottom:1px dotted transparent;
|
||||
}
|
||||
.lines-bottom .datagrid-body td{
|
||||
border-right:1px dotted transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
116
WebRoot/js/easyui-1.3.5/demo/datagrid/rowediting.html
Normal file
116
WebRoot/js/easyui-1.3.5/demo/datagrid/rowediting.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Row Editing in DataGrid - 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>
|
||||
<h2>Row Editing in DataGrid</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the row to start editing.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
|
||||
<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"
|
||||
data-options="
|
||||
iconCls: 'icon-edit',
|
||||
singleSelect: true,
|
||||
toolbar: '#tb',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
onClickRow: onClickRow
|
||||
">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100,
|
||||
formatter:function(value,row){
|
||||
return row.productname;
|
||||
},
|
||||
editor:{
|
||||
type:'combobox',
|
||||
options:{
|
||||
valueField:'productid',
|
||||
textField:'productname',
|
||||
url:'products.json',
|
||||
required:true
|
||||
}
|
||||
}">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<div id="tb" style="height:auto">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var editIndex = undefined;
|
||||
function endEditing(){
|
||||
if (editIndex == undefined){return true}
|
||||
if ($('#dg').datagrid('validateRow', editIndex)){
|
||||
var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});
|
||||
var productname = $(ed.target).combobox('getText');
|
||||
$('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
|
||||
$('#dg').datagrid('endEdit', editIndex);
|
||||
editIndex = undefined;
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function onClickRow(index){
|
||||
if (editIndex != index){
|
||||
if (endEditing()){
|
||||
$('#dg').datagrid('selectRow', index)
|
||||
.datagrid('beginEdit', index);
|
||||
editIndex = index;
|
||||
} else {
|
||||
$('#dg').datagrid('selectRow', editIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
function append(){
|
||||
if (endEditing()){
|
||||
$('#dg').datagrid('appendRow',{status:'P'});
|
||||
editIndex = $('#dg').datagrid('getRows').length-1;
|
||||
$('#dg').datagrid('selectRow', editIndex)
|
||||
.datagrid('beginEdit', editIndex);
|
||||
}
|
||||
}
|
||||
function removeit(){
|
||||
if (editIndex == undefined){return}
|
||||
$('#dg').datagrid('cancelEdit', editIndex)
|
||||
.datagrid('deleteRow', editIndex);
|
||||
editIndex = undefined;
|
||||
}
|
||||
function accept(){
|
||||
if (endEditing()){
|
||||
$('#dg').datagrid('acceptChanges');
|
||||
}
|
||||
}
|
||||
function reject(){
|
||||
$('#dg').datagrid('rejectChanges');
|
||||
editIndex = undefined;
|
||||
}
|
||||
function getChanges(){
|
||||
var rows = $('#dg').datagrid('getChanges');
|
||||
alert(rows.length+' rows are changed!');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
34
WebRoot/js/easyui-1.3.5/demo/datagrid/rowstyle.html
Normal file
34
WebRoot/js/easyui-1.3.5/demo/datagrid/rowstyle.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DataGrid Row Style - 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>
|
||||
<h2>DataGrid Row Style</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The rows which listprice value is less than 30 are highlighted.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table>
|
||||
<!-- <table class="easyui-datagrid" title="DataGrid Row Style" style="width:700px;height:250px" data-options="singleSelect: true,iconCls: 'icon-save',url: 'datagrid_data1.json',method: 'get',rowStyler: function(index,row){if (row.listprice < 30){return 'background-color:#6293BB;color:#fff;font-weight:bold;';}}">-->
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
60
WebRoot/js/easyui-1.3.5/demo/datagrid/selection.html
Normal file
60
WebRoot/js/easyui-1.3.5/demo/datagrid/selection.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DataGrid Selection - 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>
|
||||
<h2>DataGrid Selection</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Choose a selection mode and select one or more rows.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="#" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a>
|
||||
<a href="#" class="easyui-linkbutton" onclick="getSelections()">GetSelections</a>
|
||||
</div>
|
||||
<table id="dg" class="easyui-datagrid" title="DataGrid Selection" style="width:700px;height:250px"
|
||||
data-options="singleSelect:true,url:'datagrid_data1.json',method:'get'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div style="margin:10px 0;">
|
||||
<span>Selection Mode: </span>
|
||||
<select onchange="$('#dg').datagrid({singleSelect:(this.value==0)})">
|
||||
<option value="0">Single Row</option>
|
||||
<option value="1">Multiple Rows</option>
|
||||
</select>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function getSelected(){
|
||||
var row = $('#dg').datagrid('getSelected');
|
||||
if (row){
|
||||
$.messager.alert('Info', row.itemid+":"+row.productid+":"+row.attr1);
|
||||
}
|
||||
}
|
||||
function getSelections(){
|
||||
var ss = [];
|
||||
var rows = $('#dg').datagrid('getSelections');
|
||||
for(var i=0; i<rows.length; i++){
|
||||
var row = rows[i];
|
||||
ss.push('<span>'+row.itemid+":"+row.productid+":"+row.attr1+'</span>');
|
||||
}
|
||||
$.messager.alert('Info', ss.join('<br/>'));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
WebRoot/js/easyui-1.3.5/demo/datagrid/simpletoolbar.html
Normal file
48
WebRoot/js/easyui-1.3.5/demo/datagrid/simpletoolbar.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DataGrid with Toolbar - 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>
|
||||
<h2>DataGrid with Toolbar</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Put buttons on top toolbar of DataGrid.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" title="DataGrid with Toolbar" style="width:700px;height:250px"
|
||||
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:toolbar">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:240">Attribute</th>
|
||||
<th data-options="field:'status',width:60,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
var toolbar = [{
|
||||
text:'Add',
|
||||
iconCls:'icon-add',
|
||||
handler:function(){alert('add')}
|
||||
},{
|
||||
text:'Cut',
|
||||
iconCls:'icon-cut',
|
||||
handler:function(){alert('cut')}
|
||||
},'-',{
|
||||
text:'Save',
|
||||
iconCls:'icon-save',
|
||||
handler:function(){alert('save')}
|
||||
}];
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
47
WebRoot/js/easyui-1.3.5/demo/datagrid/transform.html
Normal file
47
WebRoot/js/easyui-1.3.5/demo/datagrid/transform.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Transform DataGrid from Table - 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>
|
||||
<h2>Transform DataGrid from Table</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Transform DataGrid from an existing, unformatted html table.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<table class="easyui-datagrid" style="width:500px;height:auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid'">Item ID</th>
|
||||
<th data-options="field:'productid'">Product</th>
|
||||
<th data-options="field:'listprice',align:'right'">List Price</th>
|
||||
<th data-options="field:'attr1'">Attribute</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
21
WebRoot/js/easyui-1.3.5/demo/datebox/basic.html
Normal file
21
WebRoot/js/easyui-1.3.5/demo/datebox/basic.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic DateBox - 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>
|
||||
<h2>Basic DateBox</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the calendar image on the right side.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<input class="easyui-datebox"></input>
|
||||
</body>
|
||||
</html>
|
||||
31
WebRoot/js/easyui-1.3.5/demo/datebox/buttons.html
Normal file
31
WebRoot/js/easyui-1.3.5/demo/datebox/buttons.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DateBox Buttons - 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>
|
||||
<h2>DateBox Buttons</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This example shows how to customize the datebox buttons underneath the calendar.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<input class="easyui-datebox"></input>
|
||||
<input class="easyui-datebox" data-options="buttons:buttons"></input>
|
||||
<script>
|
||||
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
|
||||
buttons.splice(1, 0, {
|
||||
text: 'MyBtn',
|
||||
handler: function(target){
|
||||
alert('click MyBtn');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
42
WebRoot/js/easyui-1.3.5/demo/datebox/dateformat.html
Normal file
42
WebRoot/js/easyui-1.3.5/demo/datebox/dateformat.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Date Format - 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>
|
||||
<h2>Date Format</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Different date formats are applied to different DateBox components.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<input class="easyui-datebox"></input>
|
||||
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>
|
||||
<script type="text/javascript">
|
||||
function myformatter(date){
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth()+1;
|
||||
var d = date.getDate();
|
||||
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
|
||||
}
|
||||
function myparser(s){
|
||||
if (!s) return new Date();
|
||||
var ss = (s.split('-'));
|
||||
var y = parseInt(ss[0],10);
|
||||
var m = parseInt(ss[1],10);
|
||||
var d = parseInt(ss[2],10);
|
||||
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
|
||||
return new Date(y,m-1,d);
|
||||
} else {
|
||||
return new Date();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
30
WebRoot/js/easyui-1.3.5/demo/datebox/events.html
Normal file
30
WebRoot/js/easyui-1.3.5/demo/datebox/events.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DateBox Events - 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>
|
||||
<h2>DateBox Events</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the calendar image on the right side.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<input class="easyui-datebox" data-options="onSelect:onSelect"></input>
|
||||
<div style="margin:10px 0">
|
||||
<span>Selected Date: </span>
|
||||
<span id="result"></span>
|
||||
</div>
|
||||
<script>
|
||||
function onSelect(date){
|
||||
$('#result').text(date)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
33
WebRoot/js/easyui-1.3.5/demo/datebox/validate.html
Normal file
33
WebRoot/js/easyui-1.3.5/demo/datebox/validate.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Validate DateBox - 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>
|
||||
<h2>Validate DateBox</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>When the selected date is greater than specified date. The field validator will raise an error.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<input class="easyui-datebox" required data-options="validType:'md[\'10/11/2012\']'"></input>
|
||||
<script>
|
||||
$.extend($.fn.validatebox.defaults.rules, {
|
||||
md: {
|
||||
validator: function(value, param){
|
||||
var d1 = $.fn.datebox.defaults.parser(param[0]);
|
||||
var d2 = $.fn.datebox.defaults.parser(value);
|
||||
return d2<=d1;
|
||||
},
|
||||
message: 'The date must be less than or equals to {0}.'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
21
WebRoot/js/easyui-1.3.5/demo/datetimebox/basic.html
Normal file
21
WebRoot/js/easyui-1.3.5/demo/datetimebox/basic.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic DateTimeBox - 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>
|
||||
<h2>Basic DateTimeBox</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the calendar image on the right side.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<input class="easyui-datetimebox" required style="width:150px">
|
||||
</body>
|
||||
</html>
|
||||
22
WebRoot/js/easyui-1.3.5/demo/datetimebox/initvalue.html
Normal file
22
WebRoot/js/easyui-1.3.5/demo/datetimebox/initvalue.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Initialize Value for DateTime - 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>
|
||||
<h2>Initialize Value for DateTime</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The value is initialized when DateTimeBox has been created.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<input class="easyui-datetimebox" value="10/11/2012 2:3:56" style="width:150px">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
25
WebRoot/js/easyui-1.3.5/demo/datetimebox/showseconds.html
Normal file
25
WebRoot/js/easyui-1.3.5/demo/datetimebox/showseconds.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Display Seconds - 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>
|
||||
<h2>Display Seconds</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The user can decide to display seconds part or not.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<span>Show Seconds: </span>
|
||||
<input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})">
|
||||
</div>
|
||||
<input id="dt" class="easyui-datetimebox" style="width:150px">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
WebRoot/js/easyui-1.3.5/demo/demo.css
Normal file
26
WebRoot/js/easyui-1.3.5/demo/demo.css
Normal file
@@ -0,0 +1,26 @@
|
||||
*{
|
||||
font-size:12px;
|
||||
}
|
||||
body {
|
||||
font-family:helvetica,tahoma,verdana,sans-serif;
|
||||
padding:3px;
|
||||
font-size:13px;
|
||||
margin:0;
|
||||
}
|
||||
h2 {
|
||||
font-size:18px;
|
||||
font-weight:bold;
|
||||
margin:0;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
.demo-info{
|
||||
background:#FFFEE6;
|
||||
color:#8F5700;
|
||||
padding:12px;
|
||||
}
|
||||
.demo-tip{
|
||||
width:16px;
|
||||
height:16px;
|
||||
margin-right:8px;
|
||||
float:left;
|
||||
}
|
||||
26
WebRoot/js/easyui-1.3.5/demo/dialog/basic.html
Normal file
26
WebRoot/js/easyui-1.3.5/demo/dialog/basic.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Dialog - 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>
|
||||
<h2>Basic Dialog</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click below button to open or close dialog.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
|
||||
</div>
|
||||
<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
|
||||
The dialog content.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
49
WebRoot/js/easyui-1.3.5/demo/dialog/complextoolbar.html
Normal file
49
WebRoot/js/easyui-1.3.5/demo/dialog/complextoolbar.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Complex Toolbar on Dialog - 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>
|
||||
<h2>Complex Toolbar on Dialog</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to create complex toolbar on dialog.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
|
||||
</div>
|
||||
<div id="dlg" class="easyui-dialog" title="Complex Toolbar on Dialog" style="width:400px;height:200px;padding:10px"
|
||||
data-options="
|
||||
iconCls: 'icon-save',
|
||||
toolbar: '#dlg-toolbar',
|
||||
buttons: '#dlg-buttons'
|
||||
">
|
||||
The dialog content.
|
||||
</div>
|
||||
<div id="dlg-toolbar" style="padding:2px 0">
|
||||
<table cellpadding="0" cellspacing="0" style="width:100%">
|
||||
<tr>
|
||||
<td style="padding-left:2px">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">Edit</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">Help</a>
|
||||
</td>
|
||||
<td style="text-align:right;padding-right:2px">
|
||||
<input class="easyui-searchbox" data-options="prompt:'Please input somthing'" style="width:150px"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="dlg-buttons">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:alert('save')">Save</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">Close</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
55
WebRoot/js/easyui-1.3.5/demo/dialog/toolbarbuttons.html
Normal file
55
WebRoot/js/easyui-1.3.5/demo/dialog/toolbarbuttons.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Toolbar and Buttons - 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>
|
||||
<h2>Toolbar and Buttons</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The toolbar and buttons can be added to dialog.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
|
||||
</div>
|
||||
<div id="dlg" class="easyui-dialog" title="Toolbar and Buttons" style="width:400px;height:200px;padding:10px"
|
||||
data-options="
|
||||
iconCls: 'icon-save',
|
||||
toolbar: [{
|
||||
text:'Add',
|
||||
iconCls:'icon-add',
|
||||
handler:function(){
|
||||
alert('add')
|
||||
}
|
||||
},'-',{
|
||||
text:'Save',
|
||||
iconCls:'icon-save',
|
||||
handler:function(){
|
||||
alert('save')
|
||||
}
|
||||
}],
|
||||
buttons: [{
|
||||
text:'Ok',
|
||||
iconCls:'icon-ok',
|
||||
handler:function(){
|
||||
alert('ok');
|
||||
}
|
||||
},{
|
||||
text:'Cancel',
|
||||
handler:function(){
|
||||
alert('cancel');;
|
||||
}
|
||||
}]
|
||||
">
|
||||
The dialog content.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
24
WebRoot/js/easyui-1.3.5/demo/draggable/basic.html
Normal file
24
WebRoot/js/easyui-1.3.5/demo/draggable/basic.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Draggable - 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>
|
||||
<h2>Basic Draggable</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Move the boxes below by clicking on it with mouse.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-draggable" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc"></div>
|
||||
<div class="easyui-draggable" data-options="handle:'#title'" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px">
|
||||
<div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
38
WebRoot/js/easyui-1.3.5/demo/draggable/constain.html
Normal file
38
WebRoot/js/easyui-1.3.5/demo/draggable/constain.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Constrain Draggable - 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>
|
||||
<h2>Constrain Draggable</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The draggable object can only be moved within its parent container.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="position:relative;overflow:hidden;border:1px solid #ccc;width:500px;height:300px">
|
||||
<div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function onDrag(e){
|
||||
var d = e.data;
|
||||
if (d.left < 0){d.left = 0}
|
||||
if (d.top < 0){d.top = 0}
|
||||
if (d.left + $(d.target).outerWidth() > $(d.parent).width()){
|
||||
d.left = $(d.parent).width() - $(d.target).outerWidth();
|
||||
}
|
||||
if (d.top + $(d.target).outerHeight() > $(d.parent).height()){
|
||||
d.top = $(d.parent).height() - $(d.target).outerHeight();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
WebRoot/js/easyui-1.3.5/demo/draggable/snap.html
Normal file
40
WebRoot/js/easyui-1.3.5/demo/draggable/snap.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Snap Draggable - 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>
|
||||
<h2>Snap Draggable</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to snap a draggable object to a 20x20 grid.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="position:relative;overflow:hidden;border:1px solid #ccc;width:500px;height:300px">
|
||||
<div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function onDrag(e){
|
||||
var d = e.data;
|
||||
d.left = repair(d.left);
|
||||
d.top = repair(d.top);
|
||||
|
||||
function repair(v){
|
||||
var r = parseInt(v/20)*20;
|
||||
if (Math.abs(v % 20) > 10){
|
||||
r += v > 0 ? 20 : -20;
|
||||
}
|
||||
return r;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
81
WebRoot/js/easyui-1.3.5/demo/droppable/accept.html
Normal file
81
WebRoot/js/easyui-1.3.5/demo/droppable/accept.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Accept a Drop - 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>
|
||||
<h2>Accept a Drop</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Some draggable object can not be accepted.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
|
||||
drag me!
|
||||
<div id="d1" class="drag">Drag 1</div>
|
||||
<div id="d2" class="drag">Drag 2</div>
|
||||
<div id="d3" class="drag">Drag 3</div>
|
||||
</div>
|
||||
<div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
|
||||
drop here!
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<style type="text/css">
|
||||
.drag{
|
||||
width:100px;
|
||||
height:50px;
|
||||
padding:10px;
|
||||
margin:5px;
|
||||
border:1px solid #ccc;
|
||||
background:#AACCFF;
|
||||
}
|
||||
.dp{
|
||||
opacity:0.5;
|
||||
filter:alpha(opacity=50);
|
||||
}
|
||||
.over{
|
||||
background:#FBEC88;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
$('.drag').draggable({
|
||||
proxy:'clone',
|
||||
revert:true,
|
||||
cursor:'auto',
|
||||
onStartDrag:function(){
|
||||
$(this).draggable('options').cursor='not-allowed';
|
||||
$(this).draggable('proxy').addClass('dp');
|
||||
},
|
||||
onStopDrag:function(){
|
||||
$(this).draggable('options').cursor='auto';
|
||||
}
|
||||
});
|
||||
$('#target').droppable({
|
||||
accept:'#d1,#d3',
|
||||
onDragEnter:function(e,source){
|
||||
$(source).draggable('options').cursor='auto';
|
||||
$(source).draggable('proxy').css('border','1px solid red');
|
||||
$(this).addClass('over');
|
||||
},
|
||||
onDragLeave:function(e,source){
|
||||
$(source).draggable('options').cursor='not-allowed';
|
||||
$(source).draggable('proxy').css('border','1px solid #ccc');
|
||||
$(this).removeClass('over');
|
||||
},
|
||||
onDrop:function(e,source){
|
||||
$(this).append(source)
|
||||
$(this).removeClass('over');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
80
WebRoot/js/easyui-1.3.5/demo/droppable/basic.html
Normal file
80
WebRoot/js/easyui-1.3.5/demo/droppable/basic.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Droppable - 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>
|
||||
<h2>Basic Droppable</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Drag the boxed on left to the target area on right.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="float:left;width:200px;margin-right:20px;">
|
||||
<div class="title">Source</div>
|
||||
<div>
|
||||
<div class="dragitem">Apple</div>
|
||||
<div class="dragitem">Peach</div>
|
||||
<div class="dragitem">Orange</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:200px;">
|
||||
<div class="title">Target</div>
|
||||
<div class="easyui-droppable targetarea"
|
||||
data-options="
|
||||
accept: '.dragitem',
|
||||
onDragEnter:function(e,source){
|
||||
$(this).html('enter');
|
||||
},
|
||||
onDragLeave: function(e,source){
|
||||
$(this).html('leave');
|
||||
},
|
||||
onDrop: function(e,source){
|
||||
$(this).html($(source).html() + ' dropped');
|
||||
}
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<style type="text/css">
|
||||
.title{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.dragitem{
|
||||
border:1px solid #ccc;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.targetarea{
|
||||
border:1px solid red;
|
||||
height:150px;
|
||||
}
|
||||
.proxy{
|
||||
border:1px solid #ccc;
|
||||
width:80px;
|
||||
background:#fafafa;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
$('.dragitem').draggable({
|
||||
revert:true,
|
||||
deltaX:10,
|
||||
deltaY:10,
|
||||
proxy:function(source){
|
||||
var n = $('<div class="proxy"></div>');
|
||||
n.html($(source).html()).appendTo('body');
|
||||
return n;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
74
WebRoot/js/easyui-1.3.5/demo/droppable/sort.html
Normal file
74
WebRoot/js/easyui-1.3.5/demo/droppable/sort.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Change Items Order - 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>
|
||||
<h2>Change Items Order</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Drag the list items to change their order.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<ul style="margin:0;padding:0;margin-left:10px;">
|
||||
<li class="drag-item">Drag 1</li>
|
||||
<li class="drag-item">Drag 2</li>
|
||||
<li class="drag-item">Drag 3</li>
|
||||
<li class="drag-item">Drag 4</li>
|
||||
<li class="drag-item">Drag 5</li>
|
||||
<li class="drag-item">Drag 6</li>
|
||||
</ul>
|
||||
<style type="text/css">
|
||||
.drag-item{
|
||||
list-style-type:none;
|
||||
display:block;
|
||||
padding:5px;
|
||||
border:1px solid #ccc;
|
||||
margin:2px;
|
||||
width:300px;
|
||||
background:#fafafa;
|
||||
color:#444;
|
||||
}
|
||||
.indicator{
|
||||
position:absolute;
|
||||
font-size:9px;
|
||||
width:10px;
|
||||
height:10px;
|
||||
display:none;
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
var indicator = $('<div class="indicator">>></div>').appendTo('body');
|
||||
$('.drag-item').draggable({
|
||||
revert:true,
|
||||
deltaX:0,
|
||||
deltaY:0
|
||||
}).droppable({
|
||||
onDragOver:function(e,source){
|
||||
indicator.css({
|
||||
display:'block',
|
||||
left:$(this).offset().left-10,
|
||||
top:$(this).offset().top+$(this).outerHeight()-5
|
||||
});
|
||||
},
|
||||
onDragLeave:function(e,source){
|
||||
indicator.hide();
|
||||
},
|
||||
onDrop:function(e,source){
|
||||
$(source).insertAfter(this);
|
||||
indicator.hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
75
WebRoot/js/easyui-1.3.5/demo/easyloader/basic.html
Normal file
75
WebRoot/js/easyui-1.3.5/demo/easyloader/basic.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic EasyLoader - 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="../../easyloader.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Basic EasyLoader</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons below to load components dynamically.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="#" class="easyui-linkbutton" onclick="load1()">Load Calendar</a>
|
||||
<a href="#" class="easyui-linkbutton" onclick="load2()">Load Dialog</a>
|
||||
<a href="#" class="easyui-linkbutton" onclick="load3()">Load DataGrid</a>
|
||||
</div>
|
||||
<div id="cc"></div>
|
||||
<div id="dd"></div>
|
||||
<table id="tt"></table>
|
||||
<script type="text/javascript" src="../../easyloader.js"></script>
|
||||
<script>
|
||||
function load1(){
|
||||
using('calendar', function(){
|
||||
$('#cc').calendar({
|
||||
width:180,
|
||||
height:180
|
||||
});
|
||||
});
|
||||
}
|
||||
function load2(){
|
||||
using(['dialog','messager'], function(){
|
||||
$('#dd').dialog({
|
||||
title:'Dialog',
|
||||
width:300,
|
||||
height:200
|
||||
});
|
||||
$.messager.show({
|
||||
title:'info',
|
||||
msg:'dialog created'
|
||||
});
|
||||
});
|
||||
}
|
||||
function load3(){
|
||||
using('datagrid', function(){
|
||||
$('#tt').datagrid({
|
||||
title:'DataGrid',
|
||||
width:300,
|
||||
height:200,
|
||||
fitColumns:true,
|
||||
columns:[[
|
||||
{field:'productid',title:'Product ID',width:100},
|
||||
{field:'productname',title:'Product Name',width:200}
|
||||
]],
|
||||
data: [
|
||||
{"productid":"FI-SW-01","productname":"Koi"},
|
||||
{"productid":"K9-DL-01","productname":"Dalmation"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake"},
|
||||
{"productid":"RP-LI-02","productname":"Iguana"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian"},
|
||||
{"productid":"AV-CB-01","productname":"Amazon Parrot"}
|
||||
]
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
62
WebRoot/js/easyui-1.3.5/demo/form/basic.html
Normal file
62
WebRoot/js/easyui-1.3.5/demo/form/basic.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Form - 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>
|
||||
<h2>Basic Form</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Fill the form and submit it.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-panel" title="New Topic" style="width:400px">
|
||||
<div style="padding:10px 0 10px 60px">
|
||||
<form id="ff" method="post">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Name:</td>
|
||||
<td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Email:</td>
|
||||
<td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Subject:</td>
|
||||
<td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Message:</td>
|
||||
<td><textarea name="message" style="height:60px;"></textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Language:</td>
|
||||
<td>
|
||||
<select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<div style="text-align:center;padding:5px">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function submitForm(){
|
||||
$('#ff').form('submit');
|
||||
}
|
||||
function clearForm(){
|
||||
$('#ff').form('clear');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
7
WebRoot/js/easyui-1.3.5/demo/form/form_data1.json
Normal file
7
WebRoot/js/easyui-1.3.5/demo/form/form_data1.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name":"easyui",
|
||||
"email":"easyui@gmail.com",
|
||||
"subject":"Subject Title",
|
||||
"message":"Message Content",
|
||||
"language":"en"
|
||||
}
|
||||
71
WebRoot/js/easyui-1.3.5/demo/form/load.html
Normal file
71
WebRoot/js/easyui-1.3.5/demo/form/load.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Load Form Data - 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>
|
||||
<h2>Load Form Data</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons below to load form data.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadLocal()">LoadLocal</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadRemote()">LoadRemote</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
|
||||
</div>
|
||||
<div class="easyui-panel" title="New Topic" style="width:400px">
|
||||
<div style="padding:10px 0 10px 60px">
|
||||
<form id="ff" method="post">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Name:</td>
|
||||
<td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Email:</td>
|
||||
<td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Subject:</td>
|
||||
<td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Message:</td>
|
||||
<td><textarea name="message" style="height:60px;"></textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Language:</td>
|
||||
<td>
|
||||
<select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function loadLocal(){
|
||||
$('#ff').form('load',{
|
||||
name:'myname',
|
||||
email:'mymail@gmail.com',
|
||||
subject:'subject',
|
||||
message:'message',
|
||||
language:'en'
|
||||
});
|
||||
}
|
||||
function loadRemote(){
|
||||
$('#ff').form('load', 'form_data1.json');
|
||||
}
|
||||
function clearForm(){
|
||||
$('#ff').form('clear');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
WebRoot/js/easyui-1.3.5/demo/layout/_content.html
Normal file
18
WebRoot/js/easyui-1.3.5/demo/layout/_content.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AJAX Content</title>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-size:14px">jQuery EasyUI framework help you build your web page easily.</p>
|
||||
<ul>
|
||||
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
|
||||
<li>easyui provides essential functionality for building modern, interactive, javascript applications.</li>
|
||||
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
|
||||
<li>complete framework for HTML5 web page.</li>
|
||||
<li>easyui save your time and scales while developing your products.</li>
|
||||
<li>easyui is very easy but powerful.</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
56
WebRoot/js/easyui-1.3.5/demo/layout/addremove.html
Normal file
56
WebRoot/js/easyui-1.3.5/demo/layout/addremove.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Add and Remove Layout - 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>
|
||||
<h2>Add and Remove Layout</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons below to add or remove region panel of layout.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<span>Select Region Panel:</span>
|
||||
<select id="region">
|
||||
<option value="north">North</option>
|
||||
<option value="south">South</option>
|
||||
<option value="east">East</option>
|
||||
<option value="west">West</option>
|
||||
</select>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>
|
||||
</div>
|
||||
<div id="cc" class="easyui-layout" style="width:700px;height:350px;">
|
||||
<div data-options="region:'north'" style="height:50px"></div>
|
||||
<div data-options="region:'south',split:true" style="height:50px;"></div>
|
||||
<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
|
||||
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
|
||||
<div data-options="region:'center',title:'Center'"></div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function addPanel(){
|
||||
var region = $('#region').val();
|
||||
var options = {
|
||||
region: region
|
||||
};
|
||||
if (region=='north' || region=='south'){
|
||||
options.height = 50;
|
||||
} else {
|
||||
options.width = 100;
|
||||
options.split = true;
|
||||
options.title = $('#region option:selected').text();
|
||||
}
|
||||
$('#cc').layout('add', options);
|
||||
}
|
||||
function removePanel(){
|
||||
$('#cc').layout('remove', $('#region').val());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
61
WebRoot/js/easyui-1.3.5/demo/layout/autoheight.html
Normal file
61
WebRoot/js/easyui-1.3.5/demo/layout/autoheight.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Auto Height for Layout - 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>
|
||||
<h2>Auto Height for Layout</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This example shows how to auto adjust layout height after dynamically adding items.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addItem()">Add Item</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeItem()">Remove Item</a>
|
||||
</div>
|
||||
<div id="cc" style="width:700px;height:350px;">
|
||||
<div data-options="region:'north'" style="height:50px"></div>
|
||||
<div data-options="region:'south'" style="height:50px;"></div>
|
||||
<div data-options="region:'west'" style="width:150px;"></div>
|
||||
<div data-options="region:'center'" style="padding:20px">
|
||||
<p>Panel Content.</p>
|
||||
<p>Panel Content.</p>
|
||||
<p>Panel Content.</p>
|
||||
<p>Panel Content.</p>
|
||||
<p>Panel Content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#cc').layout();
|
||||
setHeight();
|
||||
});
|
||||
|
||||
function addItem(){
|
||||
$('#cc').layout('panel','center').append('<p>More Panel Content.</p>');
|
||||
setHeight();
|
||||
}
|
||||
|
||||
function removeItem(){
|
||||
$('#cc').layout('panel','center').find('p:last').remove();
|
||||
setHeight();
|
||||
}
|
||||
|
||||
function setHeight(){
|
||||
var c = $('#cc');
|
||||
var p = c.layout('panel','center'); // get the center panel
|
||||
var oldHeight = p.panel('panel').outerHeight();
|
||||
p.panel('resize', {height:'auto'});
|
||||
var newHeight = p.panel('panel').outerHeight();
|
||||
c.height(c.height() + newHeight - oldHeight);
|
||||
c.layout('resize');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
42
WebRoot/js/easyui-1.3.5/demo/layout/basic.html
Normal file
42
WebRoot/js/easyui-1.3.5/demo/layout/basic.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Layout - 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>
|
||||
<h2>Basic Layout</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The layout contains north,south,west,east and center regions.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-layout" style="width:700px;height:350px;">
|
||||
<div data-options="region:'north'" style="height:50px"></div>
|
||||
<div data-options="region:'south',split:true" style="height:50px;"></div>
|
||||
<div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
|
||||
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
|
||||
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
|
||||
<table class="easyui-datagrid"
|
||||
data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid'" width="80">Item ID</th>
|
||||
<th data-options="field:'productid'" width="100">Product ID</th>
|
||||
<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
|
||||
<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
|
||||
<th data-options="field:'attr'" width="150">Attribute</th>
|
||||
<th data-options="field:'status',align:'center'" width="50">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
60
WebRoot/js/easyui-1.3.5/demo/layout/complex.html
Normal file
60
WebRoot/js/easyui-1.3.5/demo/layout/complex.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Complex Layout - 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>
|
||||
<h2>Complex Layout</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to create a complex layout.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-layout" style="width:700px;height:350px;">
|
||||
<div data-options="region:'north'" style="height:50px"></div>
|
||||
<div data-options="region:'south',split:true" style="height:50px;"></div>
|
||||
<div data-options="region:'east',split:true" title="East" style="width:180px;">
|
||||
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
|
||||
</div>
|
||||
<div data-options="region:'west',split:true" title="West" style="width:100px;">
|
||||
<div class="easyui-accordion" data-options="fit:true,border:false">
|
||||
<div title="Title1" style="padding:10px;">
|
||||
content1
|
||||
</div>
|
||||
<div title="Title2" data-options="selected:true" style="padding:10px;">
|
||||
content2
|
||||
</div>
|
||||
<div title="Title3" style="padding:10px">
|
||||
content3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
|
||||
<div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
|
||||
<div title="About" data-options="href:'_content.html'" style="padding:10px"></div>
|
||||
<div title="DataGrid" style="padding:5px">
|
||||
<table class="easyui-datagrid"
|
||||
data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid'" width="80">Item ID</th>
|
||||
<th data-options="field:'productid'" width="100">Product ID</th>
|
||||
<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
|
||||
<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
|
||||
<th data-options="field:'attr1'" width="150">Attribute</th>
|
||||
<th data-options="field:'status',align:'center'" width="50">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
WebRoot/js/easyui-1.3.5/demo/layout/datagrid_data1.json
Normal file
12
WebRoot/js/easyui-1.3.5/demo/layout/datagrid_data1.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{"total":28,"rows":[
|
||||
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
|
||||
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
|
||||
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
|
||||
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
|
||||
]}
|
||||
19
WebRoot/js/easyui-1.3.5/demo/layout/full.html
Normal file
19
WebRoot/js/easyui-1.3.5/demo/layout/full.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Full Layout - 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 class="easyui-layout">
|
||||
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
|
||||
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
|
||||
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
|
||||
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
|
||||
<div data-options="region:'center',title:'Center'"></div>
|
||||
</body>
|
||||
</html>
|
||||
34
WebRoot/js/easyui-1.3.5/demo/layout/nestedlayout.html
Normal file
34
WebRoot/js/easyui-1.3.5/demo/layout/nestedlayout.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nested Layout - 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>
|
||||
<h2>Nested Layout</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The layout region panel contains another layout or other components.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-layout" style="width:700px;height:350px;">
|
||||
<div data-options="region:'north'" style="height:50px"></div>
|
||||
<div data-options="region:'south',split:true" style="height:50px;"></div>
|
||||
<div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
|
||||
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
|
||||
<div data-options="region:'center',iconCls:'icon-ok'" title="Center">
|
||||
<div class="easyui-layout" data-options="fit:true">
|
||||
<div data-options="region:'north',split:true,border:false" style="height:50px"></div>
|
||||
<div data-options="region:'west',split:true,border:false" style="width:100px"></div>
|
||||
<div data-options="region:'center',border:false"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
37
WebRoot/js/easyui-1.3.5/demo/layout/nocollapsible.html
Normal file
37
WebRoot/js/easyui-1.3.5/demo/layout/nocollapsible.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>No collapsible button in Layout - 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>
|
||||
<h2>No collapsible button in Layout</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The layout region panel has no collapsible button.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div class="easyui-layout" style="width:700px;height:350px;">
|
||||
<div data-options="region:'north'" style="height:50px"></div>
|
||||
<div data-options="region:'south',split:true" style="height:50px;"></div>
|
||||
<div data-options="region:'east',split:true,title:'East',collapsible:false" style="width:250px;">
|
||||
<table id="tt" class="easyui-propertygrid" data-options="
|
||||
url: 'propertygrid_data1.json',
|
||||
method: 'get',
|
||||
showGroup: true,
|
||||
fit: true,
|
||||
border: false
|
||||
">
|
||||
</table>
|
||||
</div>
|
||||
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',href:'_content.html'" style="padding:10px">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
20
WebRoot/js/easyui-1.3.5/demo/layout/propertygrid_data1.json
Normal file
20
WebRoot/js/easyui-1.3.5/demo/layout/propertygrid_data1.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{"total":7,"rows":[
|
||||
{"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
|
||||
{"name":"Address","value":"","group":"ID Settings","editor":"text"},
|
||||
{"name":"Age","value":"40","group":"ID Settings","editor":"numberbox"},
|
||||
{"name":"Birthday","value":"01/02/2012","group":"ID Settings","editor":"datebox"},
|
||||
{"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
|
||||
{"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
|
||||
"type":"validatebox",
|
||||
"options":{
|
||||
"validType":"email"
|
||||
}
|
||||
}},
|
||||
{"name":"FrequentBuyer","value":"false","group":"Marketing Settings","editor":{
|
||||
"type":"checkbox",
|
||||
"options":{
|
||||
"on":true,
|
||||
"off":false
|
||||
}
|
||||
}}
|
||||
]}
|
||||
49
WebRoot/js/easyui-1.3.5/demo/layout/tree_data1.json
Normal file
49
WebRoot/js/easyui-1.3.5/demo/layout/tree_data1.json
Normal file
@@ -0,0 +1,49 @@
|
||||
[{
|
||||
"id":1,
|
||||
"text":"My Documents",
|
||||
"children":[{
|
||||
"id":11,
|
||||
"text":"Photos",
|
||||
"state":"closed",
|
||||
"children":[{
|
||||
"id":111,
|
||||
"text":"Friend"
|
||||
},{
|
||||
"id":112,
|
||||
"text":"Wife"
|
||||
},{
|
||||
"id":113,
|
||||
"text":"Company"
|
||||
}]
|
||||
},{
|
||||
"id":12,
|
||||
"text":"Program Files",
|
||||
"children":[{
|
||||
"id":121,
|
||||
"text":"Intel"
|
||||
},{
|
||||
"id":122,
|
||||
"text":"Java",
|
||||
"attributes":{
|
||||
"p1":"Custom Attribute1",
|
||||
"p2":"Custom Attribute2"
|
||||
}
|
||||
},{
|
||||
"id":123,
|
||||
"text":"Microsoft Office"
|
||||
},{
|
||||
"id":124,
|
||||
"text":"Games",
|
||||
"checked":true
|
||||
}]
|
||||
},{
|
||||
"id":13,
|
||||
"text":"index.html"
|
||||
},{
|
||||
"id":14,
|
||||
"text":"about.html"
|
||||
},{
|
||||
"id":15,
|
||||
"text":"welcome.html"
|
||||
}]
|
||||
}]
|
||||
28
WebRoot/js/easyui-1.3.5/demo/linkbutton/basic.html
Normal file
28
WebRoot/js/easyui-1.3.5/demo/linkbutton/basic.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic LinkButton - 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>
|
||||
<h2>Basic LinkButton</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Buttons can be created from <a/> link.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="padding:5px;">
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
|
||||
<a href="#" class="easyui-linkbutton">Text Button</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
WebRoot/js/easyui-1.3.5/demo/linkbutton/group.html
Normal file
36
WebRoot/js/easyui-1.3.5/demo/linkbutton/group.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Button Group - 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>
|
||||
<h2>Button Group</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>In a button group only one button can be selected.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="padding:5px;border:1px solid #ddd;">
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 2</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 3</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 4</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 5</a>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="padding:5px;border:1px solid #ddd;">
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 1</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 2</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 3</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 4</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 5</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
WebRoot/js/easyui-1.3.5/demo/linkbutton/iconalign.html
Normal file
33
WebRoot/js/easyui-1.3.5/demo/linkbutton/iconalign.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Icon Align on LinkButton - 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>
|
||||
<h2>Icon Align on LinkButton</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Change the icon align to place icon on left or right of button.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div id="button-bar">
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
|
||||
</div>
|
||||
<div style="margin:10px 0">
|
||||
<span>Select Icon Align: </span>
|
||||
<select onchange="$('#button-bar a').linkbutton({iconAlign:this.value})">
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
</select>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
31
WebRoot/js/easyui-1.3.5/demo/linkbutton/plain.html
Normal file
31
WebRoot/js/easyui-1.3.5/demo/linkbutton/plain.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Plain LinkButton - 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>
|
||||
<h2>Plain LinkButton</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The link buttons have plain effect.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="padding:5px;border:1px solid #ddd;">
|
||||
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">Cancel</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">Refresh</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">Search</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="plain:true">Text Button</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-print'">Print</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-help'"> </a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'"></a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-back'"></a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
28
WebRoot/js/easyui-1.3.5/demo/linkbutton/toggle.html
Normal file
28
WebRoot/js/easyui-1.3.5/demo/linkbutton/toggle.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Toggle Button - 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>
|
||||
<h2>Toggle Button</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the button below to switch its selected state.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="padding:5px;">
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',toggle:true">Add</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',toggle:true">Remove</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',toggle:true">Save</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',toggle:true,disabled:true">Cut</a>
|
||||
<a href="#" class="easyui-linkbutton" data-options="toggle:true">Text Button</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
71
WebRoot/js/easyui-1.3.5/demo/menu/basic.html
Normal file
71
WebRoot/js/easyui-1.3.5/demo/menu/basic.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Menu - 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>
|
||||
<h2>Basic Menu</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Right click on page to display menu.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
|
||||
<div id="mm" class="easyui-menu" style="width:120px;">
|
||||
<div onclick="javascript:alert('new')">New</div>
|
||||
<div>
|
||||
<span>Open</span>
|
||||
<div style="width:150px;">
|
||||
<div><b>Word</b></div>
|
||||
<div>Excel</div>
|
||||
<div>PowerPoint</div>
|
||||
<div>
|
||||
<span>M1</span>
|
||||
<div style="width:120px;">
|
||||
<div>sub1</div>
|
||||
<div>sub2</div>
|
||||
<div>
|
||||
<span>Sub</span>
|
||||
<div style="width:80px;">
|
||||
<div onclick="javascript:alert('sub21')">sub21</div>
|
||||
<div>sub22</div>
|
||||
<div>sub23</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>sub3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>Window Demos</span>
|
||||
<div style="width:120px;">
|
||||
<div data-options="href:'window.html'">Window</div>
|
||||
<div data-options="href:'dialog.html'">Dialog</div>
|
||||
<div><a href="http://www.jeasyui.com" target="_blank">EasyUI</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-options="iconCls:'icon-save'">Save</div>
|
||||
<div data-options="iconCls:'icon-print',disabled:true">Print</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>Exit</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
$(document).bind('contextmenu',function(e){
|
||||
e.preventDefault();
|
||||
$('#mm').menu('show', {
|
||||
left: e.pageX,
|
||||
top: e.pageY
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
58
WebRoot/js/easyui-1.3.5/demo/menu/customitem.html
Normal file
58
WebRoot/js/easyui-1.3.5/demo/menu/customitem.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Custom Menu Item - 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>
|
||||
<h2>Custom Menu Item</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Right click on page to display menu, move to the 'Open' item to display its custom sub content.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div id="mm" class="easyui-menu" style="width:120px;">
|
||||
<div>New</div>
|
||||
<div>
|
||||
<span>Open</span>
|
||||
<div class="menu-content" style="text-align:left;padding:10px">
|
||||
<div style="font-weight:bold;font-size:16px">Select your Language:</div>
|
||||
<ul style="margin:0;padding:0 0 0 40px">
|
||||
<li><a href="javascript:void(0)">Java</a></li>
|
||||
<li><a href="javascript:void(0)">Basic</a></li>
|
||||
<li><a href="javascript:void(0)">C++</a></li>
|
||||
<li><a href="javascript:void(0)">Fortran</a></li>
|
||||
<li>
|
||||
<span>Other</span>
|
||||
<input>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="padding:10px 0 0 30px">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-options="iconCls:'icon-save'">Save</div>
|
||||
<div data-options="iconCls:'icon-print'">Print</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>Exit</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
$(document).bind('contextmenu',function(e){
|
||||
e.preventDefault();
|
||||
$('#mm').menu('show', {
|
||||
left: e.pageX,
|
||||
top: e.pageY
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
41
WebRoot/js/easyui-1.3.5/demo/menu/events.html
Normal file
41
WebRoot/js/easyui-1.3.5/demo/menu/events.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Menu Events - 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>
|
||||
<h2>Menu Events</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Right click on page to display menu and click an item.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div id="mm" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
|
||||
<div data-options="name:'new'">New</div>
|
||||
<div data-options="name:'save',iconCls:'icon-save'">Save</div>
|
||||
<div data-options="name:'print',iconCls:'icon-print'">Print</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div data-options="name:'exit'">Exit</div>
|
||||
</div>
|
||||
<script>
|
||||
function menuHandler(item){
|
||||
alert(item.name);
|
||||
}
|
||||
$(function(){
|
||||
$(document).bind('contextmenu',function(e){
|
||||
e.preventDefault();
|
||||
$('#mm').menu('show', {
|
||||
left: e.pageX,
|
||||
top: e.pageY
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
61
WebRoot/js/easyui-1.3.5/demo/menubutton/actions.html
Normal file
61
WebRoot/js/easyui-1.3.5/demo/menubutton/actions.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>MenuButton Actions - 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>
|
||||
<h2>MenuButton Actions</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the buttons below to perform actions.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<a href="#" class="easyui-linkbutton" onclick="$('#btn-edit').menubutton('disable')">Disable Edit</a>
|
||||
<a href="#" class="easyui-linkbutton" onclick="$('#btn-edit').menubutton('enable')">Enable Edit</a>
|
||||
</div>
|
||||
<div style="padding:5px;border:1px solid #ddd">
|
||||
<a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
|
||||
<a id="btn-edit" href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
|
||||
<a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
|
||||
<a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
|
||||
</div>
|
||||
<div id="mm1" style="width:150px;">
|
||||
<div data-options="iconCls:'icon-undo'">Undo</div>
|
||||
<div data-options="iconCls:'icon-redo'">Redo</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>Cut</div>
|
||||
<div>Copy</div>
|
||||
<div>Paste</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>
|
||||
<span>Toolbar</span>
|
||||
<div style="width:150px;">
|
||||
<div>Address</div>
|
||||
<div>Link</div>
|
||||
<div>Navigation Toolbar</div>
|
||||
<div>Bookmark Toolbar</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>New Toolbar...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-options="iconCls:'icon-remove'">Delete</div>
|
||||
<div>Select All</div>
|
||||
</div>
|
||||
<div id="mm2" style="width:100px;">
|
||||
<div>Help</div>
|
||||
<div>Update</div>
|
||||
<div>About</div>
|
||||
</div>
|
||||
<div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
|
||||
<img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
|
||||
<p style="font-size:14px;color:#444;">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user