easyui datagrid 扩展方法
来源：互联网 发布：西瓜影音播放器 mac 编辑：程序博客网 时间：2024/06/10 12:17
项目第一次用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); } }); } } }); }});阅读全文
0 0
- easyui datagrid 扩展方法
- Easyui Datagrid扩展fixRownumber方法
- jquery easyui 中扩展datagrid自定义方法
- EasyUI datagrid datetimebox扩展
- easyui datagrid 扩展
- easyui datagrid json扩展
- jquery扩展easyui的datagrid组建，添加loading方法
- easyui datagrid之editor扩展
- easyUI datagrid 查询方法
- easyui-datagrid 实用方法
- datagrid方法扩展
- easyui方法扩展
- EasyUI扩展方法
- 扩展easyui方法
- easyui datagrid editors扩展之combogrid
- easyui datagrid editors扩展之combogrid
- easyui扩展datagrid格子移动功能
- 学习easyUI 扩展的Editable DataGrid组件
- 【LeetCode】581. Shortest Unsorted Continuous Subarray
- 设计模式---装饰者模式
- textarea框内显示字数及提交反馈弹框
- 第十三周项目三 是否二叉排序树？
- 知识图谱技术介绍--转自新浪博客
- easyui datagrid 扩展方法
- python学习——可迭代对象与迭代器对象及创建迭代器的三种方式
- xLua的配置
- QT 编译通过但是运行出现程序异常结束或者crashed的问题 在QT creator中最佳解决办法
- 移动端深度学习框架——绝影简介
- 设计模式C++实现（2）——策略模式
- 云星数据---Scala实战系列(精品版)】：Scala入门教程047-Scala实战源码-Scala method操作
- Reinforcement Learning:An introduction读书笔记-Chapter 3
- idea 开发springmvc 非maven版
