Latest posts of: jarry

EasyUI Forum

May 16, 2024, 12:29:05 PM

Welcome, Guest. Please login or register.

News:

Home

Help

Show Posts
Pages: 1 ... 3 4 [5] 6 7 ... 151

General Category / EasyUI for jQuery / Re: datagrid with combobox and inline cell editing newbie question

on: March 29, 2023, 01:30:18 AM

Please try to use the Cell Editing extension.

https://www.jeasyui.com/extension/datagrid_cellediting.php

Here is the example using the 'combobox' editor.

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.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-cellediting.js"></script>
    <script type="text/javascript">
        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": "P", "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": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
            { "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
        ];
        var comboData = [
            { "productid": "FI-SW-01", "productname": "Koi" },
            { "productid": "K9-DL-01", "productname": "Dalmation" },
            { "productid": "RP-SN-01", "productname": "Rattlesnake" },
            { "productid": "RP-LI-02", "productname": "Iguana" },
            { "productid": "FL-DSH-01", "productname": "Manx" },
            { "productid": "FL-DLH-02", "productname": "Persian" },
            { "productid": "AV-CB-01", "productname": "Amazon Parrot" }
        ];

        $(function () {
            $('#dg').datagrid({
                data: data,
                fitColumns: true,
                columns: [[
                    { field: 'itemid', title: 'Item ID', width: 100 },
                    {
                        field: 'productid', title: 'Product', width: 150,
                        editor: {
                            type: 'combobox',
                            options: {
                                data: comboData,
                                valueField: 'productid',
                                textField: 'productname'
                            }
                        }
                    },
                    { field: 'listprice', title: 'List Price', width: 100, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } },
                    { field: 'unitcost', title: 'Unit Cost', width: 100, align: 'right', editor: 'numberbox' },
                    { field: 'attr1', title: 'Attribute', width: 250, editor: 'text' }
                ]]
            }).datagrid('enableCellEditing').datagrid('gotoCell', {
                index: 0,
                field: 'productid'
            });
        });
    </script>
</head>

<body>
    <table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:400px"></table>
</body>

</html>

62	General Category / EasyUI for jQuery / Re: datagrid + unselectAll	on: March 26, 2023, 07:53:37 PM
If you set the 'idField' property for the datagrid, please call 'clearSelections' method to clear the selected rows on all pages.

63	General Category / EasyUI for jQuery / Re: Structure row	on: March 26, 2023, 07:40:04 PM
The row is a plain javascript object. Its fields depend on the data bound on the component.

64	General Category / EasyUI for jQuery / Re: .combotree textField - didnt work	on: March 26, 2023, 07:32:35 PM
Please define the 'formatter' function to display the tree node's text on the drop-down panel. Code: $('#Label').combotree({ url: '?getLabels' , idField: 'ID' , textField: 'Name' , formatter: function(node){ return node.name; } ... });

65	General Category / EasyUI for jQuery / Re: edatagrid destroyRow and reload	on: March 26, 2023, 07:05:02 PM
Please look at this example https://www.jeasyui.com/demo/main/index.php?plugin=Application&theme=material-teal&dir=ltr&pitem=CRUD%20DataGrid&sort=asc. The 'destroyRow' method works fine.

General Category / EasyUI for jQuery / Re: Groupbox check items

on: March 20, 2023, 07:18:07 PM

Please look at this example. It works fine.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Load Form Data - 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>
		$(function () {
			$('#fm').form('clear');
			$('#fm').form('load', {
				name: 'name1',
				weekdaysList: ['2', '3']
			})
		})
	</script>
</head>

<body>
	<div id="dlg" class="easyui-dialog">
		<form id="fm" class="easyui-form">
			<input class="easyui-textbox" name="name" label="Name:" labelPosition="top">
			<div id="weekdaysList" name="weekdaysList" class="easyui-checkgroup" data-options="
				labelWidth: 100,
				data:[
					{value:'1',label:'Monday'},
					{value:'2',label:'Tuesday'},
					{value:'3',label:'Wednesday'},
					{value:'4',label:'Thursday'},
					{value:'5',label:'Friday'}              
				]"></div>
		</form>
	</div>
</body>

</html>

General Category / EasyUI for jQuery / Re: Filter function on numberbox

on: March 20, 2023, 07:03:45 PM

Please look at this example. The 'getValue' method works fine.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Basic NumberBox - 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>
		$(function () {
			$('#nb').numberbox({
				precision: 0,
				filter: function (e) {
					if (String.fromCharCode(e.which) == '.') {
						return false;
					} else {
						return $.fn.numberbox.defaults.filter.call(this, e);
					}
				}
			})
		})
	</script>
</head>

<body>
	<input id="nb" label="NumberBox1:" labelPosition="top">
	<button class="easyui-linkbutton" onclick="alert($('#nb').numberbox('getValue'))">GetValue</button>
</body>

</html>

The 'getValue' method returns the value while the 'getText' method returns the displaying text. They are different in some conditions. For example, if you set the 'prefix' property or some other formats, the 'getText' method will return the formatted text that looks like '$23.24', but the 'getValue' method only returns the '23.24' value according to the 'precision' setting.

68	General Category / EasyUI for jQuery / Re: how to load data from remote server in sidemenu	on: March 13, 2023, 06:41:20 PM
Try this code. Code: $.get(yoururl, function(data){ $('#sm').sidemenu({data:data}); });

General Category / EasyUI for jQuery / Re: Code to add key handler works in developer console, not when included in page

on: March 05, 2023, 08:12:12 PM

Please try to extend the 'keyHandler'.

Code:

<script>
$.extend($.fn.datebox.defaults, {
	keyHandler: $.extend({}, $.fn.combo.defaults.keyHandler, {
		up: function (e) {
			var d = $(e.data.target);
			var d1 = moment(d.datebox('getText')).add(-1, 'days');   // uses moment.js date library
			var d2 = d1.format('MM/DD/YYYY');
			d.datebox('setValue', d2);
		},
		down: function (e) {
			var d = $(e.data.target);
			var d1 = moment(d.datebox('getText')).add(1, 'days');   // uses moment.js date library
			var d2 = d1.format('MM/DD/YYYY');
			d.datebox('setValue', d2);
		}
	})
});
</script>

70	General Category / EasyUI for jQuery / Re: texteditor contextMenu	on: March 01, 2023, 12:12:58 AM
This code works fine. Code: $('#te0').texteditor('getEditor').texteditor('execCommand','bold')

General Category / EasyUI for jQuery / Re: How do we create multi step form inside easyui dialog.

on: March 01, 2023, 12:00:52 AM

This is the simple example shows how to create a wizard on a dialog.

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>
</head>

<body>
	<div id="dlg" class="easyui-dialog" title="Step Dialog" style="width:400px;height:200px;">
		<div id="tt" class="easyui-tabs" fit="true" border="false" showHeader="false">
			<div class="f-column">
				<div class="f-full">
					<p>Step 1 Content.</p>
				</div>
				<div style="padding:10px;text-align:right">
					<button class="easyui-linkbutton" onclick="$('#tt').tabs('select',1)">Next</button>
				</div>
			</div>
			<div class="f-column">
				<div class="f-full">
					<p>Step 2 Content.</p>
				</div>
				<div style="padding:10px;text-align:right">
					<button class="easyui-linkbutton" onclick="$('#tt').tabs('select',0)">Prev</button>
					<button class="easyui-linkbutton" onclick="$('#tt').tabs('select',2)">Next</button>
				</div>
			</div>
			<div class="f-column">
				<div class="f-full">
					<p>Step 3 Content.</p>
				</div>
				<div style="padding:10px;text-align:right">
					<button class="easyui-linkbutton" onclick="$('#tt').tabs('select',1)">Prev</button>
					<button class="easyui-linkbutton">Finish</button>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

General Category / EasyUI for jQuery / Re: Datebox can input 0 and save

on: February 28, 2023, 11:31:34 PM

Please rewrite the 'blur' event handler to solve this issue.

Code:

$.extend($.fn.datebox.defaults, {
	inputEvents: $.extend({},$.fn.combo.defaults.inputEvents, {
		blur: function (e) {
			$.fn.combo.defaults.inputEvents.blur(e);
			var d = $(e.data.target);
			d.datebox('setValue',d.datebox('getValue'));
		}
	})
});

General Category / EasyUI for jQuery / Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

on: February 28, 2023, 07:59:26 PM

Some errors occur in your code.

Code:

onLoadSuccess:
   function (data) {
      for (var i = 0; i < data.rows.length; ++i) {
         if (data.rows['user_profile_id'] == <cfoutput>#session.userDataStruct.current_profile_id#</cfoutput>){
               $(this).datagrid('checkRow', i);
         }
      }
   },

Please replace it with:

Code:

onLoadSuccess:
   function (data) {
      for (var i = 0; i < data.rows.length; ++i) {
         if (data.rows[i]['user_profile_id'] == <cfoutput>#session.userDataStruct.current_profile_id#</cfoutput>){
               $(this).datagrid('checkRow', i);
         }
      }
   },

Additionally, this code isn't clear. Why do you clear all the checkbox and select it again. Please try to remove it from your code.

Code:

onBeforeCheck: function (index, row) {
	$(this).datagrid('clearChecked');
	$(this).datagrid('selectRow', index);
},

General Category / EasyUI for jQuery / Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

on: February 26, 2023, 07:12:02 PM

This is the treegrid code created from your example. The single selecting feature works fine. Please make sure you are using the latest version of the easyui library(1.10.15).

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Basic 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 type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script>
	<script>
		var data = {
			"total": 10, "rows": [
				{ "id": 1, "col1": "ETO1", "col2": "Region1" },
				{ "id": 11, "col1": "ETO11", "col2": "Region11", "_parentId": 1 },
				{ "id": 2, "col1": "ETO2", "col2": "Region2" },
				{ "id": 3, "col1": "ETO3", "col2": "Region3" },
				{ "id": 4, "col1": "ETO4", "col2": "Region4" },
				{ "id": 5, "col1": "ETO5", "col2": "Region5" },
				{ "id": 6, "col1": "ETO6", "col2": "Region6" },
				{ "id": 7, "col1": "ETO7", "col2": "Region7" },
				{ "id": 8, "col1": "ETO8", "col2": "Region8" },
				{ "id": 9, "col1": "ETO9", "col2": "Region9" },
				{ "id": 10, "col1": "ETO10", "col2": "Region10" }
			]
		}

		$(function () {
			$('#PRCover').treegrid({
				data: data,
				idField: 'id',
				treeField: 'col1',
				emptyMsg: "No Records Found",
				border: true,
				singleSelect: true,
				fit: true,
				fitColumns: true,
				striped: true,
				rownumbers: false,
				collapsible: true,
				lines: false,
				sortOrder: 'asc',
				remoteSort: false,
				showHeader: true,
				scrollbarSize: 18,

				// toolbar: '#prcover_search',
				nowrap: true,

				remoteFilter: false,
				pagination: true,
				pageList: [10, 20, 30, 40, 50, 100, 250, 500, 1000],
				pageSize: 1000,
				// loadFilter: function (data, parent) {
				// },
				onSelect: function (node) {

				},
				onContextMenu: function (e, row) {
				},
				columns: [[
					{
						field: 'action',
						title: '',
						width: 50,
						resizable: false,
						fixed: true,
						formatter: function (value, row, index) {
							var link = '';
							if (row['has_attach'] === true || row['has_attach'] === "true") {
								link = '<a class="download-attachment-icon" title="Attachments" href="javascript:getAllAttachments(\'' + row['doc_set_id'] + '\')">&nbsp;</a>&nbsp;';
							}
							if (row['has_deliver'] === true || row['has_deliver'] === "true") {
								link = link + '<a class="download-deliverable-icon" title="Deliverables" href="javascript:downloadDeliverable(\'' + row['id'] + '\')">&nbsp;</a>&nbsp;';
							}
							if (link.length) {
								return link;
							}
						}
					},
					{ title: 'ETO (ACO) / PR / LSD', field: 'col1', width: '30%', sortable: true },
					{ title: 'Region / Comment', field: 'col2', width: '20%', sortable: true, align: 'left' },
					{ title: 'Funding Type', field: 'col3', width: '10%', sortable: true },
					{ title: 'Work Release', field: 'col4', width: '10%', description: 'Work Release referenced to this PR Cover.', sortable: true },
					{ title: 'Acceptance', field: 'col5', width: '10%', sortable: true, align: 'center' },
					{ title: 'PR Amount  ', field: 'col6', width: '16.5%', sortable: true, align: 'right' }
				]]
			})
				.treegrid('enableFilter')
				.treegrid('getPanel').find('tr.datagrid-filter-row').hide();
		})
	</script>
</head>

<body>
	<table id="PRCover" title="Folder Browser" class1="easyui-treegrid">
	</table>

</body>

</html>

75	General Category / EasyUI for jQuery / Re: Filebox not part of serialize() method output	on: February 23, 2023, 06:57:01 PM
Data from file select elements is not serialized by 'serialize' method. Please try to use FormData object instead.

Pages: 1 ... 3 4 [5] 6 7 ... 151