extend juqeryUI datagrid.methods

[javascript] 
少說廢話,轉入正題 
[javascript] view plaincopy
$.extend($.fn.datagrid.methods,{ 
    columnMoving: function(jq){ 
        return jq.each(function(){ 
            var target = this; 
            var cells = $(this).datagrid('getPanel').find('p.datagrid-header td[field]'); 
            cells.draggable({ 
                revert:true, 
                cursor:'pointer', 
                edge:5, 
                proxy:function(source){ 
                    var p = $('<p class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body'); 
                    p.html($(source).text()); 
                    p.hide(); 
                    return p; 
                }, 
                onBeforeDrag:function(e){ 
                    e.data.startLeft = $(this).offset().left; 
                    e.data.startTop = $(this).offset().top; 
                }, 
                onStartDrag: function(){ 
                    $(this).draggable('proxy').css({ 
                        left:-10000, 
                        top:-10000 
                    }); 
                }, 
                onDrag:function(e){ 
                    $(this).draggable('proxy').show().css({ 
                        left:e.pageX+15, 
                        top:e.pageY+15 
                    }); 
                    return false; 
                } 
            }).droppable({ 
                accept:'td[field]', 
                onDragOver:function(e,source){ 
                    $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes'); 
                    $(this).css('border-left','1px solid #ff0000'); 
                }, 
                onDragLeave:function(e,source){ 
                    $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no'); 
                    $(this).css('border-left',0); 
                }, 
                onDrop:function(e,source){ 
                    $(this).css('border-left',0); 
                    var fromField = $(source).attr('field'); 
                    var toField = $(this).attr('field'); 
                    setTimeout(function(){ 
                        moveField(fromField,toField); 
                        $(target).datagrid(); 
                        $(target).datagrid('columnMoving'); 
                    },0); 
                } 
            }); 
             
            // move field to another location 
            function moveField(from,to){ 
                var columns = $(target).datagrid('options').columns; 
                var cc = columns[0]; 
                var c = _remove(from); 
                if (c){ 
                    _insert(to,c); 
                } 
                 
                function _remove(field){ 
                    for(var i=0; i<cc.length; i++){ 
                        if (cc[i].field == field){ 
                            var c = cc[i]; 
                            cc.splice(i,1); 
                            return c; 
                        } 
                    } 
                    return null; 
                } 
                function _insert(field,c){ 
                    var newcc = []; 
                    for(var i=0; i<cc.length; i++){ 
                        if (cc[i].field == field){ 
                            newcc.push(c); 
                        } 
                        newcc.push(cc[i]); 
                    } 
                    columns[0] = newcc; 
                } 
            } 
        }); 
    } 
}); 

調用:

[javascript] 
$('#tt').datagrid({ 
    url: 'datagrid_data3.json', 
    title: 'DataGrid', 
    width: 700, 
    height: 220, 
    fitColumns: true, 
    nowrap:false, 
    rownumbers:true, 
    showFooter:true, 
    columns:[[ 
        {field:'itemid',title:'Item ID',width:80}, 
        {field:'productid',title:'Product ID',width:120}, 
        {field:'listprice',title:'List Price',width:80,align:'right'}, 
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, 
        {field:'attr1',title:'Attribute',width:250}, 
        {field:'status',title:'Status',width:60,align:'center'} 
    ]] 
}).datagrid("columnMoving"); 

作者:guyongqing52

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *