 Show Posts
|
|
Pages: 1 2 [3] 4 5 ... 152
|
|
36
|
General Category / EasyUI for jQuery / Re: Error on Drag and Drop Datagrid
|
on: July 18, 2023, 11:32:04 PM
|
This code works fine. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-dnd.js"></script>
<script>
var data = [
{ "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" }
]
$(function () {
$('#dl').datalist({
data: data,
onLoadSuccess: function () {
$(this).datagrid('enableDnd');
}
});
})
</script>
</head>
<body>
<div id="dl" title="DataList" style="width:400px;height:250px">
</div>
</body>
</html>
|
|
|
|
|
39
|
General Category / EasyUI for jQuery / Re: Change background colour of a table cell in a treegrid with onClickCell
|
on: June 30, 2023, 06:46:49 PM
|
Please define a 'styler' function for the columns to display the background color. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
var data = {
"total": 7, "rows": [
{ "id": 1, "name": "All Tasks", "begin": "3/4/2010", "end": "3/20/2010", "progress": 60, "iconCls": "icon-ok" },
{ "id": 2, "name": "Designing", "begin": "3/4/2010", "end": "3/10/2010", "progress": 100, "_parentId": 1, "state": "closed" },
{ "id": 21, "name": "Database", "persons": 2, "begin": "3/4/2010", "end": "3/6/2010", "progress": 100, "_parentId": 2 },
{ "id": 22, "name": "UML", "persons": 1, "begin": "3/7/2010", "end": "3/8/2010", "progress": 100, "_parentId": 2 },
{ "id": 23, "name": "Export Document", "persons": 1, "begin": "3/9/2010", "end": "3/10/2010", "progress": 100, "_parentId": 2 },
{ "id": 3, "name": "Coding", "persons": 2, "begin": "3/11/2010", "end": "3/18/2010", "progress": 80 },
{ "id": 4, "name": "Testing", "persons": 1, "begin": "3/19/2010", "end": "3/20/2010", "progress": 20 }
], "footer": [
{ "name": "Total Persons:", "persons": 7, "iconCls": "icon-sum" }
]
}
function styler(value,row){
const field = this.field;
return (row['style']||{})[field];
}
$(function(){
$('#tg').treegrid({
onClickCell: function(field,row,index){
row['style'] = row['style']||{}
row['style'][field] = 'background:red;color:#fff';
$(this).treegrid('refreshRow',row['id'])
}
})
})
</script>
</head>
<body>
<table id="tg" title="TreeGrid" style="width:700px;height:250px" data-options="
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
data: data,
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name',width:180,styler:styler">Task Name</th>
<th data-options="field:'persons',width:60,align:'right',styler:styler">Persons</th>
<th data-options="field:'begin',width:80,styler:styler">Begin Date</th>
<th data-options="field:'end',width:80,styler:styler">End Date</th>
</tr>
</thead>
</table>
</body>
</html>
|
|
|
|
|
40
|
General Category / EasyUI for jQuery / Re: NumberSpinner Long Press Increase/Decrease Values
|
on: June 26, 2023, 08:41:08 PM
|
Please refer to this code. var ns = $('#ns');
function doSpin(target, down) {
var opts = $.data(target, 'numberspinner').options;
var v = parseFloat($(target).numberbox('getValue') || opts.value) || 0;
if (down) {
v -= opts.increment;
} else {
v += opts.increment;
}
$(target).numberbox('setValue', v);
}
var opts = ns.numberspinner('options');
var icon = ns.numberspinner('getIcon', 0);
var spin = icon.find('.spinner-arrow');
spin.on('mousedown.spinner', function (e) {
var down = $(e.target).closest('.spinner-arrow').hasClass('spinner-button-bottom');
opts.longTimer1 = setInterval(function () {
doSpin(ns[0],down);
}, 100)
}).on('mouseup.spinner', function (e) {
clearInterval(opts.longTimer1)
}).on('mouseout.spinner', function (e) {
clearInterval(opts.longTimer1)
})
|
|
|
|
|
41
|
General Category / EasyUI for jQuery / Re: Tree Format
|
on: June 20, 2023, 08:18:17 PM
|
Please look at this example. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
var data = [{
"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"
}]
}]
$(function(){
$('#tt').tree({
data: data,
animate: true,
formatter: function(node){
return '<div>'+node.text+'</div><div>others</div>';
}
})
})
</script>
<style>
.mtree .tree-node{
min-height: 26px;
height: auto;
}
.mtree .tree-hit,.mtree .tree-icon{
vertical-align: top;
}
.mtree .tree-title{
height: auto;
}
</style>
</head>
<body>
<ul id="tt" class="mtree"></ul>
</body>
</html>
|
|
|
|
|
