EasyUI Forum
May 15, 2024, 03:24:57 PM *
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: Error on Drag and Drop Datagrid on: July 18, 2023, 11:32:04 PM
This code 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-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>
32  General Category / EasyUI for jQuery / Re: showEvent property to Searchbox Menu on: July 01, 2023, 01:12:31 AM
The 'showEvent' property is available now. Please update to the latest version.
33  General Category / EasyUI for jQuery / Re: DataList doesn't refresh after updateRow on: June 30, 2023, 07:26:21 PM
These codes do the same behaviour.
Code:
$('#dl').datalist('getRows')[idx] = row; // update the row value
$('#dl').datalist('refreshRow', idx);    // and then refresh it
Code:
$('#dl').datalist('updateRow', { index: idx, row: row});  // update and refresh it at the same time
34  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.
Code:
<!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>
35  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)
})
36  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>
37  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});
    }

})
38  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>
39  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.
40  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>
41  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>
42  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>
43  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
44  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>
45  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
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!