EasyUI Forum
October 15, 2025, 04:21:39 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 ... 154
1  General Category / EasyUI for jQuery / Re: timespinner on blur on: October 11, 2025, 05:04:55 AM
Please override the 'blur' event handler.
Code:
$('#ROL_DUR').timespinner({
	showSeconds: false
	, value: ''
	, inputEvents: $.extend({}, $.fn.timespinner.defaults.inputEvents, {
		blur: (e) => {
			$.fn.timespinner.defaults.inputEvents.blur.call(this,e);
			console.log(">>> blur handler wurde getriggert");
		}
	})
});
2  General Category / EasyUI for jQuery / Re: Simple question about datagrid & toolbars on: October 09, 2025, 02:15:15 AM
Please set the 'text-align:right' css style for the toolbar.
Code:
<div id="tb" style="text-align: right;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>
3  General Category / EasyUI for jQuery / Re: Mobile menu Iphone on: August 14, 2025, 06:38:52 PM
Please set the 'showEvent' property value to 'click'. This means that the menu won't show until the 'click' event is triggered.
Code:
<a href="javascript:void(0)" class="easyui-menubutton"
	data-options="iconCls:'icon-more',menu:'#mm1',menuAlign:'right',hasDownArrow:false,showEvent:'click'">
</a>
4  General Category / General Discussion / Re: Downloadable documentation (ex. as .chm or .pdf) ? on: August 12, 2025, 12:00:52 AM
This documentation is available now. Please download it from that link.
5  General Category / EasyUI for jQuery / Re: Mobile menu Iphone on: August 11, 2025, 11:13:28 PM
This is the code that shows the panel header with the menu on the right.

Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Basic Menu - jQuery EasyUI Mobile Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/material-blue/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/mobile.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/jquery.easyui.mobile.js"></script>
</head>

<body>
	<div class="easyui-navpanel">
		<header>
			<div class="m-toolbar">
				<div class="m-title">TEST</div>
				<div class="m-right">
					<a href="javascript:void(0)" class="easyui-menubutton"
						data-options="iconCls:'icon-more',menu:'#mm1',menuAlign:'right',hasDownArrow:false"></a>
				</div>
			</div>
		</header>
	</div>
	<div id="mm1" class="easyui-menu" style="width:200px;">
		<div data-options="iconCls:'icon-photo_portrait_16'" onclick="test()">Test</div>
	</div>
</body>

</html>
6  General Category / EasyUI for jQuery / Re: datepicker datebox disable date on: August 11, 2025, 11:05:46 PM
This code shows how to disable some date fields(only Monday can be selected).
Code:
$('#dd').datebox().datebox('calendar').calendar({
	validator: function (date) {
		if (date.getDay() == 1) { return true; }
		else { return false; }
	}
})
7  General Category / EasyUI for jQuery / Re: Numberspinner bug? on: June 24, 2025, 01:56:47 AM
Please set the 'spinAlign' property value to 'horizontal' or 'vertical'.
8  General Category / EasyUI for jQuery / Re: Datagrid Change singleselect and keep title on: June 11, 2025, 05:01:00 AM
Call the code below will recreate the datagrid again.
Code:
$('#dgList').datagrid({
   singleSelect:true            
});
You can set the 'title' property while creating the datagrid.
Code:
$('#dgList').datagrid({
   title: '...',
   singleSelect:true            
});

If you only want to change the selecting mode, please set the 'singleSelect' property instead of recreating the whole datagrid again.
Code:
$('#dgList').datagrid('options').singleSelect=true;
9  General Category / EasyUI for jQuery / Re: Datagrid scrollview and cardview together on: June 09, 2025, 03:19:00 AM
Please override the 'renderRow' method of the scrollview.

Code:
$.extend(scrollview, {
	renderRow: function (target, fields, frozen, rowIndex, rowData) {
		var opts = $.data(target, 'datagrid').options;
		var cc = [];
		if (frozen && opts.rownumbers) {
			var rownumber = rowIndex + 1;
			cc.push('<td class="datagrid-td-rownumber" style="height:50px"><div class="datagrid-cell-rownumber">' + rownumber + '</div></td>');
		}
		if (!frozen) {
			cc.push('<td colspan=' + fields.length + ' style="padding:1px 10px 1px 10px;border:0;height:50px;width:360px !important;">');
			cc.push('<div class="dash">');
			cc.push('<table style="width:100%;border:none;border-collapse:collapse;">');
			cc.push('<tr>');
			cc.push('<td style="border:0">' + rowData['name'] + '</td>')
			cc.push('</tr>');
			cc.push('</table>');
			cc.push('</div>');
		}
		cc.push('</td>');
		return cc.join('');
	}
})
10  General Category / EasyUI for jQuery / Re: Change background-color of entire column on: May 24, 2025, 06:21:35 AM
Define the 'styler' function to set the CSS styles for the column.

Code:
    <script>
        function mystyler(){
            return 'background:#ddd'
        }
    </script>
	<table id="tg" title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
			data-options="
				data:data,
				rownumbers: true,
				idField: 'id',
				treeField: 'name'
			">
		<thead>
			<tr>
				<th data-options="field:'name',styler:mystyler" width="220">Name</th>
				<th data-options="field:'size'" width="100" align="right">Size</th>
				<th data-options="field:'date'" width="150">Modified Date</th>
			</tr>
		</thead>
	</table>
11  General Category / EasyUI for jQuery / Re: How to hide the treegrid icon on: May 24, 2025, 06:16:45 AM
Add the CSS style to hide the expanding/collapsing icon on the treegrid.
Code:
<style>
    .mytg .tree-hit{
        display: none;
    }
</style>

And then listen to the 'onClickRow' event, call the 'toggle' method to expand or collapse the node.
Code:
$('#tg').treegrid({
    cls: 'mytg',
    onClickRow: function(row){
        $(this).treegrid('toggle',row.id)
    }
})
12  General Category / EasyUI for jQuery / Re: Datagrid Cell Tooltip individual text on: April 29, 2025, 12:22:40 AM
Please call this code to convert the tooltip.
Code:
function formatTooltip(value, row, index) {
	var fieldName = this.field
	var fieldNumber = fieldName.split('_')
	return '<div class="dg-tp" title="' + row['tooltipText_' + fieldNumber[1]] + '">' + value + '</div>'
}
$(function () {
	$('#dg').datagrid({
		// ...,
		onLoadSuccess: function (data) {
			$(this).datagrid('getPanel').find('.dg-tp').tooltip()
		}
	})
})
13  General Category / EasyUI for jQuery / Re: Timeline text alignment on: April 09, 2025, 08:50:08 PM
There are some solutions to display the alternate items.

1. Use the 'labelFormatter' and 'formatter' functions.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>TimeLine - 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 class="easyui-panel" style="padding:10px;">
		<div id="tt"></div>
	</div>
	<script>
		var data = [
			{ content: 'Goal', contentPosition: 'before', time: '10:30', playerName: 'Player #1', info: '' },
			{ content: 'Penalty', contentPosition: 'after', time: '12:00', playerName: 'Player #2', info: 'Yellow Card' },
			{ content: 'Goal', contentPosition: 'before', time: '14:30', playerName: 'Player #3', info: '' },
			{ content: 'Goal', contentPosition: 'after', time: '16:30', playerName: 'Player #4', info: '' }
		]
		$(function () {
			const formatContent = (row) => {
				return `
					<div>
						<div style="font-size:14px;font-weight:bold">${row.time} - ${row.content}</div>
						<div style="font-size:12px;color:#666">${row.playerName}</div>
						<div style="font-size:12px;color:#666">${row.info}</div>
					</div>
				`
			}
			$('#tt').timeline({
				data: data,
				formatter: (row) => {
					if (row.contentPosition == 'after') {
						return formatContent(row)
					} else {
						return '<div style="height:45px"></div>';
					}
				},
				labelFormatter: (row) => {
					if (row.contentPosition == 'before') {
						return formatContent(row)
					} else {
						return '';
					}
				}
			})
		})
	</script>
</body>

</html>

2. Set the 'align' property value to 'alternateReverse'.
Code:
const formatContent = (row) => {
	return `
		<div>
			<div style="font-size:14px;font-weight:bold">${row.time} - ${row.content}</div>
			<div style="font-size:12px;color:#666">${row.playerName}</div>
			<div style="font-size:12px;color:#666">${row.info}</div>
		</div>
	`
}
$('#tt').timeline({
	data: data,
	align: 'alternateReverse',
	formatter: formatContent
})

3. Custom the 'itemPosition' function to set the item position to 'left' or 'right'.
Code:
const formatContent = (row) => {
	return `
		<div>
			<div style="font-size:14px;font-weight:bold">${row.time} - ${row.content}</div>
			<div style="font-size:12px;color:#666">${row.playerName}</div>
			<div style="font-size:12px;color:#666">${row.info}</div>
		</div>
	`
}
$('#tt').timeline({
	data: data,
	align: 'alternate',
	formatter: formatContent,
	itemPosition: (row,index) => {
		return row.contentPosition=='after' ? 'left' : 'right';
	}
})
14  General Category / EasyUI for jQuery / Re: Timeline on: March 25, 2025, 12:38:25 AM
The 'align' property is available now. Please look at this example.

https://www.jeasyui.com/demo/main/index.php?plugin=TimeLine&theme=material-teal&dir=ltr&pitem=Alternate&sort=asc
15  General Category / EasyUI for jQuery / Re: Howto overryde ajax method from POST to PUT in form on: March 22, 2025, 06:42:05 PM
Call this code before submitting a form to override any ajax parameters.
Code:
$.ajaxSetup({
  beforeSend: function(xhr, settings) {
    settings.type = 'PUT';
    return true;
  }
});
Pages: [1] 2 3 ... 154
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!