EasyUI Forum
May 05, 2024, 09:28:00 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: April 18, 2024, 01:27:26 AM 
Started by jahangir - Last post by jarry
Please try this code.
Code:
var msg = $.messager.prompt('My Title', 'Please type something', function(r){
	if (r){
		alert('you type: '+r);
	}
});
msg.find('.messager-input').attr('type','number')

 12 
 on: April 17, 2024, 05:35:04 AM 
Started by Wojak - Last post by Wojak
In strange cases the datagrid becomes unresponsive. You cannot change the column width, the width of the data columns changes.

If i use
Code:
$('#example').datagrid();


Reinitialized works fine

My code for datagrid
Code:
$('#example').datagrid({
        url: 'example.php,
        columns: [[
            { field: 'opcje', title: 'Opcje', width: '60px', align: 'center',
                formatter: function (value, row, index) {
                    if (row.editing) {
                        const s = '<a href="javascript:void(0)" onclick="exampleSave(' + row.id + ')"><i class="fa-solid fa-floppy-disk fa-xl" style="color:black;"></i></a> ';
                        const c = '<a href="javascript:void(0)" onclick="exampleCancel(' + row.id + ')"><i class="fa-solid fa-rotate-left fa-xl" style="color:black;"></i></a>';
                        return s + c;
                    } else {
                        return '<a href="javascript:void(0)" onclick="exampleEdit(' + row.id + ')"><i class="fa-solid fa-pen-to-square fa-xl" style="color:black;"></i></a>';
                    }
                }
            },
            { field: 'wydzial_dzial', title: 'Koszty osobowe', width: '200px', halign: 'center' },
            { field: 'stawka', title: 'Stawka godz. [PLN]', width: '120px', halign: 'center', align: 'right', editor: { type: 'numberbox', options: { min: 0, precision: 0, decimalSeparator: ',' } } },
            { field: 'stawka_0', title: 'Stawka godz. + ogolnozakładowa [PLN]', width: '120px', halign: 'center', align: 'right' },
            { field: 'stawka_narzut', title: 'Stawka narzut [PLN]', width: '120px', halign: 'center', align: 'right' },
        ]],
        idField: 'id',
        rownumbers: true,
        singleSelect: true,
        onBeforeEdit: function (index, row) {
            row.editing = true;
            $(this).datagrid('refreshRow', index);
        },
        onAfterEdit: function (index, row) {
            row.editing = false;
            $(this).datagrid('refreshRow', index);
        },
        onCancelEdit: function (index, row) {
            row.editing = false;
            $(this).datagrid('refreshRow', index);
        },
        queryParams: {
            id: __id
        }
    });

 13 
 on: April 16, 2024, 10:29:16 AM 
Started by Coder - Last post by Wojak
This might be a better way to export data to XLSX

https://www.jeasyui.com/forum/index.php?topic=8733

 14 
 on: April 16, 2024, 07:06:30 AM 
Started by Coder - Last post by Coder
datagrid-export-1.0.3.zip/datagrid-export.js:
LINE 49-51:
Quote
               data.push(
                    '<td style="'+tdStyle+'">&nbsp;'+value+'</td>'
                );

 15 
 on: April 16, 2024, 04:25:45 AM 
Started by jahangir - Last post by jahangir
How do I restrict user input to only numbers in easyui $.messager.prompt

 16 
 on: February 29, 2024, 07:45:25 PM 
Started by thiago_brum - Last post by jarry
This example works fine.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Custom CheckBox in TreeGrid - jQuery EasyUI 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/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>
		var data = {
			"total": 7,
			"rows": [
				{ "id": 2, "name": 'Dias' },
				{ "id": 3, "name": 'NECTARVIS' },
				{ "id": 4, "name": 'NECTARVIS-PGG', "_parentId": 3 },
				{ "id": 5, "name": 'NECTARVIS-08.602.452', "_parentId": 4 },
				{ "id": 6, "name": '% Peso Consumo', "_parentId": 4, "chave_faturamento": true },
				{ "id": 7, "name": 'Contratado', "_parentId": 4, "chave_faturamento": true },
				{ "id": 8, "name": 'Flex Minimo', "_parentId": 4 },
			]
		}
		$(function () {
			$('#tg').treegrid({
				columns: [[
					{
						field: 'checked',
						checkbox: true,
						styler: function (value, row) {
							if (!row.chave_faturamento) {
								return { class: 'hidden' };
							}
						}
					}, {
						field: 'name',
						title: 'Agente X Mês',
						width: 400
					}
				]],
				singleSelect: true,
				selectOnCheck: false,
				checkOnSelect: false,
				onLoadSuccess: function () {
					$(this).treegrid('getPanel').find('.hidden .datagrid-cell-check').html('')
				},
				onCheckAll: function (rows) {
					const data = rows.filter(row => row.chave_faturamento)
					const state = $.data(this, 'datagrid');
					state.checkedRows = data;
				}
			})
		})
	</script>
	<style>
		.hidden .datagrid-cell-check {
			visibility: hidden;
		}
	</style>
</head>

<body>
	<table id="tg" title="Folder Browser" style="width:700px;height:450px" data-options="
				data: data,
				rownumbers: true,
				idField: 'id',
				treeField: 'name',
				singleSelect: true
			"></table>

</body>

</html>

 17 
 on: February 29, 2024, 07:48:03 AM 
Started by thiago_brum - Last post by thiago_brum
Thanks a lot for the help. We have one last problem. When hiding the datagrid-cell-check, the formatting of the columns is lost (see attached image). Can you help?

 18 
 on: February 29, 2024, 01:19:31 AM 
Started by thiago_brum - Last post by jarry
Please refer to this example.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Custom CheckBox in 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>
		var data = [{
			"id": 1,
			"name": "C",
			"size": "",
			"date": "02/19/2010",
			"children": [{
				"id": 2,
				"name": "Program Files",
				"size": "120 MB",
				"date": "03/20/2010",
				"children": [{
					"id": 21,
					"name": "Java",
					"size": "",
					"date": "01/13/2010",
					"state": "closed",
					"children": [{
						"id": 211,
						"name": "java.exe",
						"size": "142 KB",
						"date": "01/13/2010"
					}, {
						"id": 212,
						"name": "jawt.dll",
						"size": "5 KB",
						"date": "01/13/2010"
					}]
				}, {
					"id": 22,
					"name": "MySQL",
					"size": "",
					"date": "01/13/2010",
					"state": "closed",
					"children": [{
						"id": 221,
						"name": "my.ini",
						"size": "10 KB",
						"date": "02/26/2009"
					}, {
						"id": 222,
						"name": "my-huge.ini",
						"size": "5 KB",
						"date": "02/26/2009"
					}, {
						"id": 223,
						"name": "my-large.ini",
						"size": "5 KB",
						"date": "02/26/2009"
					}]
				}]
			}, {
				"id": 3,
				"name": "eclipse",
				"size": "",
				"date": "01/20/2010",
				"children": [{
					"id": 31,
					"name": "eclipse.exe",
					"size": "56 KB",
					"date": "05/19/2009"
				}, {
					"id": 32,
					"name": "eclipse.ini",
					"size": "1 KB",
					"date": "04/20/2010"
				}, {
					"id": 33,
					"name": "notice.html",
					"size": "7 KB",
					"date": "03/17/2005"
				}]
			}]
		}]
		$(function () {
			$('#tg').treegrid({
				columns: [[
					{
						field: 'checked',
						checkbox: true,
						styler: function (value, row) {
							var names = ['Java', 'C', 'eclipse.exe', 'eclipse.ini'];
							if ($.inArray(row.name, names) == -1) {
								return { class: 'hidden' };
							}
						}
					}, {
						field: 'name',
						title: 'Agente X Mês',
						width: 230
					}
				]],
				singleSelect: true,
				selectOnCheck: false,
				checkOnSelect: false,
				onLoadSuccess: function(){
					$(this).treegrid('getPanel').find('.hidden .datagrid-cell-check').html('')
				},
				onCheckAll: function(rows){
					const data = rows.filter(row=>{
						var names = ['Java', 'C', 'eclipse.exe', 'eclipse.ini'];
							if ($.inArray(row.name, names) >= 0) {
								return true;
							} else {
								return false;
							}
					})
					const state = $.data(this, 'datagrid');
					state.checkedRows = data;
				}
			})
		})
	</script>
	<style>
		.hidden .datagrid-cell-check {
			visibility: hidden;
		}
	</style>
</head>

<body>
	<table id="tg" title="Folder Browser" style="width:700px;height:250px" data-options="
				data: data,
				rownumbers: true,
				idField: 'id',
				treeField: 'name',
				singleSelect: true
			"></table>

</body>

</html>

 19 
 on: February 28, 2024, 06:17:07 AM 
Started by thiago_brum - Last post by thiago_brum
Thanks for your help. The built-in functionality set the checkbox next to the text. I need the checkbox in a unique column. I tested the title option but when clicking on the checkbox nothing happens (not even the check is carried out). I need the checkall/uncheckall functionality. Its possible?

 20 
 on: February 27, 2024, 08:15:01 PM 
Started by thiago_brum - Last post by jarry
The 'checkbox' selection is the built-in functionality in the treegrid component. Please look at this example:

https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=material-teal&dir=ltr&pitem=Custom%20CheckBox&sort=asc

If you want to custom the checkbox column, please define the 'title' property for your checkbox column.
Code:
{
	field: 'checked',
	title: '<input type="checkbox">',
	formatter: ...
}

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!