jQuery Easy UI + treegrid + checkbox

Question

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....

Answer 1

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'));

        });
    });