Commit ab2872c1 authored by 季圣华's avatar 季圣华
Browse files

升级easyUI到1.9.4版本

parent 0527b980
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Frozen Columns in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>You can freeze some columns that can't scroll out of view.</div>
</div>
<div style="margin:10px 0;"></div>
<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">
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Frozen Rows in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to freeze some rows that will always be displayed at the top when the datagrid is scrolled down.</div>
</div>
<div style="margin:10px 0;"></div>
<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,
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Merge Cells for DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Cells in DataGrid body can be merged.</div>
</div>
<div style="margin:10px 0;"></div>
<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,
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Multiple Sorting</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Set 'multiSort' property to true to enable multiple column sorting.</div>
</div>
<div style="margin:10px 0;"></div>
<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,
......@@ -28,13 +25,19 @@
<tr>
<th data-options="field:'itemid',width:80,sortable:true">Item ID</th>
<th data-options="field:'productid',width:100,sortable:true">Product</th>
<th data-options="field:'listprice',width:80,align:'right',sortable:true">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',sortable:true">Unit Cost</th>
<th data-options="field:'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>
\ No newline at end of file
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Row Border in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to change the row border style of datagrid.</div>
</div>
<div style="margin:10px 0;">
<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>
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>Row Editing in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the row to start editing.</div>
</div>
<div style="margin:10px 0;"></div>
<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="
......@@ -24,7 +21,8 @@
toolbar: '#tb',
url: 'datagrid_data1.json',
method: 'get',
onClickRow: onClickRow
onClickCell: onClickCell,
onEndEdit: onEndEdit
">
<thead>
<tr>
......@@ -38,13 +36,14 @@
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:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th data-options="field:'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>
......@@ -53,7 +52,7 @@
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-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>
......@@ -63,9 +62,6 @@
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;
......@@ -73,16 +69,29 @@
return false;
}
}
function onClickRow(index){
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()){
......@@ -98,7 +107,7 @@
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
function acceptit(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
......
......@@ -11,13 +11,20 @@
</head>
<body>
<h2>DataGrid Row Style</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The rows which listprice value is less than 30 are highlighted.</div>
</div>
<div style="margin:10px 0;"></div>
<table>
<!-- <table class="easyui-datagrid" title="DataGrid Row Style" style="width:700px;height:250px" data-options="singleSelect: true,iconCls: 'icon-save',url: 'datagrid_data1.json',method: 'get',rowStyler: function(index,row){if (row.listprice < 30){return 'background-color:#6293BB;color:#fff;font-weight:bold;';}}">-->
<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>
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>DataGrid Selection</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Choose a selection mode and select one or more rows.</div>
</div>
<div style="margin:10px 0;">
<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>
......
......@@ -11,11 +11,8 @@
</head>
<body>
<h2>DataGrid with Toolbar</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Put buttons on top toolbar of DataGrid.</div>
</div>
<div style="margin:10px 0;"></div>
<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>
......
......@@ -11,12 +11,11 @@
</head>
<body>
<h2>Transform DataGrid from Table</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Transform DataGrid from an existing, unformatted html table.</div>
<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>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" style="width:500px;height:auto">
<table id="dg" style="width:700px;height:auto;border:1px solid #ccc;">
<thead>
<tr>
<th data-options="field:'itemid'">Item ID</th>
......
<!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 &lt;ul&gt; 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>
\ No newline at end of file
<!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>
\ No newline at end of file
[
{"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"}
]
\ No newline at end of file
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>Basic DateTimeBox - jQuery EasyUI Demo</title>
<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">
......@@ -10,12 +10,13 @@
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic DateTimeBox</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the calendar image on the right side.</div>
<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>
<div style="margin:10px 0;"></div>
<input class="easyui-datetimebox" required style="width:150px">
</body>
</html>
\ No newline at end of file
<!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>
\ No newline at end of file
......@@ -11,13 +11,16 @@
</head>
<body>
<h2>DateBox Buttons</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This example shows how to customize the datebox buttons underneath the calendar.</div>
<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>
<div style="margin:10px 0;"></div>
<input class="easyui-datebox"></input>
<input class="easyui-datebox" data-options="buttons:buttons"></input>
<script>
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
......
<!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>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment