easyui datagrid增加行的上移、下移操作列功能

最新推荐文章于 2023-07-27 17:16:28 发布

SuperCookies

最新推荐文章于 2023-07-27 17:16:28 发布

阅读量561

点赞数

分类专栏： easyui

本文链接：https://blog.youkuaiyun.com/SuperCookies/article/details/108753837

版权

easyui 专栏收录该内容

9 篇文章

订阅专栏

easyui datagrid增加行的上移、下移操作列功能

一、方法

操作列增加格式化方法formatter:UpDownFormat；

function UpDownFormat(value, row, index) {
		var gridId='grid';//所操作的表格id值
	    var dataArr = $("#"+gridId).datagrid('getData');	    
	    if(dataArr.rows.length>0){
	    	if (index == 0) {//第一行---只有下移
		        return "<span class='moveSpanDisabled'>上移</span><span class='moveSpanInterval'>|</span><span class='moveDownSpan' onclick='MoveDown(" + index + ",\"" + gridId + "\")'>下移</span>"
		    } else if (index == dataArr.rows.length-1) {//最后一行---只有上移
		        return "<span class='moveUpSpan' onclick='MoveUp(" + index + ",\"" + gridId + "\")'>上移</span><span class='moveSpanInterval'>|</span><span class='moveSpanDisabled'>下移</span>"
		    } else {
		        return "<span class='moveUpSpan' onclick='MoveUp(" + index + ",\"" + gridId + "\");'>上移</span><span class='moveSpanInterval'>|</span><span class='moveDownSpan' onclick='MoveDown(" + index + ",\"" + gridId + "\");'>下移</span>"
		    }
	    }
}
//上移方法
function MoveUp(index,gridId) {
	moveGridSort(index, 'up', gridId);
}
//下移方法
function MoveDown(index,gridId) {
	moveGridSort(index, 'down',gridId);
}
function moveGridSort(index, type, gridname) {
    if ("up" == type) {
        if (index != 0) {
            var toup = $('#' + gridname).datagrid('getData').rows[index];
            var todown = $('#' + gridname).datagrid('getData').rows[index - 1];
            $('#' + gridname).datagrid('getData').rows[index] = todown;
            $('#' + gridname).datagrid('getData').rows[index - 1] = toup;
            $('#' + gridname).datagrid('refreshRow', index);
            $('#' + gridname).datagrid('refreshRow', index - 1);
            $('#' + gridname).datagrid('selectRow', index - 1);
        }
    } else if ("down" == type) {
        var rows = $('#' + gridname).datagrid('getRows').length;
        if (index != rows - 1) {
            var todown = $('#' + gridname).datagrid('getData').rows[index];
            var toup = $('#' + gridname).datagrid('getData').rows[index + 1];
            $('#' + gridname).datagrid('getData').rows[index + 1] = todown;
            $('#' + gridname).datagrid('getData').rows[index] = toup;
            $('#' + gridname).datagrid('refreshRow', index);
            $('#' + gridname).datagrid('refreshRow', index + 1);
            $('#' + gridname).datagrid('selectRow', index + 1);
        }
    }
}

二、示例

在这里插入图片描述