EasyUI Forum
November 28, 2021, 10:56:56 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: datagrid + editor  (Read 631 times)
rezzonico
Full Member
***
Posts: 165


View Profile
« 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: 2016


View Profile Email
« 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
rezzonico
Full Member
***
Posts: 165


View Profile
« Reply #2 on: October 19, 2021, 03:02:47 AM »

Thanks !

Regards
Miche
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!