Regarding form data

In my case, the data returned is always a object, ie
$('#fm').form('load', [{name: 'xxx}]);

example of returned data
[
{"Company":"Company 1","Phone":"01234 567890","Email":"jim@yahoo.com"}
{"Company":"Company 2 ,"Phone":"01234 012345","Email":"bill@yahoo.com"}
]

I would like to use the email address, of the first element of the returned array data (in the above example "jim@yahoo.com" in a form field.

Suggestions appreciated

Thank you

setText and setValue does this trick

$(d).textbox('setText', 99).textbox('setValue', 99);

Inorder to keep a textbox value and the displayed value in sync, I need to issue 2 statements

        // As a test - populate the value with 99
        $(this).find("input[name='seq1']").attr("value",99);
        // Value changes but screen doesn't update

        // Using textbox method updates the screen but not the value
        $("#seq1").textbox('setText', 99);

Is there a way in which both the value and screen can be updated with one statement ?

Thank you

Hi

Thanks for the example..

I'm now trying to set a value (using the "setvalue" method) to the qty0 textbox,  on name change

ie...

Code:

      $('<input>').attr('name','name'+counter).appendTo(td).textbox({
        onChange: function(value){
          console.log('changed:'+value);
      [b] $('#qty0').textbox('setValue', "TEST DATA");[/b] // <--- This doesnt seem to work ???
        }
      });

What am i doing wrong ?

Thank you

Hello

Removig -  class="easyui-textbox" from my input statement resolves the problem, however thw text boxes revert back to loosing the EasyUI formating

Ie back where i started - Is there a different solution ??

Thank you

Hello

The formating is now working well thanks to Jarry, however I now need an event to fire everytime an item changes.

The EasyUI event for textbox changes, will not work as the textbox name changes as the list builds :-

  $('#name').textbox({
     onChange: function(value){
      console.log('The value has been changed to ' + value);
     }
   });

ie the row number is appended to name, as the lists builds

I have therefore added the following event to my previously posted code

   $("table.order-list").on("change", 'input[name^="item' + counter + '"]', function (event) {
      console.log("Changed !");
          });

which i believe should work, but doesn't ??

I would appreciate suggestions as to why this isnt working

Thank you

Such a simple fix - works well !

Thank you Jarry

Hello

I am using EasyUI with Tabs to create a form..

I found an excellet piece of Javascript to help add lines to a dynamic form, I have adopted to meet my requirements and while it works very well, it seems that the EasyUI formating for input boxes and buttons no longer work on added lines

The attached image shows my problem, the 1st line is generated when the form loads, additional lines have been added with the Javascript below :-

$(document).ready(function () {
  var counter = 0;
  counter = $('#myTable tr').length - 2;

    $("#addrow").on("click", function () {
   
        var newRow = $("<tr>");
        var cols = "";

       cols += '<td width="100"> <select class="easyui-combobox" name="func' + counter + '" style="width:100px;" required>'
                  +'<option value = "Add" selected>Add</option>'
               +'<option value = "Remove">Remove</option> </select> </td>';
            
        cols += '<td><input class="easyui-textbox" style="width:100px" name="name' + counter + '"/></td>';
        cols += '<td><input class="easyui-textbox" style="width:50px" name="qty' + counter + '"/></td>';

        cols += '<td><input type="button" id="ibtnDel"  value="Delete"></td></tr>';
                 
      newRow.append(cols);
       
        $("table.order-list").append(newRow);
        counter++;
        if (counter == 10) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
    });

    $("table.order-list").on("click", "#ibtnDel", function (event) {
        $(this).closest("tr").remove();
        counter --;
        if (counter < 10) $('#addrow').attr("disabled", false).prop('value', "Add Row");
    });
});

Im looking for suggestions how I can keep the EasyUI formating, and also use the EasyUI buttons, while maintaining the same functionality, when adding additional lines

Assistance is appreciated

Thank you

Hello

I'm looking for an example of "Row Editing in DataGrid" interfacing with a MySQL database

Does anyone know if such an example exist ?

Thank you

Hi Jarry

Thank you taking the time to reply, and confirming my code was in fact OK, this prompted me to look elsewhere...

The actual problem was the [] were missing from the returned Json data !..

Thanks again !

Hello

I have noticed the following error, when expanding the 2nd level.....maybe this helps identify my problem

TypeError: rows is undefinedjquery.easyui.min.js:12284:13

    jQuery 14
        renderTable
        render
        _79d
        loadData
        each
        each
        loadData
        datagrid
        _882
        success
        i
        fireWith
        y
        c

Any suggestions would be appreciated

Thank you

Hello

The code below returns the JSON data for the 2nd level of a nested grid using url:'get_notes.php', however the respective fields on the grid are not being populated. (The subgrid header is showing OK)

Where am I going wrong ?


        <script type="text/javascript">
        var conf = {
         
            options:{
                fitColumns:true,
                columns:[[
                    {field:'Customer',title:'Acct',width:10},
                    {field:'Cus_Name',title:'Name',width:100},
                ]],
            },
         
            subgrid:{
                options:{
                    fitColumns:true,
               singleSelect:true,
               url:'get_docs.php',
                    foreignField:'Customer',
                            columns:[[
                                {field:'Doc',title:'Doc',width:6},
                        {field:'Doc_Type',title:'T',width:3,align:'center'},
                        {field:'Doc_Date',title:'Doc Date',width:10,align:'center'},
                        {field:'Due',title:'Due Date',width:10,align:'center'},
                            ]],
            },      
            
              subgrid:{
                    options:{
                    fitColumns:true,
               singleSelect:true,
               url:'get_notes.php',
                    foreignField:'Doc',
                            columns:[[
            {field:'Doc',title:'Doc',width:20},
                                {field:'Notedate',title:'Date',width:30},
                                {field:'Note',title:'Note',width:200},
                            ]]
                   }
      }
              }   
                  
       };
 
        $(function(){
            $('#dg').datagrid({
                title:'Accounts',
                width:850,
                height:450
            }).datagrid('subgrid', conf);
        });
        </script>

Thank you

[select function]

Hello

I am trying to return data from a subgrid based upon the examples provided, however the data is not being returned. I am however able to return data from the top level grid, therefore i think my selection code must be incorrect


select function
      function getSelected(){
         var row = $('#tt').datagrid('getSelected');
         if (row){
            alert('Name:'+row.Name+"\nAddress:"+row.Address+"\nTelephone:"+row.Tel);
         }
      }

subgrid function

            $(function(){
                $('#dg').datagrid({
                    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.datagrid({
                            url:'get_name.php?name='+row.Name,
                            fitColumns:true,
                            singleSelect:true,
                            rownumbers:true,
                     striped:true,
                            loadMsg:'',
                            height:'auto',
                            columns:[[
                                {field:'Name',title:'Name',width:10},
                                {field:'Address',title:'Address',width:10,align:'center'},
                        {field:'Tel',title:'Telephone',width:10,align:'center'}
                     ]],   
                            onResize:function(){
                                $('#dg').datagrid('fixDetailRowHeight',index);
                            },
                            onLoadSuccess:function(){
                                setTimeout(function(){
                                    $('#dg').datagrid('fixDetailRowHeight',index);
                                },0);
                            }
                        });
                        $('#dg').datagrid('fixDetailRowHeight',index);
                    }
                });
            });

Suggestions appreciated
Thank you

Solved - just spotted parameter.....halign:centre !

Hello

I now need to align the column values to the right, but would like to leave the column header aligned to the centre..

I have tried adding align:right to the formatter however this seems to be ignored ??
 
columns:[[
      {field:'orderid',title:'Order ID',width:200},
      {field:'quantity',title:'Quantity',width:100,align:'center',
        formatter(value){
          if (value<0){
            return '<span style="color:red;align:right">'+value+'</span>'
          } else {
            return '<span style="align:right">'+value+'</span>'
          }
        }
      },

Any suggestions ?
Thank you