Javascript jQuery简易用户界面+；treegrid+；复选框

我正在我的网站上使用“jqueryeasyui”。我需要一个页面中的treegrid，每行带有复选框（与“jqueryeasyui”-tree provedes相同）

我需要在treegrid小部件中与grid一起显示相同的树，而不是

任何建议都欢迎

---

谢谢……

添加以下代码，以便将复选框列添加到树表中

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

        });
    }); 

$（函数（）{
列：[[
{字段：'code'，标题：'code'，宽度：100，对齐：'left'}，
{字段：'name'，标题：'name'，宽度：100，对齐：'right'}，
{字段：'addr'，标题：'choose'，宽度：80}，
{字段：'col4'，标题：'col4'，宽度：100，
编辑:{
键入：“复选框”，
选项：{on:'1'，off:'0'}
}, 
格式化程序：函数（值，行）{
如果（！row.leaf）{
如果（值==1）{
返回“”；
}否则{
返回“”；
} 
}否则{
返回“”；
} 
}
} 
]], 
//编辑行的结尾，
//在事件触发器之前，使用click event first对AfterEdit事件执行操作
onClickRow:函数（行）{
var rowIndex=row.id；
如果（lastIndex！=rowIndex）{
$（'tablegridJS'）.treegrid（'endEdit'，lastIndex）；
} 
}, 
//行编辑，
//使用双击事件
onDblClickRow:函数（行）{
var rowIndex=row.id；
如果（lastIndex！=rowIndex）{
$（'tablegridJS'）.treegrid（'endEdit'，lastIndex）；
$（'tablegridJS'）.treegrid（'beginEdit'，rowIndex）；
lastIndex=行索引；
} 
}, 
OnBeforeEdit:函数（行）{
控制台日志（行）；
beforEditRow（row）；//以下是主要步骤和代码函数
},
OnAfterEdit:函数（行，更改）{
控制台日志（更改）；
var rowId=row.id；
$.ajax（{
url:“saveProductConfig.action”，
数据：世界其他地区，
成功：函数（文本）{
$.Messager.alert（'message'，'text'，'info'）；
}
}); 
},
onClickCell：函数（字段、行）{
如果（字段=='col4'）{
var rowIndex=row.id；
如果（lastIndex！=rowIndex）{
$（'tablegridJS'）.treegrid（'endEdit'，lastIndex）；
$（'tablegridJS'）.treegrid（'beginEdit'，rowIndex）；
console.log（$（'#tablegridJS'）.treegrid（'options'））；
options=$（'#tablegridJS'）.treegrid（'getEditor'{
index:row.id，//传递通过“idField”属性定义的编辑行id
字段：'col4'
});
//log（$（options.target）.attr（'checked'，true））；
console.log（options.target）；
如果（options.oldHtml==''）{
$（options.target）.attr（'checked'，true）；
}else if（options.oldHtml==''）{
$（options.target）.attr（'checked'，false）；
}
lastIndex=行索引；
} 
}           
}
});  
函数beforEditRow（row）{//这是它的核心，如果需要的话非常有用，那么可以学习实现
//复选框
var libraryCoclum=$（'#tablegridJS'）.treegrid（'getColumnOption'，'col4'）；
//复选框对象
var checkboxOptionsObj=新对象（）；
checkboxOptionsObj.on='1'；
checkboxOptionsObj.off='0'；
//编辑时添加复选框对象
var checkboxEditorObj=新对象（）；
checkboxEditorObj.type='checkbox'；
checkboxEditorObj.options=checkboxOptionsObj；
//检查是否使复选框或组合框可编辑
if（row.leaf）{
libraryCoclum.editor=null；
typeCoclum.editor=comboboxEditorObj；
}否则{
libraryCoclum.editor=checkboxEditorObj；
typeCoclum.editor=null；
} 
}
$（“#bteasyui”）。单击（函数（）{
var=”；
//$（“#tablegridJS”）.treegrid（'selectAll'）；
nodes=$（“#tablegridJS”）.treegrid（'getSelection'）；
console.log（节点）；
$（'#tablegridJS'）.treegrid（'beginEdit'，nodes.id）；
dataSelected=$（“#tablegridJS”）.treegrid（“检查”，“01”）；
console.log（$（“#tablegridJS”）.treegrid（'getChecked'）；
});
});