Commit 9bad12b0 authored by 季圣华's avatar 季圣华
Browse files

升级代码结构,采用Maven来管理jar包(13)

parent 63ca1df4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Group ComboBox</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>This example shows how to display combobox items in groups.</div>
</div>
<input class="easyui-combobox" name="browser" style="width:280px;" data-options="
url: 'combobox_data2.json',
method: 'get',
valueField:'value',
textField:'text',
groupField:'group'
">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Select - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Load Dynamic ComboBox Data</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>Drop down the panel and select multiple items.</div>
</div>
<input class="easyui-combobox"
name="language"
data-options="
url:'combobox_data1.json',
method:'get',
valueField:'id',
textField:'text',
multiple:true,
panelHeight:'auto'
">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Navigate ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Navigate ComboBox</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>Navigate through combobox items width keyboard to select an item.</div>
</div>
<div style="margin:10px 0;">
<input type="checkbox" checked onchange="$('#cc').combobox({selectOnNavigation:$(this).is(':checked')})">
<span>SelectOnNavigation</span>
</div>
<select id="cc" class="easyui-combobox" name="state" style="width:200px;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Binding to Remote Data - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Binding to Remote Data</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>The ComboBox is bound to a remote data.</div>
</div>
<input class="easyui-combobox"
name="language"
data-options="
url:'combobox_data1.json',
method:'get',
valueField:'id',
textField:'text',
panelHeight:'auto'
">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Remote JSONP - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Remote JSONP</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to use JSONP to retrieve data from a remote site.</div>
</div>
<input class="easyui-combobox" style="width:250px" data-options="
loader: myloader,
mode: 'remote',
valueField: 'id',
textField: 'name'
">
<script>
var myloader = function(param,success,error){
var q = param.q || '';
if (q.length <= 1){return false}
$.ajax({
url: 'http://ws.geonames.org/searchJSON',
dataType: 'jsonp',
data: {
featureClass: "P",
style: "full",
maxRows: 20,
name_startsWith: q
},
success: function(data){
var items = $.map(data.geonames, function(item){
return {
id: item.geonameId,
name: item.name + (item.adminName1 ? ', ' + item.adminName1 : '') + ', ' + item.countryName
};
});
success(items);
},
error: function(){
error.apply(this, arguments);
}
});
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboGrid Actions - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>ComboGrid Actions</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the buttons below to perform actions.</div>
</div>
<div style="margin:10px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
</div>
<input id="cc" class="easyui-combogrid" style="width:250px" data-options="
panelWidth: 500,
idField: 'itemid',
textField: 'productname',
url: 'datagrid_data1.json',
method: 'get',
columns: [[
{field:'itemid',title:'Item ID',width:80},
{field:'productname',title:'Product',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:60,align:'center'}
]],
fitColumns: true
">
<script type="text/javascript">
function getValue(){
var val = $('#cc').combogrid('getValue');
alert(val);
}
function setValue(){
$('#cc').combogrid('setValue', 'EST-13');
}
function disable(){
$('#cc').combogrid('disable');
}
function enable(){
$('#cc').combogrid('enable');
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic ComboGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right arrow button to show the DataGrid.</div>
</div>
<div style="margin:10px 0"></div>
<select class="easyui-combogrid" style="width:250px" data-options="
panelWidth: 500,
idField: 'itemid',
textField: 'productname',
url: 'datagrid_data1.json',
method: 'get',
columns: [[
{field:'itemid',title:'Item ID',width:80},
{field:'productname',title:'Product',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:60,align:'center'}
]],
fitColumns: true
">
</select>
</body>
</html>
\ No newline at end of file
{"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"}
]}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Initialize Value for ComboGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Initialize Value for ComboGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Initialize value when ComboGrid is created.</div>
</div>
<div style="margin:10px 0"></div>
<input class="easyui-combogrid" style="width:250px" value="EST-12" data-options="
panelWidth: 500,
idField: 'itemid',
textField: 'productname',
url: 'datagrid_data1.json',
method: 'get',
columns: [[
{field:'itemid',title:'Item ID',width:80},
{field:'productname',title:'Product',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:60,align:'center'}
]],
fitColumns: true
">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple ComboGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Multiple ComboGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right arrow button to show the DataGrid and select items.</div>
</div>
<div style="margin:10px 0"></div>
<select class="easyui-combogrid" style="width:250px" data-options="
panelWidth: 500,
multiple: true,
idField: 'itemid',
textField: 'productname',
url: 'datagrid_data1.json',
method: 'get',
columns: [[
{field:'ck',checkbox:true},
{field:'itemid',title:'Item ID',width:80},
{field:'productname',title:'Product',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:60,align:'center'}
]],
fitColumns: true
">
</select>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Navigate ComboGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Navigate ComboGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Navigate through grid items with keyboard to select an item.</div>
</div>
<div style="margin:10px 0">
<input type="checkbox" checked onchange="$('#cc').combogrid({selectOnNavigation:$(this).is(':checked')})">
<span>SelectOnNavigation</span>
</div>
<select id="cc" class="easyui-combogrid" style="width:250px" data-options="
panelWidth: 500,
idField: 'itemid',
textField: 'productname',
url: 'datagrid_data1.json',
method: 'get',
columns: [[
{field:'itemid',title:'Item ID',width:80},
{field:'productname',title:'Product',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:60,align:'center'}
]],
fitColumns: true
">
</select>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboTree Actions - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>ComboTree Actions</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the buttons below to perform actions</div>
</div>
<div style="margin:10px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
</div>
<input id="cc" class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;">
<script type="text/javascript">
function getValue(){
var val = $('#cc').combotree('getValue');
alert(val);
}
function setValue(){
$('#cc').combotree('setValue', '122');
}
function disable(){
$('#cc').combotree('disable');
}
function enable(){
$('#cc').combotree('enable');
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboTree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic ComboTree</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right arrow button to show the tree panel.</div>
</div>
<div style="margin:10px 0"></div>
<input class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Initialize Value for ComboTree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Initialize Value for ComboTree</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Initialize Value when ComboTree is created.</div>
</div>
<div style="margin:10px 0"></div>
<input class="easyui-combotree" value="122" data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;">
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple ComboTree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Multiple ComboTree</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right arrow button to show the tree panel and select multiple nodes.</div>
</div>
<div style="margin:10px 0">
<span>Cascade Check: </span>
<input type="checkbox" checked onclick="$('#cc').combotree({cascadeCheck:$(this).is(':checked')})">
</div>
<select id="cc" class="easyui-combotree" data-options="url:'tree_data1.json',method:'get'" multiple style="width:200px;"></select>
</body>
</html>
\ No newline at end of file
[{
"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"
}]
}]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aligning Columns in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Aligning Columns in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Use align and halign properties to set the alignment of the columns and their header.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Aligning Columns in DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80,halign:'center'">Item ID</th>
<th data-options="field:'productid',width:100,halign:'center'">Product</th>
<th data-options="field:'listprice',width:80,align:'right',halign:'center'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',halign:'center'">Unit Cost</th>
<th data-options="field:'attr1',width:250,halign:'center'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',halign:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The DataGrid is created from markup, no JavaScript code needed.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Cell Editing in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click a cell to start editing.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
url: 'datagrid_data1.json',
method:'get',
onClickCell: onClickCell
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,editor:'text'">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$.extend($.fn.datagrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('editCell', {index:index,field:field});
editIndex = index;
}
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid Cell Style - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>DataGrid Cell Style</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The cells which listprice value is less than 30 are highlighted.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="DataGrid Cell Style" style="width:700px;height:250px"
data-options="
singleSelect: true,
iconCls: 'icon-save',
url: 'datagrid_data1.json',
method: 'get'
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right',styler:cellStyler">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function cellStyler(value,row,index){
if (value < 30){
return 'background-color:#ffee00;color:red;';
}
}
</script>
</body>
</html>
\ 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