EasyUI Forum
March 04, 2024, 02:11:26 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: 1 2 [3] 4 5 ... 151
31  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.
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)
})
32  General Category / EasyUI for jQuery / Re: Tree Format on: June 20, 2023, 08:18:17 PM
Please look at this example.
Code:
<!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>
33  General Category / EasyUI for jQuery / Re: Desktop - Context Menu & Icons on: June 15, 2023, 07:52:44 PM
The context menu is available now. Please download the latest version from https://www.jeasyui.com/extension/desktop.php.
Code:
$('body').desktop({
    ...
    onShortcutContextMenu: function(e,app){
        e.preventDefault();
        $('#menu1').menu('show', {left:e.pageX,top:e.pageY});
    }

})
34  General Category / EasyUI for jQuery / Re: SideMenu Selected Color on: May 29, 2023, 12:10:41 AM
Please override the following style.
Code:
<style>
.sidemenu .tree-node-selected{
    background: #2c3b41;
    color: #fff;
}
</style>
35  General Category / General Discussion / Re: Unable to send email to sales@jeasyui.com on: May 29, 2023, 12:06:08 AM
Please send to info@jeasyui.com instead.
36  General Category / EasyUI for jQuery / Re: Double-click or Click on Tree on: May 15, 2023, 07:15:35 PM
Listen to the 'onDblClick' event on a tree, the code looks like this.
Code:
<ul class="easyui-tree" data-options="onDblClick:function(node){console.log(node)}">
...
</ul>
37  General Category / EasyUI for jQuery / Re: EasyUI Datagrid Export on: May 05, 2023, 06:54:25 PM
Please include this line instead.
Code:
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js?v=1.0.6"></script>
38  General Category / EasyUI for jQuery / Re: EasyUI Datagrid Export on: May 05, 2023, 01:40:20 AM
This example works fine.
Code:
<!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>

39  General Category / EasyUI for jQuery / Re: EasyUI Datagrid Export on: May 04, 2023, 06:09:56 PM
Please try to download the latest 'datagrid-filter.js' file from https://www.jeasyui.com/extension/datagrid_filter.php
40  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.
Code:
<!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>
41  General Category / EasyUI for jQuery / Re: SUBGRID ROWEDITING - onClickCell not working on: May 01, 2023, 06:25:14 PM
Please double click on the subgrid to begin editing a row. For more information about the editable datagrid, please look at https://www.jeasyui.com/extension/edatagrid.php
42  General Category / EasyUI for jQuery / Re: SUBGRID ROWEDITING - onClickCell not working on: April 28, 2023, 01:18:28 AM
Please refer to this example.
Code:
<!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>
43  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.
Code:
<!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>
44  General Category / EasyUI for jQuery / Re: Radiogroup default checked on: April 20, 2023, 06:52:52 PM
Please set the 'value' property to set the default item.
Code:
<div class="easyui-radiogroup" data-options="name:'radio2',data:groupData,value:'3',dir:'v'"></div>
45  General Category / EasyUI for jQuery / Re: Input box size in easyui-textbox on: April 19, 2023, 11:28:51 PM
This is the live example.
Code:
<!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>
</head>

<body>
<div>
<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px'"
label="Tipo[S/A]:<i>opcional</i>" value="SS" autoSize="true" style="min-width:300px;">
</div>
<div>
<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px',validType:'length[0,20]'"
label="Descrição resumida:<i>opcional</i>" value="Descrição resumida" autoSize="true"
style="min-width:300px;">
</div>
</body>

</html>
Pages: 1 2 [3] 4 5 ... 151
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!