EasyUI Forum
April 12, 2024, 05:25:31 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1] 2 3 ... 10
 1 
 on: February 29, 2024, 07:45:25 PM 
Started by thiago_brum - Last post by jarry
This example works fine.
Code:
<!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>

 2 
 on: February 29, 2024, 07:48:03 AM 
Started by thiago_brum - Last post by thiago_brum
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?

 3 
 on: February 29, 2024, 01:19:31 AM 
Started by thiago_brum - Last post by jarry
Please refer to this example.
Code:
<!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>

 4 
 on: February 28, 2024, 06:17:07 AM 
Started by thiago_brum - Last post by thiago_brum
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?

 5 
 on: February 27, 2024, 08:15:01 PM 
Started by thiago_brum - Last post by jarry
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.
Code:
{
field: 'checked',
title: '<input type="checkbox">',
formatter: ...
}

 6 
 on: February 27, 2024, 05:40:56 AM 
Started by thiago_brum - Last post by thiago_brum
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
                });

 7 
 on: February 21, 2024, 12:13:49 AM 
Started by jega - Last post by jarry
Please show an example to demonstrade your issue.

 8 
 on: February 21, 2024, 12:11:49 AM 
Started by BinaryCode - Last post by jarry
Please call the 'check' or 'uncheck' methods instead.

Code:
that.chkEnterAlarm.checkbox('check');
that.chkEnterAlarm.checkbox('uncheck');

 9 
 on: February 21, 2024, 12:05:57 AM 
Started by Wojak - Last post by jarry
Please look at this code, it works fine.
Code:
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>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>
$(function () {
$('#dg').datagrid({
columns: [[
{ field: 'nazwa', title: 'Nazwa', width: '160px', halign: 'center' },
{ field: 'opis', title: 'Opis', width: '160px', halign: 'center' },
{
field: 'typ', title: 'Typ', width: '160px', halign: 'center',
styler: function (value, row, index) {
if (!row.idProdukt > 0) {
return 'background:#FFC300;';
}
}
},
{ field: 'nrKatalogowy', title: 'Nr katalogowy', width: '160px', halign: 'center' },
{
field: 'producent', title: 'Producent', width: '120px', halign: 'center',
styler: function (value, row, index) {
if (!row.idProducent > 0) {
return 'background:#FFC300;';
}
}
},
{ field: 'ilosc', title: 'Ilość', width: '50px', halign: 'center', align: 'right' },
{
field: 'jm', title: 'J.m.', width: '50px', halign: 'center',
styler: function (value, row, index) {
if (!row.idJm > 0) {
return 'background:#FFC300;';
}
}
},
{ field: 'cena', title: 'Cena', width: '80px', halign: 'center' },
{
field: 'rabat', title: 'Rabat', width: '50px', halign: 'center', align: 'right',
formatter: function (value, row, index) {
return (value || 0) + '%';
}
},
{ field: 'wartosc', title: 'Wartość', width: '80px', halign: 'center' },
{
field: 'waluta', title: 'Waluta', width: '60px', halign: 'center',
styler: function (value, row, index) {
if (!row.idWaluta > 0) {
return 'background:#FFC300;';
}
}
},
]],
idField: 'id',
rownumbers: true,
singleSelect: true
});
})
function loadData() {
$('#dg').datagrid('clearSelections').datagrid('loadData', { total: 0, rows: [] });
}
</script>
</head>

<body>
<button onclick="loadData()">LoadData</button>
<table id="dg"></table>

</body>

</html>

 10 
 on: February 19, 2024, 05:20:33 PM 
Started by BinaryCode - Last post by BinaryCode

        that.chkEnterAlarm.checkbox('options').checked=data.enter_alarm===1;
        that.chkExitAlarm.checkbox('options').checked=data.exit_alarm===1;
        that.chkSendToWhatsApp.checkbox('options').checked=data.send_alarm_to_whatsapp===1;
       


why above not working event if data.enter_alarm =1, data.exit_alarm=1, but state not checked,

how to set checked programmatically?, i don't use check method

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