datagrid + editor

EasyUI Forum

February 13, 2025, 03:23:14 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > datagrid + editor

Pages: [1]

« previous next »

Author

Topic: datagrid + editor (Read 5359 times)

rezzonico

Full Member

Posts: 186

datagrid + editor

« on: September 28, 2021, 02:09:03 AM »

Hi all,

I have a datagrid with 2 columns: "Type" and "Description".

I need to modify the editor of the column "Description" depending on the value of the column "Type".
If "Type" == 2 then the editor of "Description" is null.
If "Type" != 2 then the editor of "Description" is "textbox".

I have the following example:
http://195.144.40.170/jeasyui/AAA7/

... and the following two problems:

1) If I double click on the first line the editor of the column "Description" is not itilialized.
   The reason is that the "onChange" event is not started.
   But how to solve this ?

2) Double click in the second line and change the value of the column "Type" to "1"
   Double click in the third line and change the value of the column "Type" to "1"

   Now the second and the third line are both in edit mode.
   How to avoid this ?

Thanks a lot
Miche


	Logged

jarry

Administrator
Hero Member

Posts: 2283

Re: datagrid + editor

« Reply #1 on: September 29, 2021, 08:24:27 PM »

Here is the possible ways to solve your problems.

1. Listen to the 'onBeforeEdit' event to initialize the editors.

2. Use the 'saveRow' and 'editRow' methods instead.

Code:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script type="text/javascript">

var data = {
"total": 3, "rows": [
{ "ID": "1", "Type": "1", "Description": "AAA" },
{ "ID": "2", "Type": "2", "Description": "BBB" },
{ "ID": "3", "Type": "3", "Description": "CCC" }
]
}

$(function () {
$('#dg').edatagrid({
onBeforeEdit: function (index, row) {
var Description = $(this).edatagrid('getColumnOption', 'Description');
if (row.Type == '2') {
Description.editor = null;
} else {
Description.editor = {
type: 'textbox'
}
}
},
onBeginEdit: function (index, row) {
var Type = $(this).edatagrid('getEditor', { index: index, field: 'Type' });
var Description = $(this).edatagrid('getColumnOption', 'Description');

$(Type.target).combobox({
value: row.Type,
onChange: function (value) {
if (value == '2') {
Description.editor = null;
} else {
Description.editor = {
type: 'textbox'
}
}

setTimeout(function () {
$('#dg').edatagrid('saveRow', index).edatagrid('editRow', index);
}, 0);
}
})
},
filterBtnIconCls: 'icon-filter',
singleSelect: true,
toolbar: '#tb',
idField: 'ID',
data: data,
columns: [[
{
field: 'Type', title: 'Type', width: 100,
editor: {
type: 'combobox',
options: {
editable: false,
required: true,
valueField: 'value',
textField: 'value',
data: [
{ value: '1' },
{ value: '2' },
{ value: '3' }
]
},
}
},

{ field: 'Description', title: 'Description', width: 200 }
]]
});
});
</script>

<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
onclick="javascript:$('#dg').edatagrid('addRow')">Add</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" plain="true"
onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>

<div style="margin-left:45px;margin-right:45px;margin-top:20px" border="false" fit="true">
<table id="dg" border="true">
</table>
</div>
</body>

</html>
<html>


	Logged