Skip to content
GitLab
Commit a67629d0 authored by 季圣华's avatar 季圣华
Browse files

No commit message 

No commit message
parent 6c2a3721
Hide whitespace changes
Inline Side-by-side
WebRoot/js/easyui-1.3.5/demo/datagrid/columngroup.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Column Group - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Column Group</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The header cells can be merged. Useful to group columns under a category.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Column Group" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80" rowspan="2">Item ID</th>
<th data-options="field:'productid',width:100" rowspan="2">Product</th>
<th colspan="4">Item Details</th>
</tr>
<tr>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/complextoolbar.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>DataGrid Complex Toolbar</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The DataGrid toolbar can be defined from a &lt;div/&gt; markup, so you can define the layout of toolbar easily.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="DataGrid Complex Toolbar" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:'#tb'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<div>
Date From: <input class="easyui-datebox" style="width:80px">
To: <input class="easyui-datebox" style="width:80px">
Language:
<select class="easyui-combobox" panelHeight="auto" style="width:100px">
<option value="java">Java</option>
<option value="c">C</option>
<option value="basic">Basic</option>
<option value="perl">Perl</option>
<option value="python">Python</option>
</select>
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/contextmenu.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Context Menu on DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Context Menu on DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Right click on the header of DataGrid to display context menu.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg"></table>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
url: 'datagrid_data1.json',
method: 'get',
title: 'Context Menu on DataGrid',
iconCls: 'icon-save',
width: 700,
height: 250,
fitColumns: true,
singleSelect: true,
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:250},
{field:'status',title:'Status',width:60,align:'center'}
]],
onHeaderContextMenu: function(e, field){
e.preventDefault();
if (!cmenu){
createColumnMenu();
}
cmenu.menu('show', {
left:e.pageX,
top:e.pageY
});
}
});
});
var cmenu;
function createColumnMenu(){
cmenu = $('<div/>').appendTo('body');
cmenu.menu({
onClick: function(item){
if (item.iconCls == 'icon-ok'){
$('#dg').datagrid('hideColumn', item.name);
cmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-empty'
});
} else {
$('#dg').datagrid('showColumn', item.name);
cmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-ok'
});
}
}
});
var fields = $('#dg').datagrid('getColumnFields');
for(var i=0; i<fields.length; i++){
var field = fields[i];
var col = $('#dg').datagrid('getColumnOption', field);
cmenu.menu('appendItem', {
text: col.title,
name: field,
iconCls: 'icon-ok'
});
}
}
</script>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/custompager.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom DataGrid Pager - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom DataGrid Pager</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>You can append some buttons to the standard datagrid pager bar.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" title="Custom DataGrid Pager" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,pagination:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function(){
var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
buttons:[{
iconCls:'icon-search',
handler:function(){
alert('search');
}
},{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-edit',
handler:function(){
alert('edit');
}
}]
});
})
</script>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/datagrid_data1.json 0 → 100644
View file @ a67629d0
{"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"}
]}
WebRoot/js/easyui-1.3.5/demo/datagrid/datagrid_data2.json 0 → 100644
View file @ a67629d0
{"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:"}
]}
WebRoot/js/easyui-1.3.5/demo/datagrid/footer.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Footer Rows in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Footer Rows in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The summary informations can be displayed in footer rows.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Footer Rows in DataGrid" style="width:700px;height:220px"
data-options="
url: 'datagrid_data2.json',
method: 'get',
fitColumns: true,
singleSelect: true,
rownumbers: true,
showFooter: true
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:120">Product ID</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/formatcolumns.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Format DataGrid Columns - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Format DataGrid Columns</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The list price value will show red color when less than 30.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,iconCls:'icon-ok',url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right',formatter:formatPrice">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script>
function formatPrice(val,row){
if (val < 30){
return '<span style="color:red;">('+val+')</span>';
} else {
return val;
}
}
</script>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/frozencolumns.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frozen Columns in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Frozen Columns in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>You can freeze some columns that can't scroll out of view.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'itemid',width:100">Item ID</th>
<th data-options="field:'productid',width:120">Product</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'listprice',width:90,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/frozenrows.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frozen Rows in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Frozen Rows in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to freeze some rows that will always be displayed at the top when the datagrid is scrolled down.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Frozen Rows in DataGrid" style="width:700px;height:250px"
data-options="
singleSelect: true,
collapsible: true,
rownumbers: true,
url: 'datagrid_data1.json',
method: 'get',
onLoadSuccess: function(){
$(this).datagrid('freezeRow',0).datagrid('freezeRow',1);
}
">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'itemid',width:100">Item ID</th>
<th data-options="field:'productid',width:120">Product</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'listprice',width:90,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:230">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/mergecells.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Merge Cells for DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Merge Cells for DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Cells in DataGrid body can be merged.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Merge Cells for DataGrid" style="width:700px;height:250px"
data-options="
rownumbers: true,
singleSelect: true,
iconCls: 'icon-save',
url: 'datagrid_data1.json',
method: 'get',
onLoadSuccess: onLoadSuccess
">
<thead>
<tr>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function onLoadSuccess(data){
var merges = [{
index: 2,
rowspan: 2
},{
index: 5,
rowspan: 2
},{
index: 7,
rowspan: 2
}];
for(var i=0; i<merges.length; i++){
$(this).datagrid('mergeCells',{
index: merges[i].index,
field: 'productid',
rowspan: merges[i].rowspan
});
}
}
</script>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/multisorting.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Sorting - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Multiple Sorting</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Set 'multiSort' property to true to enable multiple column sorting.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Multiple Sorting" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,
url:'datagrid_data1.json',
method:'get',
remoteSort:false,
multiSort:true
">
<thead>
<tr>
<th data-options="field:'itemid',width:80,sortable:true">Item ID</th>
<th data-options="field:'productid',width:100,sortable:true">Product</th>
<th data-options="field:'listprice',width:80,align:'right',sortable:true">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',sortable:true">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/products.json 0 → 100644
View file @ a67629d0
[
{"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"}
]
WebRoot/js/easyui-1.3.5/demo/datagrid/rowborder.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Row Border in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Row Border in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to change the row border style of datagrid.</div>
</div>
<div style="margin:10px 0;">
<span>Border:</span>
<select onchange="changeBorder(this.value)">
<option value="lines-both">Both</option>
<option value="lines-no">No Border</option>
<option value="lines-right">Right Border</option>
<option value="lines-bottom">Bottom Border</option>
</select>
<span>Striped:</span>
<input type="checkbox" onclick="$('#dg').datagrid({striped:$(this).is(':checked')})">
</div>
<table id="dg" class="easyui-datagrid" title="Row Border in DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,fitColumns:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function changeBorder(cls){
$('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls);
}
</script>
<style type="text/css">
.lines-both .datagrid-body td{
}
.lines-no .datagrid-body td{
border-right:1px dotted transparent;
border-bottom:1px dotted transparent;
}
.lines-right .datagrid-body td{
border-bottom:1px dotted transparent;
}
.lines-bottom .datagrid-body td{
border-right:1px dotted transparent;
}
</style>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/rowediting.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Row Editing in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the row to start editing.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: 'datagrid_data1.json',
method: 'get',
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,
formatter:function(value,row){
return row.productname;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'productname',
url:'products.json',
required:true
}
}">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div>
<script type="text/javascript">
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});
var productname = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function append(){
if (endEditing()){
$('#dg').datagrid('appendRow',{status:'P'});
editIndex = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
</script>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/rowstyle.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid Row Style - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>DataGrid Row Style</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The rows which listprice value is less than 30 are highlighted.</div>
</div>
<div style="margin:10px 0;"></div>
<table>
<!-- <table class="easyui-datagrid" title="DataGrid Row Style" style="width:700px;height:250px" data-options="singleSelect: true,iconCls: 'icon-save',url: 'datagrid_data1.json',method: 'get',rowStyler: function(index,row){if (row.listprice < 30){return 'background-color:#6293BB;color:#fff;font-weight:bold;';}}">-->
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/selection.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid Selection - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>DataGrid Selection</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Choose a selection mode and select one or more rows.</div>
</div>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a>
<a href="#" class="easyui-linkbutton" onclick="getSelections()">GetSelections</a>
</div>
<table id="dg" class="easyui-datagrid" title="DataGrid Selection" style="width:700px;height:250px"
data-options="singleSelect:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<div style="margin:10px 0;">
<span>Selection Mode: </span>
<select onchange="$('#dg').datagrid({singleSelect:(this.value==0)})">
<option value="0">Single Row</option>
<option value="1">Multiple Rows</option>
</select>
</div>
<script type="text/javascript">
function getSelected(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.alert('Info', row.itemid+":"+row.productid+":"+row.attr1);
}
}
function getSelections(){
var ss = [];
var rows = $('#dg').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
var row = rows[i];
ss.push('<span>'+row.itemid+":"+row.productid+":"+row.attr1+'</span>');
}
$.messager.alert('Info', ss.join('<br/>'));
}
</script>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/simpletoolbar.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid with Toolbar - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>DataGrid with Toolbar</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Put buttons on top toolbar of DataGrid.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="DataGrid with Toolbar" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:toolbar">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
var toolbar = [{
text:'Add',
iconCls:'icon-add',
handler:function(){alert('add')}
},{
text:'Cut',
iconCls:'icon-cut',
handler:function(){alert('cut')}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){alert('save')}
}];
</script>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datagrid/transform.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform DataGrid from Table - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Transform DataGrid from Table</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Transform DataGrid from an existing, unformatted html table.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" style="width:500px;height:auto">
<thead>
<tr>
<th data-options="field:'itemid'">Item ID</th>
<th data-options="field:'productid'">Product</th>
<th data-options="field:'listprice',align:'right'">List Price</th>
<th data-options="field:'attr1'">Attribute</th>
</tr>
</thead>
<tbody>
<tr>
<td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
</tr>
<tr>
<td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
</tr>
<tr>
<td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
</tr>
<tr>
<td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
</tr>
<tr>
<td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
</tr>
</tbody>
</table>
</body>
</html>
\ No newline at end of file
WebRoot/js/easyui-1.3.5/demo/datebox/basic.html 0 → 100644
View file @ a67629d0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DateBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic DateBox</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the calendar image on the right side.</div>
</div>
<div style="margin:10px 0;"></div>
<input class="easyui-datebox"></input>
</body>
</html>
\ 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