EasyUI DataGrid根据字段动态合并单元格

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>

<html>

<head>

<jsp:include page="../inc.jsp"></jsp:include>

<meta http-equiv="X-UA-Compatible" content="edge" />

<title>项目收款提醒管理</title>

<script type="text/javascript">

var dataGrid;

$(function() {

//查询列表

dataGrid = $(‘#dataGrid‘).datagrid({

url : ‘${ctx}‘ + ‘/itemreceiptsclaim/dataGrid‘,

striped : true,

rownumbers : true,

pagination : true,

singleSelect : true,

idField : ‘id‘,

sortName : ‘id‘,

sortOrder : ‘asc‘,

pageSize : 20,

pageList : [ 15, 20, 30 ],

columns:[[{

width : ‘200‘,

title : ‘项目名称‘,

field : ‘name‘,

align : ‘center‘

},{

width : ‘125‘,

title : ‘项目编号‘,

field : ‘itemCode‘,

align : ‘center‘

},{

width : ‘125‘,

title : ‘部门‘,

field : ‘orgName‘,

align : ‘center‘

},{

width : ‘125‘,

title : ‘创建时间‘,

field : ‘created‘,

align : ‘center‘

}, {

width : ‘80‘,

title : ‘状态‘,

field : ‘status‘,

align : ‘center‘,

sortable : true,

formatter : function(value, row, index) {

switch (value) {

case 0:

return ‘已删除‘;

case 1:

return ‘草稿‘;

}

}

}]],

onLoadSuccess:function(data){

if (data.rows.length > 0) {

//调用mergeCellsByField()合并单元格

mergeCellsByField("dataGrid", "name,itemCode");

}

},

toolbar : ‘#toolbar‘

});

});

function sendMail(id) {

var rows = dataGrid.datagrid(‘getSelections‘);

id = rows[0].id;

parent.$.modalDialog({

title : ‘发送邮件‘,

width : $(parent).width() * 1,

height : $(parent).height() * 1,

href : ‘${ctx}/itemreceiptsclaim/editPage?id=‘ + id,

buttons : [ {

text : ‘编辑‘,

handler : function() {

parent.$.modalDialog.openner_dataGrid = dataGrid;

var f = parent.$.modalDialog.handler.find(‘#EditForm‘);

f.submit();

}

} ]

});

}

function searchFun() {

//获取查询参数

var name=$(‘[name="name"]‘).val();

var submitStart=$(‘[name="submitStart"]‘).val();

var submitEnd=$(‘[name="submitEnd"]‘).val();

//查询参数校验

//触发搜索

dataGrid.datagrid(‘load‘,{

name:name,

submitStart:submitStart,

submitEnd:submitEnd

});

}

/**

* EasyUI DataGrid根据字段动态合并单元格

* 参数 tableID 要合并table的id

* 参数 colList 要合并的列,用逗号分隔

*/

function mergeCellsByField(tableID, colList) {

var ColArray = colList.split(",");

var tTable = $("#" + tableID);

var TableRowCnts = tTable.datagrid("getRows").length;

var tmpA;

var tmpB;

var PerTxt = "";

var CurTxt = "";

for (var j = ColArray.length - 1; j >= 0; j--) {

PerTxt = "";

tmpA = 1;

tmpB = 0;

for (var i = 0; i <= TableRowCnts; i++) {

if (i == TableRowCnts) {

CurTxt = "";

}

else {

CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];

}

if (PerTxt == CurTxt) {

tmpA += 1;

}

else {

tmpB += tmpA;

tTable.datagrid("mergeCells", {

index: i - tmpA,

field: ColArray[j],

rowspan: tmpA,

colspan: null

});

tTable.datagrid("mergeCells", {

index: i - tmpA,

field: "Ideparture",

rowspan: tmpA,

colspan: null

});

tmpA = 1;

}

PerTxt = CurTxt;

}

}

}

</script>

</head>

<body class="easyui-layout" data-options="fit:true,border:false">

<div data-options="region:‘center‘,fit:true,border:false">

<table id="dataGrid" data-options="fit:true,border:false"></table>

</div>

<div id="toolbar" style="display: none;" class="datagrid-toolbar">

<table data-options="fit:true,border:false">

<tr>

<td>项目名称</td>

<td><input name="name" type="text" class="span2" value=""></td>

<td>提交时间</td>

<td><input class="easyui-datetimebox" name="submitStart" value="" ></td>

<td align="center">~~至~~</td>

<td><input class="easyui-datetimebox" name="submitEnd" value="" ></td>

</tr>

</table>

<a onclick="searchFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-search‘">查询</a>

<a onclick="sendMail();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-remove‘">发送邮件</a>

</div>

</body>

</html>

时间: 2024-10-10 19:07:04

EasyUI DataGrid根据字段动态合并单元格的相关文章

[easyui][datagrid]EasyUI DataGrid根据字段动态合并单元格

1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office"); */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable = $("#" +

JQuery EasyUI DataGrid动态合并单元格

/**        * EasyUI DataGrid根据字段动态合并单元格        * @param fldList 要合并table的id        * @param fldList 要合并的列,用逗号分隔(例如:"name,department,office");        */        function MergeCells(tableID, fldList) {            var Arr = fldList.split(",&quo

实操记录之-----Ant Design of Vue 增强版动态合并单元格,自动根据数据进行合并,可自定义横纵向合并

前几天搞了个简易版的动态合并单元格 但是需求有变化,就只能稍微改改了~~ 欢迎路过的各位大佬指出我代码的问题~~~~ 另: 代码执行效率不是很高,如果需要大量渲染更多数据建议可以直接使用原生 <template> <page-view :title="title"> <h1>第一種數據結構,前端渲染</h1> <div class="snall-table-spacing"> <a-table :co

EasyUi datagrid(onClickCell:用户单击一个单元格时触发 ) 單擊編輯 editor:{type: &#39;combobox&#39;}

1.columns列[一個單元格] 添加combobox下拉選項 $("#userGrid").datagrid({ singleSelect: true,            onClickCell: function (index, field, value) {                //Field = field;                //                var rows = $('#' + UserGrid).datagrid('getRo

easyui 自动动态合并单元格

.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 mergeCellsByField("grid","supply_fullname,in_supply,in_no,in_sales"); } } function mergeCellsByField(tableID, colList) { //alert(tableI

js 动态合并单元格并求和

需求:相同的产品名称,要合并单元格,并计算出相同产品总共消耗多少标煤. function autoRowSpan(tb, row, col) { var lastValue = ""; var value = ""; var pos = 1; var tdSum = 0; var cellValue = 0; for (var i = row; i < tb.rows.length; i++) { value = tb.rows[i].cells[col].i

easyUI---datagrid合并单元格代码实现

1.html部分: <div id="table1"></div> 2.js部分: $('#table1').datagrid({ data : data, loadFilter: pagerFilter, height: $(document).height()*0.87, striped: true, selectOnCheck: true, pagination: true, pageSize:10, pageList:[10,20,30,40,50],

poi导出Excel报表多表头双层表头、合并单元格

效果图: controller层方法: /**     *      * 导出Excel报表     * @param request     * @return     *      */    @RequestMapping("/export")    @ResponseBody    public void export(HttpServletRequest request,            HttpServletResponse response, String year

easyui datagrid 合并单元格

整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获取计算ID var CountID = getUrlParam("CountID"); $.ajax({ type: "POST", url: "../Ashx/GetGasInventoryListInfo.ashx?type=getParamReport&