EasyUI Forum
March 11, 2026, 07:48:13 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 ... 10
 11 
 on: January 03, 2026, 06:43:07 AM 
Started by jega - Last post by jega
Looking for a way to change the text dynamicaly

<div id="menu_setup" class="easyui-menu">
   <div id="upload" data-options="iconCls:'icon-upload'">
      <span>(1) Upload</span>
         <div>
            <div id="objID" data-options="iconCls:'icon-imageupload'">TEXT TO CHANGE</div>
         </div>
   </div>
</div>

Tried $('#objID').html('Changed text') and $('#objID').text('Changed text') whiuch both change the text but now there is no icon class and text starts from icon place. See attachement


Happy New Year

Jesper

 12 
 on: December 16, 2025, 02:49:40 AM 
Started by jega - Last post by jega
Found the answer.

It was the onBeforeDrag and -drop i need to handle.

 13 
 on: December 16, 2025, 02:43:49 AM 
Started by jega - Last post by jega
Hi. Have a panel with 100% width. When it expands, the site scrollbar goes over panel

See attached image 1 and 2

 14 
 on: December 16, 2025, 02:35:59 AM 
Started by jega - Last post by jega
Hi jarry

Thanks for an sample. That was more easy than i thought.

But, it can only drag from player to team, not from team to player.

 15 
 on: December 15, 2025, 11:50:07 PM 
Started by jega - Last post by jarry
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>

 16 
 on: December 13, 2025, 02:27:58 PM 
Started by jega - Last post by jega
HI.

Have searched around but not found exact what i need.

Have a datagrid with players and 4 datagrids for teams.

Players dg have an ID, playerUUID and playerName column. Team dg has playerUUID and playerName columns

Want to drag from player to a team (and remove it from player). If placed wrong, drag it from team back to player. No dnd between teams.

Need it in a small project in 8 days. ;-)

Any help

Regards Jesper

 17 
 on: December 09, 2025, 07:30:43 AM 
Started by Vladzimir - Last post by Vladzimir
Quote from: jarry 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'
});
The problem was precisely the presence of the class datagrid-filter
That's why the error was generated, because it is a system class.

I see that the extension version number has changed to 1.0.8, but I didn’t find any changes there.

 18 
 on: December 09, 2025, 01:04:40 AM 
Started by Vladzimir - Last post by jarry
Call this code to assign your customized 'filterBtnIconCls' value.
Code:
var dg = $('#dg').datagrid({
	filterBtnIconCls: 'far fa-check'
});

 19 
 on: December 08, 2025, 01:13:49 PM 
Started by Vladzimir - Last post by Vladzimir
Quote from: jarry on December 05, 2025, 12:59:25 AM
Please refer to this example.
The problem was not in the extension, but in my carelessness.
I used a class for the filter button
Code:
 $.fn.datagrid.defaults.filterBtnIconCls = 'far fa-filter datagrid-filter';
Which is what caused the error.

P.S. I would like to request a modification that will allow the use of dual classes like 'far fa-check' for filterMenuIconCls
Code:
menu.find('.'+opts.filterMenuIconCls.replace(/\s+/g, '.')).removeClass(opts.filterMenuIconCls);
Otherwise they are not removed.

 20 
 on: December 05, 2025, 12:59:25 AM 
Started by Vladzimir - Last post by jarry
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>

Pages: 1 [2] 3 4 ... 10
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!