EasyUI Forum
June 13, 2026, 03:29:21 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 ... 154
1  General Category / EasyUI for jQuery / Re: Site scroll when expand panel on: February 25, 2026, 12:08:04 AM
Please refer to this example.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Panel - 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>
	<style>
		.c1{
			margin-bottom: 20px;
		}
	</style>
	<script>
		$(function(){
			const panels = $('.c1').find('.panel-body');
			panels.each(function(){
				$.extend($(this).panel('options'),{
					onCollapse: ()=>{
						panels.panel('resize')
					},
					onExpand: ()=>{
						panels.panel('resize')
					}
				});
			})
			panels.panel('resize')
		})
	</script>
</head>

<body>
	<div class="easyui-panel" title="Panel1" style="width:100%;height:200px;padding:10px;"
		data-options="collapsible:true,collapsed:true,cls:'c1'">
	</div>
	<div class="easyui-panel" title="Panel2" style="width:100%;height:200px;padding:10px;"
		data-options="collapsible:true,collapsed:true,cls:'c1'">
	</div>
	<div class="easyui-panel" title="Panel3" style="width:100%;height:200px;padding:10px;"
		data-options="collapsible:true,collapsed:true,cls:'c1'">
	</div>

</body>

</html>
2  General Category / EasyUI for jQuery / Re: Change locale dynamic on: January 26, 2026, 11:55:00 PM
Please try the 'loadLocale' function definition.

Code:
function loadLocale(countryCode) {
	const url = 'https://www.jeasyui.com/easyui/locale/easyui-lang-' + countryCode + '.js';
	$.getScript(url, () => {
		$('.pagination').each(function () {
			var opts = $(this).pagination('options');
			opts.beforePageText = $.fn.pagination.defaults.beforePageText;
			opts.afterPageText = $.fn.pagination.defaults.afterPageText;
			opts.displayMsg = $.fn.pagination.defaults.displayMsg;
			$(this).pagination();
		});
		$('.datagrid-f').each(function () {
			var opts = $(this).datagrid('options');
			opts.loadMsg = $.fn.datagrid.defaults.loadMsg;
		})
	})
}
3  General Category / EasyUI for jQuery / Re: Drag and drop between datagrids on: December 15, 2025, 11:50:07 PM
Here is the example shows how to drag a row from player datagrid and drop it on the team datagrid.
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 data1 = [
      { "playerUUID": "UUID1", "playerName": "Name1" },
      { "playerUUID": "UUID2", "playerName": "Name2" },
      { "playerUUID": "UUID3", "playerName": "Name3" },
      { "playerUUID": "UUID4", "playerName": "Name4" },
      { "playerUUID": "UUID5", "playerName": "Name5" }
    ];
    var data2 = [
      { "playerUUID": "UUID6", "playerName": "Name6" },
      { "playerUUID": "UUID7", "playerName": "Name7" }
    ];
    $(function () {
      $('#dgPlayer').datagrid({
        singleSelect: true,
        data: data1,
        onLoadSuccess: function () {
          $(this).datagrid('enableDnd');
        },
        onBeforeDrop: function () {
          return false;
        }
      })
      $('#dgTeam').datagrid({
        singleSelect: true,
        data: data2,
        onLoadSuccess: function () {
          $(this).datagrid('enableDnd');
        },
        onBeforeDrag: function () {
          return false;
        }
      })

    })
  </script>
</head>

<body>
  <div class="f-row">
    <div>
      <table id="dgPlayer" title="Player" style="width:400px;height:250px">
        <thead>
          <tr>
            <th data-options="field:'playerUUID',width:100">playerUUID</th>
            <th data-options="field:'playerName',width:200">playerName</th>
          </tr>
        </thead>
      </table>
    </div>
    <div>
      <table id="dgTeam" title="Team" style="width:400px;height:250px">
        <thead>
          <tr>
            <th data-options="field:'playerUUID',width:100">playerUUID</th>
            <th data-options="field:'playerName',width:200">playerName</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>


</body>

</html>
4  General Category / EasyUI for jQuery / Re: BUG tagbox in datagridfilter on: December 09, 2025, 01:04:40 AM
Call this code to assign your customized 'filterBtnIconCls' value.
Code:
var dg = $('#dg').datagrid({
	filterBtnIconCls: 'far fa-check'
});
5  General Category / EasyUI for jQuery / Re: BUG tagbox in datagridfilter on: December 05, 2025, 12:59:25 AM
Please refer to this 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>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script>
	<script>
		$.extend($.fn.datagrid.defaults.filters, {
			tagbox: {
				init: function (container, options) {
					var input = $('<input>').appendTo(container);
					input.tagbox($.extend({
						selectOnNavigation: true,
						panelHeight: 'auto',
						hasDownArrow: true,
						limitToList: true
					}, options || {}));
					console.log('init');
					return input;
				},
				setValue: function (target, value) {
					console.log('setValue');
					if (value) {
						$(target).tagbox('setValues', value);

					} else {
						$(target).tagbox('clear');
					}
				},
				getValue: function (target) {
					console.log('getValue');
					return $(target).tagbox('getValues');
				},
				resize: function (target, width) {
					console.log('resize');
					$(target).tagbox('resize', width);
				},
				destroy: function (target) {
					console.log('destroy');
					$(target).tagbox('destroy');
				}
			}
		});
		$.extend($.fn.datagrid.defaults.operators, {
			equal2: {
				text: 'Equal',
				isMatch: function (source, value) {
					const vv = $.isArray(value) ? value : value.split(',');
					return $.inArray(source,vv) >= 0;
				}
			},
		});
		var data = [
			{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
			{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
			{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
			{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
			{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
			{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "N", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
			{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
			{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
			{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "N", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
			{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "N", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
		];
		$(function () {
			var dg = $('#dg').datagrid({
				filterBtnIconCls: 'icon-filter'
			});
			dg.datagrid('enableFilter', [{
				field: 'listprice',
				type: 'numberbox',
				options: { precision: 1 },
				op: ['equal', 'notequal', 'less', 'greater']
			}, {
				field: 'unitcost',
				type: 'numberbox',
				options: { precision: 1 },
				op: ['equal', 'notequal', 'less', 'greater']
			}, {
				field: 'status',
				type: 'tagbox',
				op1: ['contains'],
				options: {
					value: ['P', 'N'],
					editable: false,
					data: [{ value: 'P', text: 'P' }, { value: 'N', text: 'N' }],
					onChange: function (value) {
						setTimeout(() => {
							if (value == '' || value.length == 0) {
								dg.datagrid('removeFilterRule', 'status');
							} else {
								dg.datagrid('addFilterRule', {
									field: 'status',
									op: 'equal2',
									value: value
								});
							}
							dg.datagrid('doFilter');
						}, 200)
					}
				}
			}]);
		});
	</script>
</head>

<body>
	<table id="dg" title="DataGrid" style="width:900px;height:250px" data-options="
				singleSelect:true,
				data:data
			">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:150,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
</body>

</html>
6  General Category / EasyUI for jQuery / Re: Auto Icons in tree/treegrid on: November 24, 2025, 12:15:23 AM
Please look at this example https://www.jeasyui.com/demo/test/test22.html. It works fine.
7  General Category / EasyUI for jQuery / Re: tagbox in filter datagrid on: November 21, 2025, 12:12:36 AM
Please download a newer version from https://www.jeasyui.com/download/v111.php
8  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");
		}
	})
});
9  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>
10  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>
11  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.
12  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>
13  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; }
	}
})
14  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'.
15  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;
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!