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>
