Show Posts
|
Pages: 1 2 [3] 4 5 ... 151
|
32
|
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>
|
|
|
33
|
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) })
|
|
|
34
|
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>
|
|
|
40
|
General Category / EasyUI for jQuery / Re: EasyUI Datagrid Export
|
on: May 05, 2023, 01:40:20 AM
|
This example works fine. <!DOCTYPE html> <html> <head> <title>Test data</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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/locale/easyui-lang-da.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script> <script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
</head>
<body>
<table id="dgList" title="LOG LIST" class="easyui-datagrid" style="padding:10px 10px 10px 10px" data-options=" singleSelect:false, idField:'ID', striped:true, toolbar:'#toolbarDG'"> <thead> <tr> <th data-options="field:'powershellFile',width:250">powershellFile</th> <th data-options="field:'scheduleFile',width:250">schedulerFile</th> <th data-options="field:'startTimestamp',width:175">Log start</th> <th data-options="field:'endTimestamp',width:175">Log end</th> </tr> </thead> </table> <div id="toolbarDG"> <a id="exportExcelButton2" href="javascript:void(0)" class="easyui-linkbutton" onclick="exportExcel()">Excel export</a> </div>
<script type="text/javascript">
$(document).ready(function(){
}) var data = [ { ID: "63", endTimestamp: "02-05-2023 23:45:02", logText: "", powershellFile: "trigger_10.ps1", scheduleFile: "scheduled_autosend.asp", startTimestamp: "02-05-2023 00:00:02" }, { ID: "61", endTimestamp: "01-05-2023 06:25:03", logText: "", powershellFile: "trigger_06.ps1", scheduleFile: "scheduled_cleanup.asp", startTimestamp: "01-05-2023 06:25:00" }, { ID: "62", endTimestamp: "01-05-2023 06:37:13", logText: "", powershellFile: "trigger_03.ps1", scheduleFile: "scheduled_aut_settlement.asp", startTimestamp: "01-05-2023 06:20:00" } ]; $(function(){ var dg = $('#dgList').datagrid({ data: data, pageList: [10,20,30,40,50,100], rownumbers:false, remoteFilter: false, fitColumns: false }); dg.datagrid('enableFilter'); });
function exportExcel(){ var items = $('#dgList').datagrid('getSelections'); const wb = XLSX.utils.book_new(); const sheet = XLSX.utils.json_to_sheet(items); XLSX.utils.book_append_sheet(wb, sheet, 'Sheet1'); XLSX.writeFile(wb, 'scheduler_log.xlsx'); } </script>
</body> </html>
|
|
|
42
|
General Category / EasyUI for jQuery / Re: EasyUI Datagrid Export
|
on: May 03, 2023, 08:07:26 PM
|
Please look at this example. It 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-export.js"></script> <script> var data = [ { ID: "61", endTimestamp: "01-05-2023 06:25:03", logText: "", powershellFile: "trigger_06.ps1", scheduleFile: "scheduled_cleanup.asp", startTimestamp: "01-05-2023 06:25:00" }, { ID: "62", endTimestamp: "01-05-2023 06:25:03", logText: "", powershellFile: "trigger_06.ps1", scheduleFile: "scheduled_cleanup.asp", startTimestamp: "01-05-2023 06:25:00" }, { ID: "63", endTimestamp: "01-05-2023 06:25:03", logText: "", powershellFile: "trigger_06.ps1", scheduleFile: "scheduled_cleanup.asp", startTimestamp: "01-05-2023 06:25:00" }, ]; function getselections() { var items = $('#dg').datagrid('getSelections'); var s = JSON.stringify(items); $.messager.alert({ title: 'GetSelections', msg: s, width: 600 }); } </script> </head>
<body> <button class="easyui-linkbutton" onclick="getselections()">GetSelections</button> <table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px" data-options="fitColumns:true,data:data"> <thead> <tr> <th data-options="field:'powershellFile',width:200">PowershellFile</th> <th data-options="field:'scheduleFile',width:200">ScheduleFile</th> <th data-options="field:'startTimestamp',width:200">StartTimestamp</th> <th data-options="field:'endTimestamp',width:200">EndTimestamp</th> </tr> </thead> </table> </body>
</html>
|
|
|
44
|
General Category / EasyUI for jQuery / Re: SUBGRID ROWEDITING - onClickCell not working
|
on: April 28, 2023, 01:18:28 AM
|
Please refer to this example. <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.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-detailview.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script> <script> var data = [ { "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 16.50, "attr1": "Large", "itemid": "EST-1" }, { "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-2" }, { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Venomless", "itemid": "EST-3" }, { "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Green Adult", "itemid": "EST-5" }, { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 58.50, "attr1": "Tailless", "itemid": "EST-6" }, { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "With tail", "itemid": "EST-7" }, { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Female", "itemid": "EST-8" }, { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Male", "itemid": "EST-9" }, { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Rattleless", "itemid": "EST-4" }, { "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 193.50, "attr1": "Adult Male", "itemid": "EST-10" } ]; var detailData = [{ "orderid": "1004", "linenum": "2", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1013", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1014", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }]
$(function () { $('#dg').datagrid({ title: 'DataGrid - DetailView', width: 800, height: 350, singleSelect: true, nowrap: false, fitColumns: true, data: data, columns: [[ { field: 'itemid', title: 'Item ID', width: 80 }, { field: 'productid', title: 'Product ID', width: 100, sortable: true }, { field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true }, { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true }, { field: 'attr1', title: 'Attribute', width: 150, sortable: true }, { field: 'status', title: 'Status', width: 60, align: 'center' } ]], view: detailview, detailFormatter: function (index, row) { return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>'; }, onExpandRow: function (index, row) { var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv'); ddv.edatagrid({ singleSelect:true, rownumbers:true, columns: [[ { field: 'orderid', title: 'Order ID', width: 200,editor:'textbox' }, { field: 'quantity', title: 'Quantity', width: 100, align: 'right',editor:'numberbox' }, { field: 'unitprice', title: 'Unit Price', width: 100, align: 'right',editor:'numberbox' } ]], data:detailData }) $('#dg').datagrid('fixDetailRowHeight', index); } }); }); </script> </head>
<body>
<table id="dg"></table> </body>
</html>
|
|
|
45
|
General Category / EasyUI for jQuery / Re: ROWEDITING: how to copy date from one column in editmode to next column?
|
on: April 25, 2023, 07:15:43 PM
|
Please refer to this example. <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>Row Editing in DataGrid - 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 = [ { subpart: 'subprt1', termin: '03/04/2023' }, { subpart: 'subprt2', termin: '03/05/2023' }, { subpart: 'subprt3', termin: '03/06/2023' }, { subpart: 'subprt4', termin: '03/07/2023' } ] $(function () { var editIndex = undefined; var dg = $('#dg').datagrid({ columns: [[ { field: 'subpart', title: 'Subpart', width: 100, editor: 'textbox' }, { field: 'termin', title: 'Termin Kunde', width: 200, editor: { type: 'datebox', options: { icons: [{ iconCls: 'icon-ok', handler: function (e) { var val = $(e.data.target).datebox('getValue'); var ed = dg.datagrid('getEditor', { index: editIndex, field: 'planung' }); $(ed.target).datebox('setValue', val); } }] } } }, { field: 'planung', title: 'Planung OPS', width: 200, editor: 'label', editor: 'datebox' } ]], data: data, singleSelect: true, onClickCell: function (index, field) { dg.datagrid('endEdit', editIndex); if (editIndex != index) { 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; } } }) }) </script> </head>
<body> <table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"> </table>
</body>
</html>
|
|
|
|