I am using "jQuery Easy UI" in my website. I need treegrid in a page with checkbox for each row (The same way as "jQuery Easy UI"-tree provedes).
I needs the same tree to be appear with grid in treegrid widget, instead of
Any suggestion is most welcome....
thanks....
add the following code to have checkbox column to your tree table
$(function() {
columns:[[
{field:'code',title:'Code',width:100,align:'left'},
{field:'name',title:'Name',width:100,align:'right'},
{field:'addr',title:'choose',width:80},
{field:'col4',title:'col4',width: 100,
editor: {
type: 'checkbox',
options: {on: '1', off: '0'}
},
formatter: function (value, row) {
if (! row.leaf) {
if (value == 1) {
return '<img src="../resources/image/checked.jpg"/>';
} else {
return '<img src="../resources/image/unchecked.jpg"/>';
}
} else {
return'';
}
}
}
]],
//Edit the end of the line,
// use click event first perform onAfterEdit event before the event trigger
onClickRow: function (row) {
var rowIndex = row.id;
if (lastIndex != rowIndex) {
$('#tablegridJS').treegrid('endEdit', lastIndex);
}
},
//Line editing,
//use double-click event
onDblClickRow: function (row) {
var rowIndex = row.id;
if (lastIndex != rowIndex) {
$('#tablegridJS').treegrid('endEdit', lastIndex);
$('#tablegridJS').treegrid('beginEdit', rowIndex);
lastIndex = rowIndex;
}
},
OnBeforeEdit: function (row) {
console.log(row);
beforEditRow(row); // Here are the main steps and code functions
},
OnAfterEdit: function (row, changes) {
console.log(change);
var rowId = row.id;
$.ajax ({
url: "saveProductConfig.action",
data: row,
success: function (text) {
$.Messager.alert ('message', 'text', 'info');
}
});
},
onClickCell: function(field, row) {
if(field=='col4'){
var rowIndex = row.id;
if (lastIndex != rowIndex) {
$('#tablegridJS').treegrid('endEdit', lastIndex);
$('#tablegridJS').treegrid('beginEdit', rowIndex);
console.log($('#tablegridJS').treegrid('options'));
options = $('#tablegridJS').treegrid('getEditor',{
index:row.id, // pass the editing row id, defined via 'idField' property
field:'col4'
});
//console.log($(options.target).attr('checked',true));
console.log(options.target);
if(options.oldHtml=='<img src="../resources/image/unchecked.jpg">'){
$(options.target).attr('checked',true);
}else if(options.oldHtml=='<img src="../resources/image/checked.jpg">'){
$(options.target).attr('checked',false);
}
lastIndex = rowIndex;
}
}
}
});
function beforEditRow (row) { // This is the core, very useful if the same needs, then you can learn to achieve
//check box
var libraryCoclum = $('#tablegridJS').treegrid('getColumnOption', 'col4');
//checkbox object
var checkboxOptionsObj = new Object ();
checkboxOptionsObj.on = '1 ';
checkboxOptionsObj.off = '0 ';
//add checkbox object on edit
var checkboxEditorObj = new Object ();
checkboxEditorObj.type = 'checkbox';
checkboxEditorObj.options = checkboxOptionsObj;
//ckeck whether to make checkbox or combo box editable
if (row.leaf) {
libraryCoclum.editor = null;
typeCoclum.editor = comboboxEditorObj;
} else {
libraryCoclum.editor = checkboxEditorObj;
typeCoclum.editor = null;
}
}
$("#bteasyui").click(function(){
var dataSelected = "";
//$("#tablegridJS").treegrid('selectAll');
nodes = $("#tablegridJS").treegrid('getSelection');
console.log(nodes);
$('#tablegridJS').treegrid('beginEdit', nodes.id);
dataSelected = $("#tablegridJS").treegrid("check",'01');
console.log($("#tablegridJS").treegrid('getChecked'));
});
});