Title: Checkall in TreeGrid
Post by: thiago_brum on February 27, 2024, 05:40:56 AM
Hello. I need a checkbox column in a treegrid where will only be displayed if the value of another column is different of blank. I used the formatter function and it worked. However, when making this change the checkboxall disappeared from the header. What do I need to do to make it appear?
My code:
$('#treegrid_faturar_bof_agente_medicao').treegrid({ columns: [ [{ field: 'checked', formatter: function(value, row, index) { if (row.chave_faturamento != "") { return '<input type="checkbox" class="easyui-checkbox" />'; } } },{ field: 'nom_item', title: 'Agente X Mês', width: 730 } ] ], singleSelect: true, checkOnSelect: false, selectOnCheck: false });
Title: Re: Checkall in TreeGrid
Post by: jarry on February 27, 2024, 08:15:01 PM
The 'checkbox' selection is the built-in functionality in the treegrid component. Please look at this example: https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=material-teal&dir=ltr&pitem=Custom%20CheckBox&sort=asc If you want to custom the checkbox column, please define the 'title' property for your checkbox column. { field: 'checked', title: '<input type="checkbox">', formatter: ... }
Title: Re: Checkall in TreeGrid
Post by: thiago_brum on February 28, 2024, 06:17:07 AM
Thanks for your help. The built-in functionality set the checkbox next to the text. I need the checkbox in a unique column. I tested the title option but when clicking on the checkbox nothing happens (not even the check is carried out). I need the checkall/uncheckall functionality. Its possible?
Title: Re: Checkall in TreeGrid
Post by: jarry on February 29, 2024, 01:19:31 AM
Please refer to this example. <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>Custom CheckBox in TreeGrid - 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 = [{ "id": 1, "name": "C", "size": "", "date": "02/19/2010", "children": [{ "id": 2, "name": "Program Files", "size": "120 MB", "date": "03/20/2010", "children": [{ "id": 21, "name": "Java", "size": "", "date": "01/13/2010", "state": "closed", "children": [{ "id": 211, "name": "java.exe", "size": "142 KB", "date": "01/13/2010" }, { "id": 212, "name": "jawt.dll", "size": "5 KB", "date": "01/13/2010" }] }, { "id": 22, "name": "MySQL", "size": "", "date": "01/13/2010", "state": "closed", "children": [{ "id": 221, "name": "my.ini", "size": "10 KB", "date": "02/26/2009" }, { "id": 222, "name": "my-huge.ini", "size": "5 KB", "date": "02/26/2009" }, { "id": 223, "name": "my-large.ini", "size": "5 KB", "date": "02/26/2009" }] }] }, { "id": 3, "name": "eclipse", "size": "", "date": "01/20/2010", "children": [{ "id": 31, "name": "eclipse.exe", "size": "56 KB", "date": "05/19/2009" }, { "id": 32, "name": "eclipse.ini", "size": "1 KB", "date": "04/20/2010" }, { "id": 33, "name": "notice.html", "size": "7 KB", "date": "03/17/2005" }] }] }] $(function () { $('#tg').treegrid({ columns: [[ { field: 'checked', checkbox: true, styler: function (value, row) { var names = ['Java', 'C', 'eclipse.exe', 'eclipse.ini']; if ($.inArray(row.name, names) == -1) { return { class: 'hidden' }; } } }, { field: 'name', title: 'Agente X Mês', width: 230 } ]], singleSelect: true, selectOnCheck: false, checkOnSelect: false, onLoadSuccess: function(){ $(this).treegrid('getPanel').find('.hidden .datagrid-cell-check').html('') }, onCheckAll: function(rows){ const data = rows.filter(row=>{ var names = ['Java', 'C', 'eclipse.exe', 'eclipse.ini']; if ($.inArray(row.name, names) >= 0) { return true; } else { return false; } }) const state = $.data(this, 'datagrid'); state.checkedRows = data; } }) }) </script> <style> .hidden .datagrid-cell-check { visibility: hidden; } </style> </head>
<body> <table id="tg" title="Folder Browser" style="width:700px;height:250px" data-options=" data: data, rownumbers: true, idField: 'id', treeField: 'name', singleSelect: true "></table>
</body>
</html>
Title: Re: Checkall in TreeGrid
Post by: thiago_brum on February 29, 2024, 07:48:03 AM
Thanks a lot for the help. We have one last problem. When hiding the datagrid-cell-check, the formatting of the columns is lost (see attached image). Can you help?
Title: Re: Checkall in TreeGrid
Post by: jarry on February 29, 2024, 07:45:25 PM
This example works fine. <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>Custom CheckBox in TreeGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/material-blue/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 = { "total": 7, "rows": [ { "id": 2, "name": 'Dias' }, { "id": 3, "name": 'NECTARVIS' }, { "id": 4, "name": 'NECTARVIS-PGG', "_parentId": 3 }, { "id": 5, "name": 'NECTARVIS-08.602.452', "_parentId": 4 }, { "id": 6, "name": '% Peso Consumo', "_parentId": 4, "chave_faturamento": true }, { "id": 7, "name": 'Contratado', "_parentId": 4, "chave_faturamento": true }, { "id": 8, "name": 'Flex Minimo', "_parentId": 4 }, ] } $(function () { $('#tg').treegrid({ columns: [[ { field: 'checked', checkbox: true, styler: function (value, row) { if (!row.chave_faturamento) { return { class: 'hidden' }; } } }, { field: 'name', title: 'Agente X Mês', width: 400 } ]], singleSelect: true, selectOnCheck: false, checkOnSelect: false, onLoadSuccess: function () { $(this).treegrid('getPanel').find('.hidden .datagrid-cell-check').html('') }, onCheckAll: function (rows) { const data = rows.filter(row => row.chave_faturamento) const state = $.data(this, 'datagrid'); state.checkedRows = data; } }) }) </script> <style> .hidden .datagrid-cell-check { visibility: hidden; } </style> </head>
<body> <table id="tg" title="Folder Browser" style="width:700px;height:450px" data-options=" data: data, rownumbers: true, idField: 'id', treeField: 'name', singleSelect: true "></table>
</body>
</html>
|