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的时候才进行fixif (width > 25) {//多加5个像素,保持一点边距$(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5);//修改了宽度之后,需要对容器进行重新计算,所以调用resizetable.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"); //Htmlvar view = html.find("div[class=\"datagrid-view2\"]"); //Tablevar body = view.find("div[class=\"datagrid-body\"]"); //bodyvar tr = body.find("tr[datagrid-row-index=\"" + rowIndex + "\"]"); //Trvar 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//divvar 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"); //Htmlvar view = html.find("div[class=\"datagrid-view2\"]"); //Tablevar body = view.find("div[class=\"datagrid-body\"]"); //bodyvar tr = body.find("tr[datagrid-row-index=\"" + index + "\"]"); //Trvar td = tr.find("td[field=\"" + cellName + "\"]"); //Tdreturn td;},/*** 取消checkbox不选中时候,选中行背景 lzg新增* @param {} index  行索引 * @returns {} */unCheckToSelectRow: function (jq, index) {return jq.each(function () {var table = $(this);var html = table.datagrid("getPanel"); //Htmlvar view = html.find("div[class=\"datagrid-view2\"]"); //Tablevar body = view.find("div[class=\"datagrid-body\"]"); //bodyvar tr = body.find("tr[datagrid-row-index=\"" + index + "\"]"); //Trvar 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"); //Htmlvar view = html.find("div[class=\"datagrid-view2\"]"); //Tablevar body = view.find("div[class=\"datagrid-header\"]"); //headervar tr = body.find("tr[class=\"datagrid-header-row\"]"); //Trif (column instanceof Array) {for (var i = 0; i < column.length; i++) {var td = tr.find("td[field=\"" + column[i].Value + "\"]"); //Tdif (td.length == 1) {$(td).attr("title", column[i].Text);}var groups = tr.find("div[class='datagrid-cell-group']"); //Groupif (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 + "\"]"); //Tdif (td.length == 1) {$(td).attr("title", column.Text);}var groups = tr.find("div[class='datagrid-cell-group']"); //Groupif (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;

easyui datagrid 扩展方法相关推荐

给 Easyui Datagrid 扩展方法
给 Easyui Datagrid 扩展方法 $.extend($.fn.datagrid.methods, {/*** 更新非编辑列值* @param rowIndex : 行索引* @param ...
easyui datagrid onLoadSuccess方法正确使用
错误写法: <table id="dg" class="easyui-datagrid" rownumbers="true" fitC ...
jQuery EasyUI datagrid实现本地分页的方法
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重 ...
easyui 修改单元格内容_jquery easyui datagrid实现增加，修改，删除方法总结
本文实例讲述了jquery easyui datagrid实现增加,修改,删除的方法.分享给大家供大家参考,具体如下: 页面: 引用的JS: JS: $(function(){ $('#tt').da ...
easyui datagrid数据加载缓慢问题，优化方法
问题:数据列表展示,主从表展示,多表展示.每个表10行,10-20列.谷歌浏览器.页面加载速度大于5S 解决方法1:列宽度设为固定值,取消自适应.页面加载速度低于2S 参考于:http://www.o ...
easyUI datagrid editor扩展dialog
easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 1 <!DOCTYPE html> 2 < ...
让jquery easyui datagrid列支持绑定嵌套对象
嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...
反射实体自动生成EasyUi DataGrid模板第二版--附项目源码
之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html 大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很 ...
关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为"安徽中控"项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必 ...

easyui datagrid 扩展方法

easyui datagrid 扩展方法相关推荐

最新文章

热门文章