本文介绍了一个基于EasyUI的数据表格(DataGrid)的多种扩展方法，包括列拖动、页面分页、更新单元格值等功能，并提供了详细的代码实现。
项目第一次用easyui,在用的时候自己扩展了一些方法,直接引用JS就可以了用了.
/**
* ********************************** DataGird 扩展属性***********************************************************
*/
//是否自动对比表格中两行的高度
$.fn.datagrid.defaults.isContrastRowHeight = false;
/**
* **********************************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;
},
/**
* 扩展 获取DataGrid 查询条件包括默认查询条件
* @returns {}
*/
getConditions: function (jq) {
var conditions = [];
var table = $(jq[0]);
var filters = table.datagrid('getFilterRules');
var opts = table.datagrid('options');
if (filters.length > 0) {
$.each(filters, function (index, ele) {
conditions.push(ele);
});
}
if (opts.queryParams.defaultConditions && opts.queryParams.defaultConditions.length > 0) {
$.each(opts.queryParams.defaultConditions, function (index, ele) {
conditions.push(ele);
});
}
return conditions;
},
/**
* 设置页面下拉显示最大行数 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:"列名1"或["列名1","列名2"],value:"值1"或["值1","值2"],备注:不传值必须在外给行对象赋值,传值里面赋值}
* @returns {}
*/
updateCellValue: function (jq, params) {
return jq.each(function () {
var table = $(this);
var rowIndex = params.index;
var cellName = params.cellName;
var value = params.value;
var rowData = table.datagrid("getData").rows[rowIndex];
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=\"" + rowIndex + "\"]"); //Tr
var cols = [];
var colValues = [];
if (typeof cellName == "string") {
cols.push(cellName);
if (value != undefined)
colValues.push(value);
}
if (cellName instanceof Array) {
cols = cellName;
colValues = value;
}
var i = 0;
$.each(cols, function (index, name) {
var td = tr.find("td[field=\"" + name + "\"]"); //Td
//div
var div = td.find("div");
if (colValues.length>0 && cols.length == colValues.length) {
rowData[name] = colValues[i];
}
if (div.length > 0) {
var input = div.find("input");
if (input.length == 0) {
$(div[0]).attr("title", rowData[name]);
$(div[0]).html(rowData[name]);
} else {
var editor = table.datagrid('getEditor', { 'index': rowIndex, 'field': name });
if (editor != undefined) {
if (editor.type == 'textbox' || editor.type == 'text') {
editor.target.textbox('setValue', rowData[name]);
}
if (editor.type == 'numberbox') {
editor.target.numberbox('setValue', rowData[name]);
}
if (editor.type == 'validatebox') {
editor.target.validatebox.val(rowData[name]);
}
if (editor.type == 'datebox') {
editor.target.datebox('setValue', rowData[name]);
}
if (editor.type == 'datetimebox') {
editor.target.datetimebox('setValue', rowData[name]);
}
}
}
}
i++;
});
});
},
/**
* 通过数据源批量更新 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 == "" ? 0 : 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);
}
});
}
}
});
},
/**
* 编辑框键点击事件(暂时实现上下左右控件焦点移动)
* @param {} jq
* @returns {}
*/
editorsKeyDown: function (jq) {
return jq.each(function () {
var grid = $(this);
grid.datagrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown', function (e) {
//找到编辑框对应行号及列
var ctrl = $(e.target)[0];
if (ctrl.nodeName != "INPUT") {
return;
}
var currRowIndex = -1;
var currColName = "";
for (var i = 0; i < 10; i++) {
var p = $(ctrl.parentNode);
var trowIndex = p.attr("datagrid-row-index");
var tcolName = p.attr("field");
if (trowIndex != undefined)
currRowIndex = parseInt(trowIndex);
if (tcolName != undefined)
currColName = tcolName;
ctrl = $(p)[0];
}
if (currRowIndex == -1 || currColName == "") {
return;
}
//获取对应编辑列位置
var currEditorIndex = -1;
var editors = grid.datagrid('getEditors', currRowIndex);
$.each(editors, function (index, item) {
if (item.field == currColName) {
currEditorIndex = index;
}
});
var rowTotal = grid.datagrid('getRows').length;
switch (e.keyCode) {
case 38: // 上移
var rowIndex = currRowIndex - 1;
//上移到第一行跳转到最后一行
if (rowIndex == -1) {
rowIndex = rowTotal - 1;
}
var editor = grid.datagrid('getEditor', { index: rowIndex, field: currColName });
var editorDisplay = $(editor.target).css("display");
//判断编辑框第一个控件是否隐藏控件
if (editorDisplay == "none") {
var firstCtrl = $(editor.target).next().children(":first");
$(firstCtrl).focus(); //获取焦点
} else {
$(editor.target).focus(); //获取焦点
}
break;
case 40: // 下移
var rowIndex = currRowIndex + 1;
//下移到最后一行跳转到第一行
if (rowIndex == rowTotal) {
rowIndex = 0;
}
var editor = grid.datagrid('getEditor', { index: rowIndex, field: currColName });
var editorDisplay = $(editor.target).css("display");
//判断编辑框第一个控件是否隐藏控件
if (editorDisplay == "none") {
var firstCtrl = $(editor.target).next().children(":first");
$(firstCtrl).focus(); //获取焦点
} else {
$(editor.target).focus(); //获取焦点
}
break;
case 37: // 左移
var editorIndex = currEditorIndex - 1;
if (editorIndex == -1) {
editorIndex = editors.length - 1;
}
var nextEditorName = editors[editorIndex].field;
var editor = grid.datagrid('getEditor', { index: currRowIndex, field: nextEditorName });
var editorDisplay = $(editor.target).css("display");
//判断编辑框第一个控件是否隐藏控件
if (editorDisplay == "none") {
var firstCtrl = $(editor.target).next().children(":first");
$(firstCtrl).focus(); //获取焦点
} else {
$(editor.target).focus(); //获取焦点
}
break;
case 39: // 右移
var editorIndex = currEditorIndex + 1;
if (editorIndex == editors.length) {
editorIndex = 0;
}
var nextEditorName = editors[editorIndex].field;
var editor = grid.datagrid('getEditor', { index: currRowIndex, field: nextEditorName });
var editorDisplay = $(editor.target).css("display");
//判断编辑框第一个控件是否隐藏控件
if (editorDisplay == "none") {
var firstCtrl = $(editor.target).next().children(":first");
$(firstCtrl).focus(); //获取焦点
} else {
$(editor.target).focus(); //获取焦点
}
break;
}
});
});
},
/**
* 设置列头文本
* @param {} column 列名 值:{field:'列名',text:'值'}
* @returns {}
*/
setColumnTitle: function (jq, param) {
if (param.field) {
return jq.each(function () {
var $panel = $(this).datagrid("getPanel");
var $field = $('td[field=' + param.field + ']', $panel);
if ($field.length) {
var $span = $("span", $field).eq(0);
$span.html(param.text);
}
});
}
}
});
/**
* **********************************DataGird 行右键方法***********************************************************
*/
//是否显示行右键菜单
$.fn.datagrid.defaults.rowRightMenuShow = false;
//右键菜单显示文本
$.fn.datagrid.defaults.rowRightMenuTexts = [];
//菜单点击事件
$.fn.datagrid.defaults.rowRightMenuClick = function (text, rowData) { };
/**
* 设置DataGrid复制右键菜单 默认有复制功能
* @param {} e
* @param {} rowIndex
* @param {} rowData
* @returns {}
*/
ExtDataGridRowRightMenu = function (e, rowIndex, rowData) {
var dg = $(this);
var opts = dg.datagrid('options');
var columns = dg.datagrid('getColumns');
var fields = dg.datagrid('getColumnFields');
var okCls = 'icon-ok';// 选中
var emptyCls = '';// 取消
if (opts.rowRightMenuShow == undefined || !opts.rowRightMenuShow) return;
e.preventDefault(); //阻止浏览器捕获右键事件
if (rowIndex < 0) return;
var rowContextMenu = this.rowContextMenu; //grid上的行菜单对象
var fileId = $(e.target).parent().attr('field');
if (!rowContextMenu) {
opts.rowRightMenuTexts.push({ text: '复制列数据', iconCls: "" });
opts.rowRightMenuTexts.push({ text: '复制行数据', iconCls: "" });
var shchilds = [];
$.each(fields, function (index, field) {
var fildOption = dg.datagrid('getColumnOption', field);
shchilds.push({ text: fildOption.title, iconCls: !fildOption.hidden ? okCls : emptyCls, field: field });
});
opts.rowRightMenuTexts.push({ text: '显示隐藏列', iconCls: "icon-more", childs: shchilds });
//存储控件
$("<textarea id='gridCopyData'></textarea>").appendTo('body');
//存储内容
$("#gridCopyData").css({
"top": e.pageY + "px",
"left": e.pageX + "px",
"width": "0px",
"height": "0px"
});
//菜单控件
var menu = $("<div id='rGridMenu'></div>").appendTo('body');
$.each(opts.rowRightMenuTexts, function (index, item) {
var childMenu=$('<div iconCls="' + item.iconCls + '" />').html(item.text).appendTo(menu);
if (item.childs) {
var childHtml = $('<div />').appendTo(childMenu);
$.each(item.childs, function (index, child) {
$('<div iconCls="' + child.iconCls + '" field="' + child.field + '" parentText="' + item.text + '"/>').html(child.text).appendTo(childHtml);
});
}
});
rowContextMenu = this.rowContextMenu = menu.menu({
onClick: function (item) {
var rowIndex = $("#rGridMenu").attr("RowIndex");
var fileId = $("#rGridMenu").attr("FileId");
var rowData = dg.datagrid("getData").rows[rowIndex];
var text = item.text;
var parentText = $(item.target).attr('parentText');
var values = "";
if (text == "复制列数据") {
var rows = dg.datagrid('getRows');
$.each(rows, function (index, element) {
values += element[fileId] + "\n";
});
} else if (text == "复制行数据") {
$.each(columns, function (index, element) {
values += rowData[element.field] + " ";
});
}
if (values != "") {
$("#gridCopyData").val(values);
var element = document.getElementById("gridCopyData");
element.focus();
element.setSelectionRange(0, element.value.length);
document.execCommand("Copy"); // 执行浏览器复制命令
nes.alert("复制成功");
}
if (parentText == "显示隐藏列") {
var field = $(item.target).attr('field');
if (item.iconCls == okCls) {
dg.datagrid('hideColumn', field);
$(this).menu('setIcon', {
target: item.target,
iconCls: emptyCls
});
} else {
dg.datagrid('showColumn', field);
$(this).menu('setIcon', {
target: item.target,
iconCls: okCls
});
}
}
if (opts.rowRightMenuClick) {
opts.rowRightMenuClick(text, rowData);
}
}
});
}
rowContextMenu.attr("RowIndex", rowIndex);
rowContextMenu.attr("FileId", fileId);
rowContextMenu.menu('show', {
left: e.pageX,
top: e.pageY
});
}
//默认绑定到DataGrid上面
$.fn.datagrid.defaults.onRowContextMenu = ExtDataGridRowRightMenu;
扫一扫
6643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
