EasyUI Forum
April 28, 2024, 05:49:01 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: 1 [2]
16  General Category / EasyUI for jQuery / Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid on: January 30, 2023, 10:10:47 AM
Here is code that only shows the JS check/uncheck for grid 1 and grid 2....you can create for grid 3 and 4 just like 1 and 2.
also, put the grids in a tab div:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CheckBox Selection on 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 type="text/javascript">
    var data1 = [
      {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
      {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
      {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
    ];
    var data2 = [
      {"productid":"FI-SW-01","productname":"Koi"},
      {"productid":"K9-DL-01","productname":"Dalmation"},
      {"productid":"RP-SN-01","productname":"Rattlesnake"},
      {"productid":"RP-LI-02","productname":"Iguana"},
      {"productid":"FL-DSH-01","productname":"Manx"},
      {"productid":"FL-DLH-02","productname":"Persian"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot"}
    ]

    var data3 = [
      {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
      {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
      {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
    ];

    var data4 = [
      {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
      {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
      {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
    ];

    // For grid one
    $(function(){
      $('#datagrid1').datagrid({
        onCheck:function(index, row){
           var dg2 = $('#datagrid2');
           var grid2 = dg2.datagrid('getRows');
           $.each(grid2 , function(index2, val2) {
             if (val2.productid == row['productid']){
                   dg2.datagrid('checkRow', index2);
                return true;
             }
           });

           var dg3 = $('#datagrid3');
           var grid3 = dg3.datagrid('getRows');
           $.each(grid3 , function(index3, val3) {
             if (val3.productid == row['productid']){
                   dg3.datagrid('checkRow', index3);
                return true;
             }
           });

           var dg4 = $('#datagrid4');
           var grid4 = dg4.datagrid('getRows');
           $.each(grid4 , function(index4, val4) {
             if (val4.productid == row['productid']){
                   dg4.datagrid('checkRow', index4);
                return true;
             }
           });
        },
        onUncheck:function(index, row){
           var dg2 = $('#datagrid2');
           var grid2 = dg2.datagrid('getRows');
           $.each(grid2 , function(index2, val2) {
             if (val2.productid == row['productid']){
                   dg2.datagrid('uncheckRow', index2);
                return true;
             }
           });

           var dg3 = $('#datagrid3');
           var grid3 = dg3.datagrid('getRows');
           $.each(grid3 , function(index3, val3) {
             if (val3.productid == row['productid']){
                   dg3.datagrid('uncheckRow', index3);
                return true;
             }
           });

           var dg4 = $('#datagrid4');
           var grid4 = dg4.datagrid('getRows');
           $.each(grid4 , function(index4, val4) {
             if (val4.productid == row['productid']){
                   dg4.datagrid('uncheckRow', index4);
                return true;
             }
           });
        }
      })
    })

// For grid two
    $(function(){
      $('#datagrid2').datagrid({
        onCheck:function(index, row){
           var dg1 = $('#datagrid1');
           var grid1 = dg1.datagrid('getRows');
           $.each(grid1 , function(index1, val1) {
             if (val1.productid == row['productid']){
                   dg1.datagrid('checkRow', index1);
                return true;
             }
           });

           var dg3 = $('#datagrid3');
           var grid3 = dg3.datagrid('getRows');
           $.each(grid3 , function(index3, val3) {
             if (val3.productid == row['productid']){
                   dg3.datagrid('checkRow', index3);
                return true;
             }
           });

           var dg4 = $('#datagrid4');
           var grid4 = dg4.datagrid('getRows');
           $.each(grid4 , function(index4, val4) {
             if (val4.productid == row['productid']){
                   dg4.datagrid('checkRow', index4);
                return true;
             }
           });
        },
        onUncheck:function(index, row){
           var dg1 = $('#datagrid1');
           var grid1 = dg1.datagrid('getRows');
           $.each(grid1 , function(index1, val1) {
             if (val1.productid == row['productid']){
                   dg1.datagrid('uncheckRow', index1);
                return true;
             }
           });

           var dg3 = $('#datagrid3');
           var grid3 = dg3.datagrid('getRows');
           $.each(grid3 , function(index3, val3) {
             if (val3.productid == row['productid']){
                   dg3.datagrid('uncheckRow', index3);
                return true;
             }
           });

           var dg4 = $('#datagrid4');
           var grid4 = dg4.datagrid('getRows');
           $.each(grid4 , function(index4, val4) {
             if (val4.productid == row['productid']){
                   dg4.datagrid('uncheckRow', index4);
                return true;
             }
           });
        }
      })
    })
  </script>
</head>
<body>
  <div class="easyui-tabs" style="width:100%;height:515px;border-width:0;">
    <table id="datagrid1" class="easyui-datagrid" title="DataGrid1" style="width:700px;height:250px"
        data-options="rownumbers:true,data:data1">
      <thead>
        <tr>
          <th data-options="field:'ck',checkbox:true"></th>
          <th data-options="field:'itemid',width:80">Item ID</th>
          <th data-options="field:'productid',width:100">Product</th>
          <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
          <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
          <th data-options="field:'attr1',width:220">Attribute</th>
          <th data-options="field:'status',width:60,align:'center'">Status</th>
        </tr>
      </thead>
    </table>
    <table id="datagrid2" class="easyui-datagrid" title="DataGrid2" style="width:700px;height:250px"
        data-options="rownumbers:true,data:data2">
      <thead>
        <tr>
          <th data-options="field:'ck',checkbox:true"></th>
          <th data-options="field:'productid',width:150">Product Id</th>
          <th data-options="field:'productname',width:200">Product Name</th>
      </thead>
    </table>

    <table id="datagrid3" class="easyui-datagrid" title="DataGrid1" style="width:700px;height:250px"
        data-options="rownumbers:true,data:data3">
      <thead>
        <tr>
          <th data-options="field:'ck',checkbox:true"></th>
          <th data-options="field:'itemid',width:80">Item ID</th>
          <th data-options="field:'productid',width:100">Product</th>
          <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
          <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
          <th data-options="field:'attr1',width:220">Attribute</th>
          <th data-options="field:'status',width:60,align:'center'">Status</th>
        </tr>
      </thead>
    </table>

    <table id="datagrid4" class="easyui-datagrid" title="DataGrid1" style="width:700px;height:250px"
        data-options="rownumbers:true,data:data4">
      <thead>
        <tr>
          <th data-options="field:'ck',checkbox:true"></th>
          <th data-options="field:'itemid',width:80">Item ID</th>
          <th data-options="field:'productid',width:100">Product</th>
          <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
          <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
          <th data-options="field:'attr1',width:220">Attribute</th>
          <th data-options="field:'status',width:60,align:'center'">Status</th>
        </tr>
      </thead>
    </table>
  </div>  

</body>
</html>
17  General Category / EasyUI for jQuery / Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid on: January 30, 2023, 09:55:49 AM
It is going to take me some time to convert my code over from a database driven one to one just using the json files like you are using....
Give me some time and I'll show you what I have....thanks for your help and your patience
18  General Category / EasyUI for jQuery / Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid on: January 26, 2023, 01:35:10 PM
Hey,
so what you posted for me worked for 2 grids as a test. So, my page actually has 4 grids and all are in tabs. If a checkbox is checked in grid 1, if that same record is in any of the other 3 grids, it will be checked...if check on in grid 3 has to check it in the other 3 grids if it is there.
I took your code and tried to put in 2 other tabs and add in the onCHeck and onUncheck and when I did this for all 4 grids, I got the infinite loop again....
Thoughts?
thanks
19  General Category / EasyUI for jQuery / check/uncheck a checkbox in a datagrid will check/un in another datagrid on: January 24, 2023, 11:40:02 AM
I have a datagrid and use the onCheck and onUncheck  methods for a datagrid

onCheck:function(index, row){
}

onUncheck:function(index, row){
}

Inside either one of these above, I put in a simple few lines of code to get me the info for the 2nd datagrid so I can do a call to either check or uncheck the same checkbox in that grid

dg2.datagrid('getRows');
after i get the rows from the 2nd grid, I loop over the rows and figure out in grid 2 which row matches the one checked/unchecked in grid1 then I run the datagrid('checkRow', index) or ('uncheckRow', index) code.


onUncheck:function(index, row){
   
     var dg2 = $('#datagrid2');
     var grid2 = dg2.datagrid('getRows');
     $.each(grid2 , function(index2, val2) {
     if (val2.id == row['id']){
           dg2.datagrid('uncheckRow', index2);
        return true;
     }
     });
}

If I use console.log in this .each, i get the info looping the right amount of times....as soon as I put in the uncheckRow code, my code goes into an js infinite loop in devtools....the checkboxes might still work, but they also might not work...all depends on what position the sun is in that day....lol

HAS ANYONE used the checkbox of one grid row to do the same thing in a separate grids grid row?
seems pretty straight forward to me so not sure why this is so werid...

Thanks for any help
20  General Category / General Discussion / Re: update datagrid cell text on: December 30, 2022, 08:15:50 AM
I am wondering if other parts of my code were broken and caused the updateRow to not work, because this morning I put this code back into my codebase and it worked:
$('#dg').datagrid('updateRow', {
    index: parent_row,
    row: {
        delta_allocation: 2200,
        site_allocation: 2200
    }
});
21  General Category / General Discussion / Re: update datagrid cell text on: December 30, 2022, 05:52:07 AM
I am not clear how adding this to the grid: 'autoUpdateDetail' is going to help...I added that to the data grid attribute list, but nothing happened.
I have tried this below:
$('#dg').datagrid('getRows')[parent_row]['site_allocation'] = 22000;

console.log('site alloc: ' + $('#dg').datagrid('getRows')[parent_row]['site_allocation']);

when I look at the console, I see the value is now 22000, but in the datagrid it is still showing the old data value...I thought the code above would work, but it did not.
22  General Category / General Discussion / update datagrid cell text on: December 29, 2022, 01:16:06 PM
Hey
so i have a grid and a subgrid. I have the ability to edit a numeric field in the subgrid. When I do this,  I need to add the field in the parent grid and the sub grid. I have done that in a js function. Once this new number is calculated, I need to update the value and the text display in the parent grid cell.
I set up a read only editor on the parent grid cell if that helps...

I have done this using the .datagrid('updateRow', { } code, but this code seems to update the parent grid and then close the sub grid that was expanded so I lose the actual number I edited in the sub grid.


Any thought how to update the text display in a cell where it will not close/hide the subgrid, or keep the updateRow code from closing the subgrid expantion?

thanks
Pages: 1 [2]
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!