EasyUI Forum
October 16, 2025, 05:25:24 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > Recent Posts
Pages: 1 2 3 [4] 5 6 ... 10
 31 
 on: April 29, 2025, 12:22:40 AM 
Started by jega - Last post by jarry
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()
		}
	})
})

 32 
 on: April 25, 2025, 02:21:49 PM 
Started by jega - Last post by jega
Hi.

Filling a datagrid with this json (not formatted here): number_7 and _8 is the column field name

number_7:"11111111"
number_7:"22222222"
tooltipText_7:"Tooltip for column _7"
tooltipText_8:"Tooltip for cell on column _8"


Using formatTooltip

   function formatTooltip(value,row,index){
      var fieldName = this.field
      var fieldNumber = fieldName.split('_')
      return '<div title="'+row['tooltipText_'+fieldNumber[1]]+'">'+value+'</div>'
   }

Then it shows tooltipText_7 and _8 on the 2 cells on mouse over, as expected

But how can i use the easyui-tooltip instead of the div title attr

Any help ??

 33 
 on: April 09, 2025, 08:50:08 PM 
Started by jega - Last post by jarry
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';
	}
})

 34 
 on: April 07, 2025, 02:43:35 AM 
Started by jega - Last post by jega
Hi.

Has updated to newest filter 1.07

When filtering i get this error

datagrid-filter.js:324
 Uncaught TypeError: Cannot read properties of undefined (reading 'prompt')
    at _doFilter (datagrid-filter.js?v1.074:324:29)
    at datagrid-filter.js:316:8


Uncomment these lines and it works

if (filterOpts.options.prompt && filterOpts.options.prompt==value){
   value = '';
}

 35 
 on: March 31, 2025, 12:30:40 AM 
Started by jega - Last post by jega
Hi Jarry

Have now tested it.

Well, i can see your demo sample makes an timeline with first node to the right and 2. nd node on the left side and so on. This sample i can't run on my server, it makes all nodes on the right side.

If i look at your sample, i can't see how you tell it which node should be on left and right side. What i want is, that i can choose where it should be.

As in my sample. A property contentPosition before or after

    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:''}
   ]

And when i choose before, the node text should be right aligned and when after, it must be left aligned, og

 36 
 on: March 29, 2025, 04:53:42 PM 
Started by jega - Last post by jega
Thanks.

Just what i needed.

 37 
 on: March 26, 2025, 07:05:22 AM 
Started by Vladzimir - Last post by Vladzimir
Quote from: jarry 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;
  }
});
Thanks for your help!

 38 
 on: March 25, 2025, 12:38:25 AM 
Started by jega - Last post by jarry
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

 39 
 on: March 23, 2025, 03:32:56 AM 
Started by jega - Last post by jega
@jarry

Any solution ??

 40 
 on: March 22, 2025, 06:42:05 PM 
Started by Vladzimir - Last post by jarry
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 [4] 5 6 ... 10
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!