This example shows how to build the cascade editors according to some logic.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - 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 = [
{ labassist: '1', setup: 'setup1', setupname: 'Setupname1' },
{ labassist: '0', setup: 'setup2', setupname: 'Setupname2' },
{ labassist: '1', setup: 'setup1', setupname: 'Setupname1' },
{ labassist: '0', setup: 'setup4', setupname: 'Setupname4' },
{ labassist: '0', setup: 'setup5', setupname: 'Setupname5' }
];
var listsetups = [
{ id: 'setup1', 'setupname': 'Setupname1' },
{ id: 'setup2', 'setupname': 'Setupname2' },
{ id: 'setup3', 'setupname': 'Setupname3' },
{ id: 'setup4', 'setupname': 'Setupname4' },
{ id: 'setup5', 'setupname': 'Setupname5' }
];
$.extend($.fn.datagrid.defaults.editors, {
check: {
init: function (container, options) {
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
input.checkbox(options || {});
return input;
},
getValue: function (target) {
return $(target).checkbox('options').checked ? '1' : '0';
},
setValue: function (target, value) {
if (parseInt(value)) {
$(target).checkbox('check');
} else {
$(target).checkbox('uncheck');
}
},
resize: function (target, width) {
$(target).next().css('height', 20);
}
}
});
$(function () {
var dg = $('#dg-manageruns');
dg.datagrid({
columns: [[
{
field: 'labassist', title: 'Assist', align: 'center'
},
{
field: 'setup', title: 'Setup', width: 180
}
]],
data: data,
singleSelect: true,
onLoadSuccess: function (data) {
for (var i = 0; i < $(this).datagrid('getData').rows.length; i++) {
$(this).datagrid('beginEdit', i);
}
},
onBeforeEdit: function (index, row) {
var opts = $(this).datagrid('getColumnOption', 'labassist');
opts.editor = {
type: 'check',
options: {
value: row.labassist,
checked: row.labassist == '1',
disabled: row.setup != 'setup1'
}
}
var opts = $(this).datagrid('getColumnOption', 'setup');
opts.editor = {
type: 'combobox',
options: {
value: row.setup,
valueField: 'id', textField: 'setupname', data: listsetups, panelWidth: 320,
limitToList: true,
editable: false,
onChange: function (value) {
var tr = $(this).closest('.datagrid-row');
var index = tr.attr('datagrid-row-index');
setTimeout(function () {
dg.datagrid('endEdit', index).datagrid('beginEdit', index);
}, 0)
}
}
}
}
})
})
</script>
</head>
<body>
<table id="dg-manageruns" style="width:700px;height:250px"></table>
</body>
</html>
