easyui datagrid 扩展方法

项目第一次用easyui,在用的时候自己扩展了一些方法,直接引用JS就可以了用了.

/**
* **********************************DataGird 扩展***********************************************************
*/
$.extend($.fn.datagrid.methods, {
/**
* 列拖动 不分页
* @param {} jq
* @param {} handler 拖动完成后事件
* @returns {}
*/
columnMoving: function (jq, params) {
return jq.each(function () {
if (params == undefined) params = {};
var successHandler = params.SuccessHandler;
var target = this;
var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
cells.draggable({
revert: true,
cursor: 'pointer',
edge: 5,
proxy: function (source) {
var p = $('<div 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', { SuccessHandler: successHandler });
if (successHandler)
successHandler();
}, 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;
}
}
});
},
/**
* 页面分页 lzg新增
* @param {} index 行索引
* @param {} cellName 列名
* @returns {}
*/
localPage: function (jq, datas) {
return jq.each(function () {
var table = $(this);
var opts = table.datagrid('options');
var pager = table.datagrid('getPager');
opts.remoteSort = false;//页面列头排序
opts.pageNumber = 1;
opts.pageSize = opts.pageSize;
pager.pagination('refresh', {
pageNumber: 1,
pageSize: opts.pageSize
});
table.datagrid({ loadFilter: pagerFilter }).datagrid('loadData', datas);

function pagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') { // 判断数据是否是数组
data = {
total: data.length,
rows: data
}
}
var opts = table.datagrid('options');
var pager = table.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
table.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
});

},
/**
* 扩展 获取DataGrid 显示列集合包括冻结列
* @returns {}
*/
getColumns: function (jq) {
var columns = [];
var table = $(jq[0]);
var opts = table.datagrid('options');

if (opts.frozenColumns.length > 0) {
$.each(opts.frozenColumns[0], function (index, ele) {
if (ele.hidden == undefined || ele.hidden == false) {
if (ele.field != 'ck' && ele.field != '_operate') columns.push(ele);
}
});
}

if (opts.columns.length > 0) {
$.each(opts.columns[0], function (index, ele) {
if (ele.hidden == undefined || ele.hidden == false) {
if (ele.field != 'ck' && ele.field != '_operate') columns.push(ele);
}
});
}
return columns;
},
/**
* 设置页面下拉显示最大行数 lzg新增
* @returns {}
*/
setPageSizeMax: function (jq) {
return jq.each(function () {
var table = $(this);
var opts = table.datagrid('options');
var pager = table.datagrid('getPager');
var data = table.datagrid('getData');
var ps = $(pager.find("select.pagination-page-list"));
var lastOption = $(ps).find('option').last();
//判断是不是大于原始最后一个值
if (parseInt(lastOption.val()) > 100) {
lastOption.remove();
}
if (data.total > 100) {
$("<option></option>").text(data.total).appendTo(ps);
opts.pageList[opts.pageList.length] = data.total;
}
table.datagrid('fixRownumber');
});
},
/**
* 初始化行号内容宽度
* @returns {}
*/
fixRownumber: function (jq) {
return jq.each(function () {
var table = $(this);
var panel = table.datagrid("getPanel");
//获取最后一行的number容器,并拷贝一份
var clone = $(".datagrid-cell-rownumber", panel).last().clone();
//由于在某些浏览器里面,是不支持获取隐藏元素的宽度,所以取巧一下
clone.css({
"position": "absolute",
left: -1000
}).appendTo("body");
var width = clone.width("auto").width();
//默认宽度是25,所以只有大于25的时候才进行fix
if (width > 25) {
//多加5个像素,保持一点边距
$(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5);
//修改了宽度之后,需要对容器进行重新计算,所以调用resize
table.datagrid("resize");
//一些清理工作
clone.remove();
clone = null;
} else {
//还原成默认状态
$(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style");
}
});
},
/**
* 更新单元格列值 lzg新增
* @params {index:行索引,cellName:列名,value:值,备注:不传值必须在外给行对象赋值,传值里面赋值}
* @returns {}
*/
updateCellValue: function (jq,params) {
return jq.each(function () {
var table = $(this);
var index = params.index;
var cellName = params.cellName;
var value = params.value;
var rowData = table.datagrid("getData").rows[index];
var html = table.datagrid("getPanel"); //Html
var view = html.find("div[class=\"datagrid-view2\"]"); //Table
var body = view.find("div[class=\"datagrid-body\"]"); //body
var tr = body.find("tr[datagrid-row-index=\"" + index + "\"]"); //Tr
var td = tr.find("td[field=\"" + cellName + "\"]"); //Td
//div
var div = td.find("div");
if (value != undefined) {
rowData[cellName] = value;
}
if (div.length > 0) {
var input = div.find("input");
if (input.length == 0) {
$(div[0]).attr("title", rowData[cellName]);
$(div[0]).html(rowData[cellName]);
} else {
var editor = table.datagrid('getEditor', { 'index': index, 'field': cellName });
if (editor != undefined) {
editor.target.numberbox('setValue', rowData[cellName]);
}

}
}
});
},
/**
* 通过数据源批量更新 DataGrid行对应列数据
* @params {} datas 数据源
* @params {} relationCol DataGrid和数据源关联列 "列名1"或["数据源列","DataGrid列"]
* @params {} dataCols 数据源取值列 ["列名1","列名2"]
* @params {} updateCols DataGrid更新列,跟取值列一一对应 ["列名1","列名2"]
* @returns {}
*/
updateBatchCellValue: function (jq,params) {
return jq.each(function () {
var datas=params.datas;
var relationCols=params.relationCols;
var dataCols=params.dataCols;
var updateCols = params.updateCols;
var table = $(this);
var rows = table.datagrid('getRows');
$.each(rows, function (index, row) {
var reation1 = relationCols;
var reation2 = relationCols;
if (relationCols instanceof Array) {
reation1 = relationCols[0];
reation2 = relationCols[1];
}
var tempRows = datas.filter(function (t) { return t[reation1] === row[reation2] });
if (tempRows.length > 0) {
for (var i = 0; i < dataCols.length; i++) {
table.datagrid('updateCellValue', { index: index, cellName: updateCols[i], value: tempRows[0][dataCols[i]] });
}
}
});
});
},
/**
* 获取对应列里面的HTML lzg新增
* @param {} index 行索引
* @param {} cellName 列名
* @returns {}
*/
getCellHtml: function (jq,params) {
var table = $(jq[0]);
var index = params.index;
var cellName = params.cellName;
var html = table.datagrid("getPanel"); //Html
var view = html.find("div[class=\"datagrid-view2\"]"); //Table
var body = view.find("div[class=\"datagrid-body\"]"); //body
var tr = body.find("tr[datagrid-row-index=\"" + index + "\"]"); //Tr
var td = tr.find("td[field=\"" + cellName + "\"]"); //Td
return td;
},
/**
* 取消checkbox不选中时候,选中行背景 lzg新增
* @param {} index 行索引
* @returns {}
*/
unCheckToSelectRow: function (jq, index) {
return jq.each(function () {
var table = $(this);
var html = table.datagrid("getPanel"); //Html
var view = html.find("div[class=\"datagrid-view2\"]"); //Table
var body = view.find("div[class=\"datagrid-body\"]"); //body
var tr = body.find("tr[datagrid-row-index=\"" + index + "\"]"); //Tr
var disabled = tr.find("td[field=\"ck\"]").find("input")[0].disabled; //
if (disabled) tr.removeClass("datagrid-row-selected");
});
},
/**
* 添加底部合计(只合计当前页行数据) lzg新增
* @param {} footerName 底部显示 '合计'中文 的列名(列子:'Name')
* footerCols 底部要计算合计的列 值:["列名1","列名2"] 或 [["列名1",小数位],"列名2"]
* fixedNum 所有合计列小数位
* @returns {}
*/
refreshFooter: function (jq,params) {
return jq.each(function () {
var table = $(this);
var footerName = params.footerName;
var footerCols = params.footerCols;
var fixedNum = params.fixedNum;

if (fixedNum == undefined) fixedNum = 0;
var jsonStr = footerName + ":'合计'";

var rows = table.datagrid('getRows');
var opts = table.datagrid('options');
opts.showFooter = true; //显示底部合计列
//计算列合计
var colCounts = [];
for (var i = 0; i < footerCols.length; i++) {
var cols = footerCols[i];
var colName = cols;
var fixed = fixedNum;
//判断是否数组
if (cols instanceof Array) {
colName = cols[0];
fixed = cols[1];
}
colCounts.push({ field: colName, Num: 0, fixed: fixed });
}
$.each(rows, function (index, row) {
//计算每列的合计
$.each(colCounts, function (index, colRow) {
//获取值
var num = 0;
if (row[colRow.field] != undefined && row[colRow.field] != '') {
num = parseFloat(row[colRow.field]);
if (isNaN(num)) {
num = null;
}
}
//累计值
if (num != null) {
colRow.Num += num;
} else {
colRow.Num = "";
}

});

});
//组装合计
$.each(colCounts, function (index, row) {
jsonStr += "," + row.field + ":'" + (row.Num == "" ? "" : row.Num.toFixed(row.fixed)) + "'";
});
jsonStr = "[{" + jsonStr + "}]";
var json = eval(jsonStr);
table.datagrid('reloadFooter', json);
});
},
/**
* 添加列合计 lzg新增
* @param {} totalName 显示列合计值的列名 列:'Total'
* @param {} formula 计算公式 列:'[Num]*[Price]'
* @param {} fixedNum 小数位
* @returns {}
*/
refreshColTotal: function (jq,params) {
return jq.each(function () {
var table = $(this);
var totalName = params.totalName;
var formula = params.formula;
var fixedNum = params.fixedNum;
if (fixedNum == undefined) fixedNum = 0;
var rows = table.datagrid('getRows');
var opts = table.datagrid('options');
var columns = opts.columns[0];
var tempFormula = "";
$.each(rows, function (index, row) {
tempFormula = formula;
$.each(columns, function (index, col) {
var valName = "[" + col.field + "]";
if (tempFormula.indexOf(valName) > -1) {
var val = 0;
if (row[col.field] != undefined && row[col.field] != '') {
val = parseFloat(row[col.field]);
if (isNaN(val)) {
val = null;
}
}
if (val != null)
tempFormula = tempFormula.replace(valName, val);
}
});
var total = eval(tempFormula);
row[totalName] = total.toFixed(fixedNum);
table.datagrid('updateCellValue', { index: index, cellName: totalName } );
});
});
},
/**
* 列头添加提示 鼠标悬停显示文字
* @param {} column 列名 值:{Value:'列名1',Text:'要显示滴值'}
或 [{Value:'列名1',Text:'要显示滴值'},{Value:'列名2',Text:'要显示滴值'}]
* @returns {}
*/
columnHeaderTitle: function (jq, column) {
return jq.each(function () {
var table = $(this);
var html = table.datagrid("getPanel"); //Html
var view = html.find("div[class=\"datagrid-view2\"]"); //Table
var body = view.find("div[class=\"datagrid-header\"]"); //header
var tr = body.find("tr[class=\"datagrid-header-row\"]"); //Tr
if (column instanceof Array) {
for (var i = 0; i < column.length; i++) {
var td = tr.find("td[field=\"" + column[i].Value + "\"]"); //Td
if (td.length == 1) {
$(td).attr("title", column[i].Text);
}

var groups = tr.find("div[class='datagrid-cell-group']"); //Group
if (groups.length > 0) {

$.each(groups, function (index, item) {
if (item.innerText == column[i].Value) {
$(item).attr("title", column[i].Text);
}

});

}
}
} else {
var td = tr.find("td[field=\"" + column.Value + "\"]"); //Td
if (td.length == 1) {
$(td).attr("title", column.Text);
}

var groups = tr.find("div[class='datagrid-cell-group']"); //Group
if (groups.length > 0) {

$.each(groups, function (index, item) {
if (item.innerText == column.Value) {
$(item).attr("title", column.Text);
}

});
}

}
});
}
});