EasyUI Forum
May 15, 2024, 05:03:19 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 [4] 5 6 ... 151
46  General Category / EasyUI for jQuery / Re: SUBGRID ROWEDITING - onClickCell not working on: April 28, 2023, 01:18:28 AM
Please refer to this example.
Code:
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery EasyUI</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-detailview.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
    <script>
        var data = [
            { "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 16.50, "attr1": "Large", "itemid": "EST-1" },
            { "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-2" },
            { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Venomless", "itemid": "EST-3" },
            { "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Green Adult", "itemid": "EST-5" },
            { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 58.50, "attr1": "Tailless", "itemid": "EST-6" },
            { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "With tail", "itemid": "EST-7" },
            { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Female", "itemid": "EST-8" },
            { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Male", "itemid": "EST-9" },
            { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Rattleless", "itemid": "EST-4" },
            { "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 193.50, "attr1": "Adult Male", "itemid": "EST-10" }
        ];
        var detailData = [{ "orderid": "1004", "linenum": "2", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1013", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1014", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }]

        $(function () {
            $('#dg').datagrid({
                title: 'DataGrid - DetailView',
                width: 800,
                height: 350,
                singleSelect: true,
                nowrap: false,
                fitColumns: true,
                data: data,
                columns: [[
                    { field: 'itemid', title: 'Item ID', width: 80 },
                    { field: 'productid', title: 'Product ID', width: 100, sortable: true },
                    { field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true },
                    { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true },
                    { field: 'attr1', title: 'Attribute', width: 150, sortable: true },
                    { field: 'status', title: 'Status', width: 60, align: 'center' }
                ]],
                view: detailview,
                detailFormatter: function (index, row) {
                    return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>';
                },
                onExpandRow: function (index, row) {
                    var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
                    ddv.edatagrid({
                        singleSelect:true,
                        rownumbers:true,
                        columns: [[
                            { field: 'orderid', title: 'Order ID', width: 200,editor:'textbox' },
                            { field: 'quantity', title: 'Quantity', width: 100, align: 'right',editor:'numberbox' },
                            { field: 'unitprice', title: 'Unit Price', width: 100, align: 'right',editor:'numberbox' }
                        ]],
                        data:detailData
                    })
                    $('#dg').datagrid('fixDetailRowHeight', index);
                }
            });
        });
    </script>
</head>

<body>

    <table id="dg"></table>
</body>

</html>
47  General Category / EasyUI for jQuery / Re: ROWEDITING: how to copy date from one column in editmode to next column? on: April 25, 2023, 07:15:43 PM
Please refer to this example.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Row Editing in DataGrid - 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 = [
			{ subpart: 'subprt1', termin: '03/04/2023' },
			{ subpart: 'subprt2', termin: '03/05/2023' },
			{ subpart: 'subprt3', termin: '03/06/2023' },
			{ subpart: 'subprt4', termin: '03/07/2023' }
		]
		$(function () {
			var editIndex = undefined;
			var dg = $('#dg').datagrid({
				columns: [[
					{ field: 'subpart', title: 'Subpart', width: 100, editor: 'textbox' },
					{
						field: 'termin', title: 'Termin Kunde', width: 200, editor: {
							type: 'datebox',
							options: {
								icons: [{
									iconCls: 'icon-ok',
									handler: function (e) {
										var val = $(e.data.target).datebox('getValue');
										var ed = dg.datagrid('getEditor', { index: editIndex, field: 'planung' });
										$(ed.target).datebox('setValue', val);
									}
								}]
							}
						}
					},
					{ field: 'planung', title: 'Planung OPS', width: 200, editor: 'label', editor: 'datebox' }
				]],
				data: data,
				singleSelect: true,
				onClickCell: function (index, field) {
					dg.datagrid('endEdit', editIndex);
					if (editIndex != index) {
						dg.datagrid('selectRow', index).datagrid('beginEdit', index);
						var ed = dg.datagrid('getEditor', { index: index, field: field });
						if (ed) {
							($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
						}
						editIndex = index;
					}
				}
			})
		})
	</script>
</head>

<body>
	<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto">
	</table>

</body>

</html>
48  General Category / EasyUI for jQuery / Re: Radiogroup default checked on: April 20, 2023, 06:52:52 PM
Please set the 'value' property to set the default item.
Code:
<div class="easyui-radiogroup" data-options="name:'radio2',data:groupData,value:'3',dir:'v'"></div>
49  General Category / EasyUI for jQuery / Re: Input box size in easyui-textbox on: April 19, 2023, 11:28:51 PM
This is the live 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>
</head>

<body>
	<div>
		<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px'"
			label="Tipo[S/A]:<i>opcional</i>" value="SS" autoSize="true" style="min-width:300px;">
	</div>
	<div>
		<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px',validType:'length[0,20]'"
			label="Descrição resumida:<i>opcional</i>" value="Descrição resumida" autoSize="true"
			style="min-width:300px;">
	</div>
</body>

</html>
50  General Category / EasyUI for jQuery / Re: EasyUI Datagrid Export on: April 18, 2023, 05:12:19 AM
The better way to export excel is to use the XLSX library. Here is the example shows how to export excel from the datagrid.
Code:
var items = $('#dg').datagrid('getRows');
const wb = XLSX.utils.book_new();
const sheet = XLSX.utils.json_to_sheet(items);
XLSX.utils.book_append_sheet(wb, sheet, 'Sheet1');
XLSX.writeFile(wb, 'table1.xlsx');
51  General Category / EasyUI for jQuery / Re: Datagrid: possible to have groupview and a subgrid together? on: April 18, 2023, 05:10:08 AM
The 'detailFormatter' function is available to add a detail row in the groupview. Please download the 'datagrid-groupview.js' file from https://www.jeasyui.com/extension/datagridview.php.

Code:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery EasyUI</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-detailview.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-groupview.js"></script>
    <script>
        var data = [
            {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
            {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-2"},
            {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-3"},
            {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-5"},
            {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-6"},
            {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-7"},
            {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-8"},
            {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-9"},
            {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-4"},
            {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-10"}
        ];
        var detailData = [
            {"orderid":"orderid1","quantity":10,"unitcost":100},
            {"orderid":"orderid2","quantity":20,"unitcost":200}
        ];

        $(function(){
            $('#dg').datagrid({
                title:'DataGrid - GroupView',
                width:800,
                height:350,
                rownumbers:true,
                remoteSort:false,
                nowrap:false,
                fitColumns:true,
                singleSelect:true,
                data:data,
                columns:[[
                    {field:'e',expander:true,fixed:true,width:30},
                    {field:'productid',title:'Product ID',width:100,sortable:true},
                    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
                    {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
                    {field:'attr1',title:'Attribute',width:150,sortable:true},
                    {field:'status',title:'Status',width:60,align:'center'}
                ]],
                groupField:'productid',
                view: groupview,
                groupFormatter:function(value, rows){
                    return value + ' - ' + rows.length + ' Item(s)';
                },
                detailFormatter:function(index,row){
                    return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>';
                },
                onExpandRow: function(index,row){
                    var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                    ddv.datagrid({
                        data:detailData,
                        fitColumns:true,
                        singleSelect:true,
                        rownumbers:true,
                        loadMsg:'',
                        height:'auto',
                        columns:[[
                            {field:'orderid',title:'Order ID',width:200},
                            {field:'quantity',title:'Quantity',width:100,align:'right'},
                            {field:'unitprice',title:'Unit Price',width:100,align:'right'}
                        ]],
                        onResize:function(){
                            $('#dg').datagrid('fixDetailRowHeight',index);
                        },
                        onLoadSuccess:function(){
                            setTimeout(function(){
                                $('#dg').datagrid('fixDetailRowHeight',index);
                            },0);
                        }
                    });
                    $('#dg').datagrid('fixDetailRowHeight',index);
                }
            });
        });
    </script>
</head>
<body>    
    <table id="dg"></table>
</body>
</html>
52  General Category / EasyUI for jQuery / Re: Double-click on date box to enter current date on: April 17, 2023, 08:31:12 PM
Please refer to this code.
Code:
var dd = $('#dd').datebox();
dd.next().on('click', function(){
	if (!dd.datebox('getValue')){
		var opts = dd.datebox('options');
		var value = opts.formatter(new Date());
		dd.datebox('setValue',value);
	}
})
53  General Category / EasyUI for jQuery / Re: EasyUI - validType[] documentation on: April 17, 2023, 08:18:15 PM
Please refer to https://www.jeasyui.com/documentation/validatebox.php

There are only a few validate rules but it is easy to extend them.
54  General Category / EasyUI for jQuery / Re: Input box size in easyui-textbox on: April 17, 2023, 07:17:15 PM
Please set the 'autoSize' property to true. Make sure to update to the latest version.
Code:
<div>
	<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px'"
		label="Tipo[S/A]:<i>opcional</i>" value="SS" autoSize="true" style="min-width:300px;">
</div>
<div>
	<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px',validType:'length[0,20]'"
		label="Descrição resumida:<i>opcional</i>" value="Descrição resumidaDescrição resumida" autoSize="true"
		style="min-width:300px;">
</div>
55  General Category / EasyUI for jQuery / Re: Put the focus() on the first field of the form on: April 11, 2023, 01:32:06 AM
Please try this code to get the first field of the form.
Code:
var f = $('#ff').find('.validatebox-text:not(:disabled):first');
f.focus();
56  General Category / EasyUI for jQuery / Re: sub menu not fire onShow on: April 05, 2023, 07:38:38 PM
The 'onShow' event fires only when the top menu displays. If you want to change the default position of the menu, please try to set the 'position' function for the menu.
Code:
$('#mm').menu({
	position: function(target,left,top){
		return {left:left,top:top}
	}
})
57  General Category / EasyUI for jQuery / Re: Combobox auto width problem on: April 05, 2023, 07:29:37 PM
Please set the CSS style for the 'combobox-item' to solve this issue.
Code:
<style>
	.combobox-item{
		white-space: nowrap;
		padding-right: 20px;
	}
</style>
58  General Category / EasyUI for jQuery / Re: Bug in RadioGroup demo not working on: April 05, 2023, 07:25:53 PM
The 'radiogroup' component is not supported in this version. Please update to the latest version.
59  General Category / EasyUI for jQuery / Re: Autosave in Datagrid on: March 30, 2023, 01:56:52 AM
Please listen to the 'onEndEdit' event and save data to the server.
Code:
$('#dg').datagrid({
    onEndEdit: function(index,row,changes){
        // save data to the server
    }
})
60  General Category / EasyUI for jQuery / Re: Default century in datebox on: March 29, 2023, 07:23:11 PM
This is the default behaviour of the javascript object Date. To solve this issue, please override the $.fn.datebox.defaults.parser function to fill with '20' as the prefix while typing only 2 digital number.
Code:
$.extend($.fn.datebox.defaults, {
	parser: function (s) {
		var CDate = $.fn.calendar.defaults.Date;
		if ($(this).data('datebox')) {
			CDate = $(this).datebox('calendar').calendar('options').Date;
		}
		if (!s) return new CDate();
		var ss = s.split('/');
		var m = parseInt(ss[0], 10);
		var d = parseInt(ss[1], 10);
		var y = parseInt(ss[2], 10);
		if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
			if (y < 100) {
				y = 2000 + y;
			}
			return new CDate(y, m - 1, d);
		} else {
			return new CDate();
		}
	}
})
Pages: 1 2 3 [4] 5 6 ... 151
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!