升级easyUI到1.9.4版本
This commit is contained in:
季圣华
18
erp_web/js/easyui/demo/accordion/_content.html
Normal file
18
erp_web/js/easyui/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>
|
||||
51
erp_web/js/easyui/demo/accordion/actions.html
Normal file
51
erp_web/js/easyui/demo/accordion/actions.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
<p>Click the buttons below to add or remove accordion items.</p>
|
||||
<div style="margin:20px 0 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>
|
||||
28
erp_web/js/easyui/demo/accordion/ajax.html
Normal file
28
erp_web/js/easyui/demo/accordion/ajax.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!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>
|
||||
<p>Click AJAX panel header to load content via AJAX.</p>
|
||||
<div style="margin:20px 0 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>
|
||||
52
erp_web/js/easyui/demo/accordion/basic.html
Normal file
52
erp_web/js/easyui/demo/accordion/basic.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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>
|
||||
<p>Click on panel header to show its content.</p>
|
||||
<div style="margin:20px 0 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 0;">
|
||||
<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
erp_web/js/easyui/demo/accordion/datagrid_data1.json
Normal file
12
erp_web/js/easyui/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"}
|
||||
]}
|
||||
33
erp_web/js/easyui/demo/accordion/expandable.html
Normal file
33
erp_web/js/easyui/demo/accordion/expandable.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!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>
|
||||
<p>Keep a expandable panel and prevent it from collapsing.</p>
|
||||
<div style="margin:20px 0 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;">
|
||||
</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>
|
||||
33
erp_web/js/easyui/demo/accordion/fluid.html
Normal file
33
erp_web/js/easyui/demo/accordion/fluid.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid 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>Fluid Accordion</h2>
|
||||
<p>This example shows how to set the width of accordion to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:100%;height:180px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<p>width: 100%</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help',href:'_content.html'" style="padding:10px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
|
||||
<div class="easyui-accordion" style="width:50%;height:180px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<p>width: 50%</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help',href:'_content.html'" style="padding:10px;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
erp_web/js/easyui/demo/accordion/horizontal.html
Normal file
52
erp_web/js/easyui/demo/accordion/horizontal.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Horizontal 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>Horizontal Accordion</h2>
|
||||
<p>You can easily set the 'halign' property to create a horizontal accordion.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" halign="left" style="width:700px;height:300px;">
|
||||
<div title="About" titleDirection="up" 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" titleDirection="up" 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" titleDirection="up" 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>
|
||||
34
erp_web/js/easyui/demo/accordion/multiple.html
Normal file
34
erp_web/js/easyui/demo/accordion/multiple.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!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>
|
||||
<p>Enable 'multiple' mode to expand multiple panels at one time.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" data-options="multiple:true" style="width:500px;">
|
||||
<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>
|
||||
48
erp_web/js/easyui/demo/accordion/tools.html
Normal file
48
erp_web/js/easyui/demo/accordion/tools.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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>
|
||||
<p>Click the tools on top right of panel to perform actions.</p>
|
||||
<div style="margin:20px 0 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>
|
||||
19
erp_web/js/easyui/demo/calendar/basic.html
Normal file
19
erp_web/js/easyui/demo/calendar/basic.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!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>
|
||||
<p>Click to select date.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-calendar" style="width:250px;height:250px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
46
erp_web/js/easyui/demo/calendar/custom.html
Normal file
46
erp_web/js/easyui/demo/calendar/custom.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Custom 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>Custom Calendar</h2>
|
||||
<p>This example shows how to custom the calendar date by using 'formatter' function.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
|
||||
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div>
|
||||
|
||||
<script>
|
||||
var d1 = Math.floor((Math.random()*30)+1);
|
||||
var d2 = Math.floor((Math.random()*30)+1);
|
||||
function formatDay(date){
|
||||
var m = date.getMonth()+1;
|
||||
var d = date.getDate();
|
||||
var opts = $(this).calendar('options');
|
||||
if (opts.month == m && d == d1){
|
||||
return '<div class="icon-ok md">' + d + '</div>';
|
||||
} else if (opts.month == m && d == d2){
|
||||
return '<div class="icon-search md">' + d + '</div>';
|
||||
}
|
||||
return d;
|
||||
}
|
||||
</script>
|
||||
<style scoped="scoped">
|
||||
.md{
|
||||
height:16px;
|
||||
line-height:16px;
|
||||
background-position:2px center;
|
||||
text-align:right;
|
||||
font-weight:bold;
|
||||
padding:0 2px;
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
28
erp_web/js/easyui/demo/calendar/disabledate.html
Normal file
28
erp_web/js/easyui/demo/calendar/disabledate.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Disable Calendar Date - 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>Disable Calendar Date</h2>
|
||||
<p>This example shows how to disable specified dates, only allows the user to select Mondays.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
|
||||
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="
|
||||
validator: function(date){
|
||||
if (date.getDay() == 1){
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
erp_web/js/easyui/demo/calendar/firstday.html
Normal file
30
erp_web/js/easyui/demo/calendar/firstday.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!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>
|
||||
<p>Choose the first day of the week.</p>
|
||||
|
||||
<div style="margin:20px 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:250px;height:250px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
23
erp_web/js/easyui/demo/calendar/fluid.html
Normal file
23
erp_web/js/easyui/demo/calendar/fluid.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid 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>Fluid Calendar</h2>
|
||||
<p>This example shows how to set the width of calendar to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:700px;padding:10px">
|
||||
<p>width: 50%, height: 250px</p>
|
||||
<div class="easyui-calendar" style="width:50%;height:250px;"></div>
|
||||
<p>width: 30%, height: 40%</p>
|
||||
<div class="easyui-calendar" style="width:30%;height:40%;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
19
erp_web/js/easyui/demo/calendar/weeknumber.html
Normal file
19
erp_web/js/easyui/demo/calendar/weeknumber.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Week Number on 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>Week Number on Calendar</h2>
|
||||
<p>This example shows how to display the week number on calendar.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-calendar" showWeek="true" weekNumberHeader="Wk" style="width:250px;height:250px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
erp_web/js/easyui/demo/checkbox/basic.html
Normal file
26
erp_web/js/easyui/demo/checkbox/basic.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic CheckBox - 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 CheckBox</h2>
|
||||
<form id="ff">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-checkbox" name="fruit" value="Apple" label="Apple:">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-checkbox" name="fruit" value="Orange" label="Orange:">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-checkbox" name="fruit" value="Banana" label="Banana:">
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
41
erp_web/js/easyui/demo/combo/animation.html
Normal file
41
erp_web/js/easyui/demo/combo/animation.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Combo Animation - 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>Combo Animation</h2>
|
||||
<p>Change the animation type when open & close the drop-down panel.</p>
|
||||
<div style="margin:20px 0">
|
||||
<span>Animation Type:</span>
|
||||
<select onchange="changeAnimation(this.value)">
|
||||
<option>slide</option>
|
||||
<option>fade</option>
|
||||
<option>show</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="cc" label="Animation:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#cc').combo();
|
||||
changeAnimation('slide');
|
||||
});
|
||||
function changeAnimation(atype){
|
||||
$('#cc').combo('panel').panel({
|
||||
openAnimation:atype,
|
||||
closeAnimation:(atype=='show'?'hide':atype)
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
erp_web/js/easyui/demo/combo/basic.html
Normal file
48
erp_web/js/easyui/demo/combo/basic.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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>
|
||||
<p>Click the right arrow button to show drop down panel that can be filled with any content.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="cc" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div id="sp">
|
||||
<div style="line-height:22px;background:#fafafa;padding:5px;">Select a language</div>
|
||||
<div style="padding:10px">
|
||||
<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>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#cc').combo({
|
||||
required:true,
|
||||
editable:false,
|
||||
label:'Language:',
|
||||
labelPosition:'top'
|
||||
});
|
||||
$('#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>
|
||||
88
erp_web/js/easyui/demo/combobox/actions.html
Normal file
88
erp_web/js/easyui/demo/combobox/actions.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!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>
|
||||
<p>Click the buttons below to perform actions.</p>
|
||||
|
||||
<div style="margin:20px 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>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select id="state" class="easyui-combobox" name="state" label="State:" labelPosition="top" style="width:100%;">
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
73
erp_web/js/easyui/demo/combobox/basic.html
Normal file
73
erp_web/js/easyui/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>
|
||||
<p>Type in ComboBox to try auto complete.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select class="easyui-combobox" name="state" label="State:" labelPosition="top" style="width:100%;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
22
erp_web/js/easyui/demo/combobox/combobox_data1.json
Normal file
22
erp_web/js/easyui/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
erp_web/js/easyui/demo/combobox/combobox_data2.json
Normal file
47
erp_web/js/easyui/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"
|
||||
}]
|
||||
39
erp_web/js/easyui/demo/combobox/customformat.html
Normal file
39
erp_web/js/easyui/demo/combobox/customformat.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!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>
|
||||
<p>This sample shows how to custom the format of list item.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combobox" name="language" style="width:100%;" data-options="
|
||||
url: 'combobox_data1.json',
|
||||
method: 'get',
|
||||
valueField: 'id',
|
||||
textField: 'text',
|
||||
panelWidth: 350,
|
||||
panelHeight: 'auto',
|
||||
formatter: formatItem,
|
||||
label: 'Language:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
31
erp_web/js/easyui/demo/combobox/dynamicdata.html
Normal file
31
erp_web/js/easyui/demo/combobox/dynamicdata.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!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>
|
||||
<p>Click the button below to load data.</p>
|
||||
|
||||
<div style="margin:20px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#language').combobox('reload', 'combobox_data1.json')">LoadData</a>
|
||||
</div>
|
||||
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="language" class="easyui-combobox" name="language" style="width:100%;" data-options="
|
||||
valueField: 'id',
|
||||
textField: 'text',
|
||||
label: 'Language:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
erp_web/js/easyui/demo/combobox/fluid.html
Normal file
43
erp_web/js/easyui/demo/combobox/fluid.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid 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>Fluid ComboBox</h2>
|
||||
<p>This example shows how to set the width of combobox to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combobox" name="language" style="width:100%;"
|
||||
data-options="
|
||||
url: 'combobox_data2.json',
|
||||
method: 'get',
|
||||
valueField:'value',
|
||||
textField:'text',
|
||||
groupField:'group',
|
||||
label: 'width: 100%',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combobox" name="language" style="width:50%;"
|
||||
data-options="
|
||||
url: 'combobox_data2.json',
|
||||
method: 'get',
|
||||
valueField:'value',
|
||||
textField:'text',
|
||||
groupField:'group',
|
||||
label: 'width: 50%',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
33
erp_web/js/easyui/demo/combobox/group.html
Normal file
33
erp_web/js/easyui/demo/combobox/group.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!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>
|
||||
<p>This example shows how to display combobox items in groups.</p>
|
||||
<div style="margin:20px 0">
|
||||
<input type="checkbox" onchange="$('#cc').combobox({groupPosition:$(this).is(':checked')?'sticky':'static'})">
|
||||
<span>Sticky Group</span>
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="cc" class="easyui-combobox" name="browser" style="width:100%;" data-options="
|
||||
url: 'combobox_data2.json',
|
||||
method: 'get',
|
||||
valueField:'value',
|
||||
textField:'text',
|
||||
groupField:'group',
|
||||
label: 'Browser:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
erp_web/js/easyui/demo/combobox/icons.html
Normal file
36
erp_web/js/easyui/demo/combobox/icons.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ComboBox with Extra Icons- 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 with Extra Icons</h2>
|
||||
<p>The user can attach extra icons to the ComboBox.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combobox" name="language" style="width:100%;" data-options="
|
||||
url:'combobox_data1.json',
|
||||
method:'get',
|
||||
valueField:'id',
|
||||
textField:'text',
|
||||
panelHeight:'auto',
|
||||
iconWidth:22,
|
||||
icons:[{
|
||||
iconCls:'icon-add'
|
||||
},{
|
||||
iconCls:'icon-cut'
|
||||
}],
|
||||
label: 'Language:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
erp_web/js/easyui/demo/combobox/itemicon.html
Normal file
35
erp_web/js/easyui/demo/combobox/itemicon.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Show Item Icon 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>Show Item Icon in ComboBox</h2>
|
||||
<p>This example shows how to display item icon in ComboBox.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combobox" style="width:100%;" data-options="
|
||||
showItemIcon: true,
|
||||
data: [
|
||||
{value:'add',text:'Add',iconCls:'icon-add'},
|
||||
{value:'del',text:'Delete',iconCls:'icon-remove'},
|
||||
{value:'save',text:'Save',iconCls:'icon-save',selected:true},
|
||||
{value:'cancel',text:'Cancel',iconCls:'icon-cancel'},
|
||||
{value:'undo',text:'Undo',iconCls:'icon-undo'},
|
||||
{value:'redo',text:'Redo',iconCls:'icon-redo'}
|
||||
],
|
||||
editable: false,
|
||||
panelHeight: 'auto',
|
||||
label: 'Perform Action:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
75
erp_web/js/easyui/demo/combobox/multiline.html
Normal file
75
erp_web/js/easyui/demo/combobox/multiline.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiline 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>Multiline ComboBox</h2>
|
||||
<p>This example shows how to create a multiline ComboBox.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select class="easyui-combobox" name="state" multiple="true" multiline="true" label="Select States:" labelPosition="top" style="width:100%;height:100px;">
|
||||
<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" selected>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" selected>Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA" selected>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" selected>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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
erp_web/js/easyui/demo/combobox/multiple.html
Normal file
32
erp_web/js/easyui/demo/combobox/multiple.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!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>
|
||||
<p>Drop down the panel and select multiple items.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combobox" name="language[]" style="width:100%;" data-options="
|
||||
url:'combobox_data1.json',
|
||||
method:'get',
|
||||
valueField:'id',
|
||||
textField:'text',
|
||||
value:[1,3],
|
||||
multiple:true,
|
||||
panelHeight:'auto',
|
||||
label: 'Language:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
77
erp_web/js/easyui/demo/combobox/navigation.html
Normal file
77
erp_web/js/easyui/demo/combobox/navigation.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!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>
|
||||
<p>Navigate through combobox items width keyboard to select an item.</p>
|
||||
<div style="margin:20px 0;">
|
||||
<input type="checkbox" checked onchange="$('#cc').combobox({selectOnNavigation:$(this).is(':checked')})">
|
||||
<span>SelectOnNavigation</span>
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select id="cc" class="easyui-combobox" name="state" label="State:" labelPosition="top" style="width:100%;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
erp_web/js/easyui/demo/combobox/remotedata.html
Normal file
30
erp_web/js/easyui/demo/combobox/remotedata.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!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>
|
||||
<p>The ComboBox is bound to a remote data.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combobox" name="language" style="width:100%;" data-options="
|
||||
url:'combobox_data1.json',
|
||||
method:'get',
|
||||
valueField:'id',
|
||||
textField:'text',
|
||||
panelHeight:'auto',
|
||||
label: 'Language:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
54
erp_web/js/easyui/demo/combobox/remotejsonp.html
Normal file
54
erp_web/js/easyui/demo/combobox/remotejsonp.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!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>
|
||||
<p>This sample shows how to use JSONP to retrieve data from a remote site.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combobox" style="width:100%;" data-options="
|
||||
loader: myloader,
|
||||
mode: 'remote',
|
||||
valueField: 'id',
|
||||
textField: 'name',
|
||||
label: 'State:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var myloader = function(param,success,error){
|
||||
var q = param.q || '';
|
||||
if (q.length <= 2){return false}
|
||||
$.ajax({
|
||||
url: 'https://gd.geobytes.com/AutoCompleteCity',
|
||||
dataType: 'jsonp',
|
||||
data: {
|
||||
q: q
|
||||
},
|
||||
success: function(data){
|
||||
var items = $.map(data, function(item,index){
|
||||
return {
|
||||
id: index,
|
||||
name: item
|
||||
};
|
||||
});
|
||||
success(items);
|
||||
},
|
||||
error: function(){
|
||||
error.apply(this, arguments);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
60
erp_web/js/easyui/demo/combogrid/actions.html
Normal file
60
erp_web/js/easyui/demo/combogrid/actions.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!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>
|
||||
<p>Click the buttons below to perform actions.</p>
|
||||
<div style="margin:20px 0">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="cc" class="easyui-combogrid" style="width:100%" 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,
|
||||
label: 'Select Item:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
40
erp_web/js/easyui/demo/combogrid/basic.html
Normal file
40
erp_web/js/easyui/demo/combogrid/basic.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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>
|
||||
<p>Click the right arrow button to show the DataGrid.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select class="easyui-combogrid" style="width:100%" 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,
|
||||
label: 'Select Item:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
erp_web/js/easyui/demo/combogrid/datagrid_data1.json
Normal file
12
erp_web/js/easyui/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"}
|
||||
]}
|
||||
63
erp_web/js/easyui/demo/combogrid/fluid.html
Normal file
63
erp_web/js/easyui/demo/combogrid/fluid.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid 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>Fluid ComboGrid</h2>
|
||||
<p>This example shows how to set the width of ComboGrid to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select class="easyui-combogrid" style="width:100%" data-options="
|
||||
panelWidth: 500,
|
||||
panelMinWidth: '50%',
|
||||
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,
|
||||
label: 'width: 100%',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<select class="easyui-combogrid" style="width:50%" data-options="
|
||||
panelWidth: 500,
|
||||
panelMinWidth: '50%',
|
||||
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,
|
||||
label: 'width: 50%',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
erp_web/js/easyui/demo/combogrid/initvalue.html
Normal file
41
erp_web/js/easyui/demo/combogrid/initvalue.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!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>
|
||||
<p>Initialize value when ComboGrid is created.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select class="easyui-combogrid" style="width:100%" data-options="
|
||||
panelWidth: 500,
|
||||
idField: 'itemid',
|
||||
textField: 'productname',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
value: 'EST-12',
|
||||
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,
|
||||
label: 'Select Item:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
erp_web/js/easyui/demo/combogrid/multiple.html
Normal file
42
erp_web/js/easyui/demo/combogrid/multiple.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!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>
|
||||
<p>Click the right arrow button to show the DataGrid and select items.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select class="easyui-combogrid" style="width:100%" data-options="
|
||||
panelWidth: 500,
|
||||
multiple: true,
|
||||
idField: 'itemid',
|
||||
textField: 'productname',
|
||||
url: 'datagrid_data1.json',
|
||||
method: 'get',
|
||||
value: ['EST-11','EST-13'],
|
||||
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,
|
||||
label: 'Select Items:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
erp_web/js/easyui/demo/combogrid/navigation.html
Normal file
43
erp_web/js/easyui/demo/combogrid/navigation.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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>
|
||||
<p>Navigate through grid items with keyboard to select an item.</p>
|
||||
<div style="margin:20px 0">
|
||||
<input type="checkbox" checked onchange="$('#cc').combogrid({selectOnNavigation:$(this).is(':checked')})">
|
||||
<span>SelectOnNavigation</span>
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select id="cc" class="easyui-combogrid" style="width:100%" 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,
|
||||
label: 'Select Item:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
59
erp_web/js/easyui/demo/combogrid/setvalue.html
Normal file
59
erp_web/js/easyui/demo/combogrid/setvalue.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Set 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>Set Value for ComboGrid</h2>
|
||||
<p>Click the buttons below to perform actions.</p>
|
||||
<div style="margin:20px 0">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue1()">SetValue1</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue2()">SetValue2</a>
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<select id="cc" class="easyui-combogrid" style="width:100%" 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,
|
||||
label: 'Select Item:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function getValue(){
|
||||
var val = $('#cc').combogrid('getValue');
|
||||
alert(val);
|
||||
}
|
||||
function setValue1(){
|
||||
$('#cc').combogrid('setValue', 'EST-13');
|
||||
}
|
||||
function setValue2(){
|
||||
$('#cc').combogrid('setValue', {
|
||||
itemid: 'customid',
|
||||
productname: 'CustomName'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
43
erp_web/js/easyui/demo/combotree/actions.html
Normal file
43
erp_web/js/easyui/demo/combotree/actions.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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>
|
||||
<p>Click the buttons below to perform actions</p>
|
||||
<div style="margin:20px 0">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="cc" class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',label:'Select Node:',labelPosition:'top'" style="width:100%">
|
||||
</div>
|
||||
</div>
|
||||
<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
erp_web/js/easyui/demo/combotree/basic.html
Normal file
22
erp_web/js/easyui/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>
|
||||
<p>Click the right arrow button to show the tree panel.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',label:'Select Node:',labelPosition:'top'" style="width:100%">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
erp_web/js/easyui/demo/combotree/fluid.html
Normal file
25
erp_web/js/easyui/demo/combotree/fluid.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid 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>Fluid ComboTree</h2>
|
||||
<p>This example shows how to set the width of ComboTree to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',label:'width: 100%',labelPosition:'top'" style="width:100%">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',label:'width: 80%',labelPosition:'top'" style="width:80%">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
22
erp_web/js/easyui/demo/combotree/initvalue.html
Normal file
22
erp_web/js/easyui/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>
|
||||
<p>Initialize Value when ComboTree is created.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combotree" value="122" data-options="url:'tree_data1.json',method:'get',label:'Select Node:',labelPosition:'top'" style="width:100%">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
erp_web/js/easyui/demo/combotree/multiple.html
Normal file
26
erp_web/js/easyui/demo/combotree/multiple.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!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>
|
||||
<p>Click the right arrow button to show the tree panel and select multiple nodes.</p>
|
||||
<div style="margin:20px 0">
|
||||
<span>Cascade Check: </span>
|
||||
<input type="checkbox" checked onclick="$('#cc').combotree({cascadeCheck:$(this).is(':checked')})">
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="cc" class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',label:'Select Nodes:',labelPosition:'top',multiple:true,value:[122,124]" style="width:100%">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
erp_web/js/easyui/demo/combotree/tree_data1.json
Normal file
49
erp_web/js/easyui/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"
|
||||
}]
|
||||
}]
|
||||
34
erp_web/js/easyui/demo/combotreegrid/basic.html
Normal file
34
erp_web/js/easyui/demo/combotreegrid/basic.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic ComboTreeGrid - 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 ComboTreeGrid</h2>
|
||||
<p>Click the right arrow button to show the TreeGrid.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combotreegrid" data-options="
|
||||
width:'100%',
|
||||
panelWidth:500,
|
||||
label:'Select Item:',
|
||||
labelPosition:'top',
|
||||
url:'treegrid_data1.json',
|
||||
idField:'id',
|
||||
treeField:'name',
|
||||
columns:[[
|
||||
{field:'name',title:'Name',width:200},
|
||||
{field:'size',title:'Size',width:100},
|
||||
{field:'date',title:'Date',width:100}
|
||||
]]">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
erp_web/js/easyui/demo/combotreegrid/multiple.html
Normal file
36
erp_web/js/easyui/demo/combotreegrid/multiple.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple ComboTreeGrid - 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 ComboTreeGrid</h2>
|
||||
<p>Click the right arrow button to show the TreeGrid and select items.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-combotreegrid" data-options="
|
||||
width:'100%',
|
||||
panelWidth:500,
|
||||
label:'Select Items:',
|
||||
labelPosition:'top',
|
||||
url:'treegrid_data1.json',
|
||||
idField:'id',
|
||||
treeField:'name',
|
||||
multiple:true,
|
||||
value:['211','31'],
|
||||
columns:[[
|
||||
{field:'name',title:'Name',width:200},
|
||||
{field:'size',title:'Size',width:100},
|
||||
{field:'date',title:'Date',width:100}
|
||||
]]">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
erp_web/js/easyui/demo/combotreegrid/treegrid_data1.json
Normal file
73
erp_web/js/easyui/demo/combotreegrid/treegrid_data1.json
Normal file
@@ -0,0 +1,73 @@
|
||||
[{
|
||||
"id":1,
|
||||
"name":"C",
|
||||
"size":"",
|
||||
"date":"02/19/2010",
|
||||
"children":[{
|
||||
"id":2,
|
||||
"name":"Program Files",
|
||||
"size":"120 MB",
|
||||
"date":"03/20/2010",
|
||||
"children":[{
|
||||
"id":21,
|
||||
"name":"Java",
|
||||
"size":"",
|
||||
"date":"01/13/2010",
|
||||
"state":"closed",
|
||||
"children":[{
|
||||
"id":211,
|
||||
"name":"java.exe",
|
||||
"size":"142 KB",
|
||||
"date":"01/13/2010"
|
||||
},{
|
||||
"id":212,
|
||||
"name":"jawt.dll",
|
||||
"size":"5 KB",
|
||||
"date":"01/13/2010"
|
||||
}]
|
||||
},{
|
||||
"id":22,
|
||||
"name":"MySQL",
|
||||
"size":"",
|
||||
"date":"01/13/2010",
|
||||
"state":"closed",
|
||||
"children":[{
|
||||
"id":221,
|
||||
"name":"my.ini",
|
||||
"size":"10 KB",
|
||||
"date":"02/26/2009"
|
||||
},{
|
||||
"id":222,
|
||||
"name":"my-huge.ini",
|
||||
"size":"5 KB",
|
||||
"date":"02/26/2009"
|
||||
},{
|
||||
"id":223,
|
||||
"name":"my-large.ini",
|
||||
"size":"5 KB",
|
||||
"date":"02/26/2009"
|
||||
}]
|
||||
}]
|
||||
},{
|
||||
"id":3,
|
||||
"name":"eclipse",
|
||||
"size":"",
|
||||
"date":"01/20/2010",
|
||||
"children":[{
|
||||
"id":31,
|
||||
"name":"eclipse.exe",
|
||||
"size":"56 KB",
|
||||
"date":"05/19/2009"
|
||||
},{
|
||||
"id":32,
|
||||
"name":"eclipse.ini",
|
||||
"size":"1 KB",
|
||||
"date":"04/20/2010"
|
||||
},{
|
||||
"id":33,
|
||||
"name":"notice.html",
|
||||
"size":"7 KB",
|
||||
"date":"03/17/2005"
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
32
erp_web/js/easyui/demo/datagrid/aligncolumns.html
Normal file
32
erp_web/js/easyui/demo/datagrid/aligncolumns.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!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>
|
||||
<p>Use align and halign properties to set the alignment of the columns and their header.</p>
|
||||
<div style="margin:20px 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>
|
||||
32
erp_web/js/easyui/demo/datagrid/basic.html
Normal file
32
erp_web/js/easyui/demo/datagrid/basic.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!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>
|
||||
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
|
||||
<div style="margin:20px 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>
|
||||
149
erp_web/js/easyui/demo/datagrid/cacheeditor.html
Normal file
149
erp_web/js/easyui/demo/datagrid/cacheeditor.html
Normal file
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Cache Editor 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>Cache Editor for DataGrid</h2>
|
||||
<p>This example shows how to cache the editors for datagrid to improve the editing speed.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
|
||||
<table id="dg" class="easyui-datagrid" title="Cache Editor for 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',
|
||||
method:'get',
|
||||
url:'products.json',
|
||||
required:true
|
||||
}
|
||||
}">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">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-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">
|
||||
(function($){
|
||||
function getCacheContainer(t){
|
||||
var view = $(t).closest('div.datagrid-view');
|
||||
var c = view.children('div.datagrid-editor-cache');
|
||||
if (!c.length){
|
||||
c = $('<div class="datagrid-editor-cache" style="position:absolute;display:none"></div>').appendTo(view);
|
||||
}
|
||||
return c;
|
||||
}
|
||||
function getCacheEditor(t, field){
|
||||
var c = getCacheContainer(t);
|
||||
return c.children('div.datagrid-editor-cache-' + field);
|
||||
}
|
||||
function setCacheEditor(t, field, editor){
|
||||
var c = getCacheContainer(t);
|
||||
c.children('div.datagrid-editor-cache-' + field).remove();
|
||||
var e = $('<div class="datagrid-editor-cache-' + field + '"></div>').appendTo(c);
|
||||
e.append(editor);
|
||||
}
|
||||
|
||||
var editors = $.fn.datagrid.defaults.editors;
|
||||
for(var editor in editors){
|
||||
var opts = editors[editor];
|
||||
(function(){
|
||||
var init = opts.init;
|
||||
opts.init = function(container, options){
|
||||
var field = $(container).closest('td[field]').attr('field');
|
||||
var ed = getCacheEditor(container, field);
|
||||
if (ed.length){
|
||||
ed.appendTo(container);
|
||||
return ed.find('.datagrid-editable-input');
|
||||
} else {
|
||||
return init(container, options);
|
||||
}
|
||||
}
|
||||
})();
|
||||
(function(){
|
||||
var destroy = opts.destroy;
|
||||
opts.destroy = function(target){
|
||||
if ($(target).hasClass('datagrid-editable-input')){
|
||||
var field = $(target).closest('td[field]').attr('field');
|
||||
setCacheEditor(target, field, $(target).parent().children());
|
||||
} else if (destroy){
|
||||
destroy(target);
|
||||
}
|
||||
}
|
||||
})();
|
||||
}
|
||||
})(jQuery);
|
||||
</script>
|
||||
<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 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>
|
||||
94
erp_web/js/easyui/demo/datagrid/cellediting.html
Normal file
94
erp_web/js/easyui/demo/datagrid/cellediting.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!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>
|
||||
<p>Click a cell to start editing.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
|
||||
<table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:auto"
|
||||
data-options="
|
||||
iconCls: 'icon-edit',
|
||||
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,editor:'text'">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">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);
|
||||
var ed = $(this).datagrid('getEditor', param);
|
||||
if (ed){
|
||||
if ($(ed.target).hasClass('textbox-f')){
|
||||
$(ed.target).textbox('textbox').focus();
|
||||
} else {
|
||||
$(ed.target).focus();
|
||||
}
|
||||
}
|
||||
for(var i=0; i<fields.length; i++){
|
||||
var col = $(this).datagrid('getColumnOption', fields[i]);
|
||||
col.editor = col.editor1;
|
||||
}
|
||||
});
|
||||
},
|
||||
enableCellEditing: function(jq){
|
||||
return jq.each(function(){
|
||||
var dg = $(this);
|
||||
var opts = dg.datagrid('options');
|
||||
opts.oldOnClickCell = opts.onClickCell;
|
||||
opts.onClickCell = function(index, field){
|
||||
if (opts.editIndex != undefined){
|
||||
if (dg.datagrid('validateRow', opts.editIndex)){
|
||||
dg.datagrid('endEdit', opts.editIndex);
|
||||
opts.editIndex = undefined;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
dg.datagrid('selectRow', index).datagrid('editCell', {
|
||||
index: index,
|
||||
field: field
|
||||
});
|
||||
opts.editIndex = index;
|
||||
opts.oldOnClickCell.call(this, index, field);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(function(){
|
||||
$('#dg').datagrid().datagrid('enableCellEditing');
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
42
erp_web/js/easyui/demo/datagrid/cellstyle.html
Normal file
42
erp_web/js/easyui/demo/datagrid/cellstyle.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!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>
|
||||
<p>The cells which listprice value is less than 30 are highlighted.</p>
|
||||
<div style="margin:20px 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>
|
||||
42
erp_web/js/easyui/demo/datagrid/checkbox.html
Normal file
42
erp_web/js/easyui/demo/datagrid/checkbox.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!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>
|
||||
<p>Click the checkbox on header to select or unselect all selections.</p>
|
||||
<div style="margin:20px 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>
|
||||
160
erp_web/js/easyui/demo/datagrid/clientpagination.html
Normal file
160
erp_web/js/easyui/demo/datagrid/clientpagination.html
Normal file
@@ -0,0 +1,160 @@
|
||||
<!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>
|
||||
<p>This sample shows how to implement client side pagination in DataGrid.</p>
|
||||
<div style="margin:20px 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($){
|
||||
function pagerFilter(data){
|
||||
if ($.isArray(data)){ // is array
|
||||
data = {
|
||||
total: data.length,
|
||||
rows: data
|
||||
}
|
||||
}
|
||||
var target = this;
|
||||
var dg = $(target);
|
||||
var state = dg.data('datagrid');
|
||||
var opts = dg.datagrid('options');
|
||||
if (!state.allRows){
|
||||
state.allRows = (data.rows);
|
||||
}
|
||||
if (!opts.remoteSort && opts.sortName){
|
||||
var names = opts.sortName.split(',');
|
||||
var orders = opts.sortOrder.split(',');
|
||||
state.allRows.sort(function(r1,r2){
|
||||
var r = 0;
|
||||
for(var i=0; i<names.length; i++){
|
||||
var sn = names[i];
|
||||
var so = orders[i];
|
||||
var col = $(target).datagrid('getColumnOption', sn);
|
||||
var sortFunc = col.sorter || function(a,b){
|
||||
return a==b ? 0 : (a>b?1:-1);
|
||||
};
|
||||
r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
|
||||
if (r != 0){
|
||||
return r;
|
||||
}
|
||||
}
|
||||
return r;
|
||||
});
|
||||
}
|
||||
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
|
||||
var end = start + parseInt(opts.pageSize);
|
||||
data.rows = state.allRows.slice(start, end);
|
||||
return data;
|
||||
}
|
||||
|
||||
var loadDataMethod = $.fn.datagrid.methods.loadData;
|
||||
var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
|
||||
$.extend($.fn.datagrid.methods, {
|
||||
clientPaging: function(jq){
|
||||
return jq.each(function(){
|
||||
var dg = $(this);
|
||||
var state = dg.data('datagrid');
|
||||
var opts = state.options;
|
||||
opts.loadFilter = pagerFilter;
|
||||
var onBeforeLoad = opts.onBeforeLoad;
|
||||
opts.onBeforeLoad = function(param){
|
||||
state.allRows = null;
|
||||
return onBeforeLoad.call(this, param);
|
||||
}
|
||||
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',state.allRows);
|
||||
}
|
||||
});
|
||||
$(this).datagrid('loadData', state.data);
|
||||
if (opts.url){
|
||||
$(this).datagrid('reload');
|
||||
}
|
||||
});
|
||||
},
|
||||
loadData: function(jq, data){
|
||||
jq.each(function(){
|
||||
$(this).data('datagrid').allRows = null;
|
||||
});
|
||||
return loadDataMethod.call($.fn.datagrid.methods, jq, data);
|
||||
},
|
||||
deleteRow: function(jq, index){
|
||||
return jq.each(function(){
|
||||
var row = $(this).datagrid('getRows')[index];
|
||||
deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
|
||||
var state = $(this).data('datagrid');
|
||||
if (state.options.loadFilter == pagerFilter){
|
||||
for(var i=0; i<state.allRows.length; i++){
|
||||
if (state.allRows[i] == row){
|
||||
state.allRows.splice(i,1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
$(this).datagrid('loadData', state.allRows);
|
||||
}
|
||||
});
|
||||
},
|
||||
getAllRows: function(jq){
|
||||
return jq.data('datagrid').allRows;
|
||||
}
|
||||
})
|
||||
})(jQuery);
|
||||
|
||||
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(){
|
||||
$('#dg').datagrid({data:getData()}).datagrid('clientPaging');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
34
erp_web/js/easyui/demo/datagrid/columngroup.html
Normal file
34
erp_web/js/easyui/demo/datagrid/columngroup.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!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>
|
||||
<p>The header cells can be merged. Useful to group columns under a category.</p>
|
||||
<div style="margin:20px 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>
|
||||
50
erp_web/js/easyui/demo/datagrid/complextoolbar.html
Normal file
50
erp_web/js/easyui/demo/datagrid/complextoolbar.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!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>
|
||||
<p>The DataGrid toolbar can be defined from a <div> markup, so you can define the layout of toolbar easily.</p>
|
||||
<div style="margin:20px 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',footer:'#ft'">
|
||||
<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:2px 5px;">
|
||||
Date From: <input class="easyui-datebox" style="width:110px">
|
||||
To: <input class="easyui-datebox" style="width:110px">
|
||||
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 id="ft" style="padding:2px 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>
|
||||
</body>
|
||||
</html>
|
||||
89
erp_web/js/easyui/demo/datagrid/contextmenu.html
Normal file
89
erp_web/js/easyui/demo/datagrid/contextmenu.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!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>
|
||||
<p>Right click on the header of DataGrid to display context menu.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<table id="dg"></table>
|
||||
<script type="text/javascript">
|
||||
(function($){
|
||||
function buildMenu(target){
|
||||
var state = $(target).data('datagrid');
|
||||
if (!state.columnMenu){
|
||||
state.columnMenu = $('<div></div>').appendTo('body');
|
||||
state.columnMenu.menu({
|
||||
onClick: function(item){
|
||||
if (item.iconCls == 'tree-checkbox1'){
|
||||
$(target).datagrid('hideColumn', item.name);
|
||||
$(this).menu('setIcon', {
|
||||
target: item.target,
|
||||
iconCls: 'tree-checkbox0'
|
||||
});
|
||||
} else {
|
||||
$(target).datagrid('showColumn', item.name);
|
||||
$(this).menu('setIcon', {
|
||||
target: item.target,
|
||||
iconCls: 'tree-checkbox1'
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
var fields = $(target).datagrid('getColumnFields',true).concat($(target).datagrid('getColumnFields',false));
|
||||
for(var i=0; i<fields.length; i++){
|
||||
var field = fields[i];
|
||||
var col = $(target).datagrid('getColumnOption', field);
|
||||
state.columnMenu.menu('appendItem', {
|
||||
text: col.title,
|
||||
name: field,
|
||||
iconCls: 'tree-checkbox1'
|
||||
});
|
||||
}
|
||||
}
|
||||
return state.columnMenu;
|
||||
}
|
||||
$.extend($.fn.datagrid.methods, {
|
||||
columnMenu: function(jq){
|
||||
return buildMenu(jq[0]);
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
$(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();
|
||||
$(this).datagrid('columnMenu').menu('show', {
|
||||
left:e.pageX,
|
||||
top:e.pageY
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
53
erp_web/js/easyui/demo/datagrid/custompager.html
Normal file
53
erp_web/js/easyui/demo/datagrid/custompager.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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>
|
||||
<p>You can append some buttons to the standard datagrid pager bar.</p>
|
||||
<div style="margin:20px 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
erp_web/js/easyui/demo/datagrid/datagrid_data1.json
Normal file
12
erp_web/js/easyui/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
erp_web/js/easyui/demo/datagrid/datagrid_data2.json
Normal file
15
erp_web/js/easyui/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:"}
|
||||
]}
|
||||
32
erp_web/js/easyui/demo/datagrid/fluid.html
Normal file
32
erp_web/js/easyui/demo/datagrid/fluid.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid 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>Fluid DataGrid</h2>
|
||||
<p>This example shows how to assign percentage width to a column in DataGrid.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
|
||||
<table id="dg" class="easyui-datagrid" title="Fluid 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',resizable:false" width="15%">Item ID(15%)</th>
|
||||
<th data-options="field:'productid',resizable:false" width="15%">Product(15%)</th>
|
||||
<th data-options="field:'listprice',align:'right',resizable:false" width="15%">List Price(15%)</th>
|
||||
<th data-options="field:'unitcost',align:'right',resizable:false" width="15%">Unit Cost(15%)</th>
|
||||
<th data-options="field:'attr1',resizable:false" width="25%">Attribute(25%)</th>
|
||||
<th data-options="field:'status',align:'center',resizable:false" width="15%">Status(15%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
38
erp_web/js/easyui/demo/datagrid/footer.html
Normal file
38
erp_web/js/easyui/demo/datagrid/footer.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!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>
|
||||
<p>The summary informations can be displayed in footer rows.</p>
|
||||
<div style="margin:20px 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>
|
||||
39
erp_web/js/easyui/demo/datagrid/formatcolumns.html
Normal file
39
erp_web/js/easyui/demo/datagrid/formatcolumns.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!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>
|
||||
<p>The list price value will show red color when less than 30.</p>
|
||||
<div style="margin:20px 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>
|
||||
35
erp_web/js/easyui/demo/datagrid/frozencolumns.html
Normal file
35
erp_web/js/easyui/demo/datagrid/frozencolumns.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>
|
||||
<p>You can freeze some columns that can't scroll out of view.</p>
|
||||
<div style="margin:20px 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>
|
||||
44
erp_web/js/easyui/demo/datagrid/frozenrows.html
Normal file
44
erp_web/js/easyui/demo/datagrid/frozenrows.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!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>
|
||||
<p>This sample shows how to freeze some rows that will always be displayed at the top when the datagrid is scrolled down.</p>
|
||||
<div style="margin:20px 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>
|
||||
58
erp_web/js/easyui/demo/datagrid/mergecells.html
Normal file
58
erp_web/js/easyui/demo/datagrid/mergecells.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!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>
|
||||
<p>Cells in DataGrid body can be merged.</p>
|
||||
<div style="margin:20px 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>
|
||||
43
erp_web/js/easyui/demo/datagrid/multisorting.html
Normal file
43
erp_web/js/easyui/demo/datagrid/multisorting.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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>
|
||||
<p>Set 'multiSort' property to true to enable multiple column sorting.</p>
|
||||
<div style="margin:20px 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,sorter:numSorter">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right',sortable:true,sorter:numSorter">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 numSorter(a,b){
|
||||
a = parseFloat(a);
|
||||
b = parseFloat(b);
|
||||
return a==b?0:(a>b?1:-1);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
9
erp_web/js/easyui/demo/datagrid/products.json
Normal file
9
erp_web/js/easyui/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"}
|
||||
]
|
||||
60
erp_web/js/easyui/demo/datagrid/rowborder.html
Normal file
60
erp_web/js/easyui/demo/datagrid/rowborder.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!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>
|
||||
<p>This sample shows how to change the row border style of datagrid.</p>
|
||||
<div style="margin:20px 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>
|
||||
125
erp_web/js/easyui/demo/datagrid/rowediting.html
Normal file
125
erp_web/js/easyui/demo/datagrid/rowediting.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!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>
|
||||
<p>Click the row to start editing.</p>
|
||||
<div style="margin:20px 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',
|
||||
onClickCell: onClickCell,
|
||||
onEndEdit: onEndEdit
|
||||
">
|
||||
<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',
|
||||
method:'get',
|
||||
url:'products.json',
|
||||
required:true
|
||||
}
|
||||
}">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:250,editor:'textbox'">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="acceptit()">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)){
|
||||
$('#dg').datagrid('endEdit', editIndex);
|
||||
editIndex = undefined;
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function onClickCell(index, field){
|
||||
if (editIndex != index){
|
||||
if (endEditing()){
|
||||
$('#dg').datagrid('selectRow', index)
|
||||
.datagrid('beginEdit', index);
|
||||
var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
|
||||
if (ed){
|
||||
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
|
||||
}
|
||||
editIndex = index;
|
||||
} else {
|
||||
setTimeout(function(){
|
||||
$('#dg').datagrid('selectRow', editIndex);
|
||||
},0);
|
||||
}
|
||||
}
|
||||
}
|
||||
function onEndEdit(index, row){
|
||||
var ed = $(this).datagrid('getEditor', {
|
||||
index: index,
|
||||
field: 'productid'
|
||||
});
|
||||
row.productname = $(ed.target).combobox('getText');
|
||||
}
|
||||
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 acceptit(){
|
||||
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>
|
||||
41
erp_web/js/easyui/demo/datagrid/rowstyle.html
Normal file
41
erp_web/js/easyui/demo/datagrid/rowstyle.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!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>
|
||||
<p>The rows which listprice value is less than 30 are highlighted.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<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>
|
||||
57
erp_web/js/easyui/demo/datagrid/selection.html
Normal file
57
erp_web/js/easyui/demo/datagrid/selection.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!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>
|
||||
<p>Choose a selection mode and select one or more rows.</p>
|
||||
<div style="margin:20px 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>
|
||||
45
erp_web/js/easyui/demo/datagrid/simpletoolbar.html
Normal file
45
erp_web/js/easyui/demo/datagrid/simpletoolbar.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!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>
|
||||
<p>Put buttons on top toolbar of DataGrid.</p>
|
||||
<div style="margin:20px 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>
|
||||
46
erp_web/js/easyui/demo/datagrid/transform.html
Normal file
46
erp_web/js/easyui/demo/datagrid/transform.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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>
|
||||
<p>Transform DataGrid from an existing, unformatted html table.</p>
|
||||
<div style="margin:20px 0;">
|
||||
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid()">Transform</a>
|
||||
</div>
|
||||
<table id="dg" style="width:700px;height:auto;border:1px solid #ccc;">
|
||||
<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>
|
||||
69
erp_web/js/easyui/demo/datalist/basic.html
Normal file
69
erp_web/js/easyui/demo/datalist/basic.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic DataList - 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 DataList</h2>
|
||||
<p>The DataList can be created from the <ul> element.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<ul class="easyui-datalist" title="Basic DataList" lines="true" style="width:400px;height:250px">
|
||||
<li value="AL">Alabama</li>
|
||||
<li value="AK">Alaska</li>
|
||||
<li value="AZ">Arizona</li>
|
||||
<li value="AR">Arkansas</li>
|
||||
<li value="CA">California</li>
|
||||
<li value="CO">Colorado</li>
|
||||
<li value="CT">Connecticut</li>
|
||||
<li value="DE">Delaware</li>
|
||||
<li value="FL">Florida</li>
|
||||
<li value="GA">Georgia</li>
|
||||
<li value="HI">Hawaii</li>
|
||||
<li value="ID">Idaho</li>
|
||||
<li value="IL">Illinois</li>
|
||||
<li value="IN">Indiana</li>
|
||||
<li value="IA">Iowa</li>
|
||||
<li value="KS">Kansas</li>
|
||||
<li value="KY">Kentucky</li>
|
||||
<li value="LA">Louisiana</li>
|
||||
<li value="ME">Maine</li>
|
||||
<li value="MD">Maryland</li>
|
||||
<li value="MA">Massachusetts</li>
|
||||
<li value="MI">Michigan</li>
|
||||
<li value="MN">Minnesota</li>
|
||||
<li value="MS">Mississippi</li>
|
||||
<li value="MO">Missouri</li>
|
||||
<li value="MT">Montana</li>
|
||||
<li value="NE">Nebraska</li>
|
||||
<li value="NV">Nevada</li>
|
||||
<li value="NH">New Hampshire</li>
|
||||
<li value="NJ">New Jersey</li>
|
||||
<li value="NM">New Mexico</li>
|
||||
<li value="NY">New York</li>
|
||||
<li value="NC">North Carolina</li>
|
||||
<li value="ND">North Dakota</li>
|
||||
<li value="OH">Ohio</li>
|
||||
<li value="OK">Oklahoma</li>
|
||||
<li value="OR">Oregon</li>
|
||||
<li value="PA">Pennsylvania</li>
|
||||
<li value="RI">Rhode Island</li>
|
||||
<li value="SC">South Carolina</li>
|
||||
<li value="SD">South Dakota</li>
|
||||
<li value="TN">Tennessee</li>
|
||||
<li value="TX">Texas</li>
|
||||
<li value="UT">Utah</li>
|
||||
<li value="VT">Vermont</li>
|
||||
<li value="VA">Virginia</li>
|
||||
<li value="WA">Washington</li>
|
||||
<li value="WV">West Virginia</li>
|
||||
<li value="WI">Wisconsin</li>
|
||||
<li value="WY">Wyoming</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
25
erp_web/js/easyui/demo/datalist/checkbox.html
Normal file
25
erp_web/js/easyui/demo/datalist/checkbox.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Checkbox in DataList - 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 in DataList</h2>
|
||||
<p>Each item in the DataList has a checkbox.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-datalist" title="Checkbox in DataList" style="width:400px;height:250px" data-options="
|
||||
url: 'datalist_data1.json',
|
||||
method: 'get',
|
||||
checkbox: true,
|
||||
selectOnCheck: false,
|
||||
onBeforeSelect: function(){return false;}
|
||||
">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
18
erp_web/js/easyui/demo/datalist/datalist_data1.json
Normal file
18
erp_web/js/easyui/demo/datalist/datalist_data1.json
Normal file
@@ -0,0 +1,18 @@
|
||||
[
|
||||
{"text":"Epson WorkForce 845","group":"Printer"},
|
||||
{"text":"Canon PIXMA MG5320","group":"Printer"},
|
||||
{"text":"HP Deskjet 1000 Printer","group":"Printer"},
|
||||
{"text":"Cisco RV110W-A-NA-K9","group":"Firewall"},
|
||||
{"text":"ZyXEL ZyWALL USG50","group":"Firewall"},
|
||||
{"text":"NETGEAR FVS318","group":"Firewall"},
|
||||
{"text":"Logitech Keyboard K120","group":"Keyboard"},
|
||||
{"text":"Microsoft Natural Ergonomic Keyboard 4000","group":"Keyboard"},
|
||||
{"text":"Logitech Wireless Touch Keyboard K400","group":"Keyboard"},
|
||||
{"text":"Logitech Gaming Keyboard G110","group":"Keyboard"},
|
||||
{"text":"Nikon COOLPIX L26 16.1 MP","group":"Camera"},
|
||||
{"text":"Canon PowerShot A1300","group":"Camera"},
|
||||
{"text":"Canon PowerShot A2300","group":"Camera"}
|
||||
|
||||
|
||||
|
||||
]
|
||||
23
erp_web/js/easyui/demo/datalist/group.html
Normal file
23
erp_web/js/easyui/demo/datalist/group.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Group DataList - 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 DataList</h2>
|
||||
<p>This example shows how to display items in groups.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-datalist" title="Group DataList" style="width:400px;height:250px" data-options="
|
||||
url: 'datalist_data1.json',
|
||||
method: 'get',
|
||||
groupField: 'group'
|
||||
">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
23
erp_web/js/easyui/demo/datalist/multiselect.html
Normal file
23
erp_web/js/easyui/demo/datalist/multiselect.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple Selection DataList - 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 Selection DataList</h2>
|
||||
<p>The multiple selection allows the user to select multiple items in a datalist.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-datalist" title="Multiple Selection DataList" style="width:400px;height:250px" data-options="
|
||||
url: 'datalist_data1.json',
|
||||
method: 'get',
|
||||
singleSelect: false
|
||||
">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
22
erp_web/js/easyui/demo/datalist/remotedata.html
Normal file
22
erp_web/js/easyui/demo/datalist/remotedata.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!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>
|
||||
<p>The DataList is bound to a remote data.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-datalist" title="Remote Data" style="width:400px;height:250px" data-options="
|
||||
url: 'datalist_data1.json',
|
||||
method: 'get'
|
||||
">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
erp_web/js/easyui/demo/datebox/basic.html
Normal file
25
erp_web/js/easyui/demo/datebox/basic.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!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>
|
||||
<p>Click the calendar image on the right side.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="Start Date:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="End Date:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
erp_web/js/easyui/demo/datebox/buttons.html
Normal file
34
erp_web/js/easyui/demo/datebox/buttons.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!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>
|
||||
<p>This example shows how to customize the datebox buttons underneath the calendar.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="Date With 2 Buttons:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="Date With 3 Buttons:" labelPosition="top" data-options="buttons:buttons" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
|
||||
buttons.splice(1, 0, {
|
||||
text: 'MyBtn',
|
||||
handler: function(target){
|
||||
alert('click MyBtn');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
erp_web/js/easyui/demo/datebox/clone.html
Normal file
31
erp_web/js/easyui/demo/datebox/clone.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Clone 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>Clone DateBox</h2>
|
||||
<p>Click the 'Clone' button to clone datebox components from the exiting datebox.</p>
|
||||
<div style="margin:20px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cloneDatebox()">Clone</a>
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="dt" class="easyui-datebox" label="Select Date:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
<div id="cc" style="margin-top:10px"></div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function cloneDatebox(){
|
||||
var dt = $('<input>').appendTo('#cc');
|
||||
dt.datebox('cloneFrom', '#dt');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
erp_web/js/easyui/demo/datebox/dateformat.html
Normal file
45
erp_web/js/easyui/demo/datebox/dateformat.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!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>
|
||||
<p>Different date formats are applied to different DateBox components.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="Default Format:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="Customized Format:" labelPosition="top" data-options="formatter:myformatter,parser:myparser" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
31
erp_web/js/easyui/demo/datebox/events.html
Normal file
31
erp_web/js/easyui/demo/datebox/events.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!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>
|
||||
<p>Click the calendar image on the right side.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" data-options="label:'Select Date:',labelPosition:'top',onSelect:onSelect" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin:10px 0">
|
||||
<span>Selected Date: </span>
|
||||
<span id="result"></span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function onSelect(date){
|
||||
$('#result').text(date)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
25
erp_web/js/easyui/demo/datebox/fluid.html
Normal file
25
erp_web/js/easyui/demo/datebox/fluid.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid 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>Fluid DateBox</h2>
|
||||
<p>This example shows how to set the width of DateBox to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="width: 100%" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="width: 50%" labelPosition="top" style="width:50%;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
erp_web/js/easyui/demo/datebox/restrict.html
Normal file
34
erp_web/js/easyui/demo/datebox/restrict.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Restrict Date Range in 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>Restrict Date Range in DateBox</h2>
|
||||
<p>This example shows how to restrict the user to select only ten days from now.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="dd" label="Select Date:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#dd').datebox().datebox('calendar').calendar({
|
||||
validator: function(date){
|
||||
var now = new Date();
|
||||
var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
var d2 = new Date(now.getFullYear(), now.getMonth(), now.getDate()+10);
|
||||
return d1<=date && date<=d2;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
erp_web/js/easyui/demo/datebox/sharedcalendar.html
Normal file
26
erp_web/js/easyui/demo/datebox/sharedcalendar.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Shared Calendar in 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>Shared Calendar in DateBox</h2>
|
||||
<p>Multiple datebox components can share a calendar and use it to pick dates.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" data-options="label:'Start Date:',labelPosition:'top',sharedCalendar:'#cc'" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" data-options="label:'End Date:',labelPosition:'top',sharedCalendar:'#cc'" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div id="cc" class="easyui-calendar"></div>
|
||||
</body>
|
||||
</html>
|
||||
37
erp_web/js/easyui/demo/datebox/validate.html
Normal file
37
erp_web/js/easyui/demo/datebox/validate.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!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>
|
||||
<p>When the selected date is greater than specified date. The field validator will raise an error.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="Required Date:" labelPosition="top" required style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datebox" label="End Date:" labelPosition="top" required data-options="validType:'md[\'10/11/2015\']'" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
25
erp_web/js/easyui/demo/datetimebox/basic.html
Normal file
25
erp_web/js/easyui/demo/datetimebox/basic.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!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>
|
||||
<p>Click the calendar image on the right side.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datetimebox" label="Select DateTime:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-textbox" label="Description:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
erp_web/js/easyui/demo/datetimebox/fluid.html
Normal file
25
erp_web/js/easyui/demo/datetimebox/fluid.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid 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>Fluid DateTimeBox</h2>
|
||||
<p>This example shows how to set the width of DateTimeBox to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datetimebox" label="width: 100%" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datetimebox" label="width: 80%" labelPosition="top" style="width:80%;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
22
erp_web/js/easyui/demo/datetimebox/initvalue.html
Normal file
22
erp_web/js/easyui/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>
|
||||
<p>The value is initialized when DateTimeBox has been created.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datetimebox" label="Select DateTime:" labelPosition="top" value="10/11/2015 2:3:56" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
erp_web/js/easyui/demo/datetimebox/showseconds.html
Normal file
25
erp_web/js/easyui/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>
|
||||
<p>The user can decide to display seconds part or not.</p>
|
||||
<div style="margin:20px 0;">
|
||||
<span>Show Seconds: </span>
|
||||
<input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})">
|
||||
</div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input id="dt" class="easyui-datetimebox" label="Select DateTime:" labelPosition="top" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
erp_web/js/easyui/demo/datetimespinner/basic.html
Normal file
25
erp_web/js/easyui/demo/datetimespinner/basic.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic DateTimeSpinner - 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 DateTimeSpinner</h2>
|
||||
<p>Click spin button to adjust date and time.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datetimespinner" label="Start Time:" labelPosition="top" value="6/24/2015 17:23" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datetimespinner" label="End Time:" labelPosition="top" value="6/25/2015 20:23" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
33
erp_web/js/easyui/demo/datetimespinner/clearicon.html
Normal file
33
erp_web/js/easyui/demo/datetimespinner/clearicon.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DateTimeSpinner with Clear Icon - 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>DateTimeSpinner with Clear Icon</h2>
|
||||
<p>A clear icon can be attached to the datetimespinner. Click it to clear the entered value.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datetimespinner" value="6/24/2015 17:23:40" style="width:100%;" data-options="
|
||||
showSeconds: true,
|
||||
prompt: 'Input date time here!',
|
||||
icons:[{
|
||||
iconCls:'icon-clear',
|
||||
handler: function(e){
|
||||
$(e.data.target).datetimespinner('clear');
|
||||
}
|
||||
}],
|
||||
label: 'Start Time:',
|
||||
labelPosition: 'top'
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
erp_web/js/easyui/demo/datetimespinner/fluid.html
Normal file
25
erp_web/js/easyui/demo/datetimespinner/fluid.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid DateTimeSpinner - 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>Fluid DateTimeSpinner</h2>
|
||||
<p>The width of datetimespinner is set in percentages.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datetimespinner" label="width: 100%" labelPosition="top" value="6/24/2015 17:23" style="width:100%;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px">
|
||||
<input class="easyui-datetimespinner" label="width: 80%" labelPosition="top" value="6/25/2015 20:23" style="width:80%;">
|
||||
</div>
|
||||
</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