datagrid合并行列--并不能影响序号列内容...(formatter的锅.)

最新推荐文章于 2022-12-08 10:26:59 发布

weixin_30670965

最新推荐文章于 2022-12-08 10:26:59 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/juedui0769/p/4899290.html

本文介绍了一种使用Datagrid组件实现合并行列的方法，并通过具体的代码示例展示了如何操作。包括了如何加载数据、添加汇总行及合并单元格等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

datagrid合并行列

    //datagrid组件.
    $('#id_dailylist_dg').datagrid({
        //url:'datagrid_data.json',
        columns:[[
            {field:'orderNum',title:'序号',width:'5%',align:'center',
	            formatter:function(value,row,index){return index+1;}},
            {field:'TYPENAME',title:'类别名称',width:'10%',align:'center'},
            {field:'YZ_CONTENT',title:'名称',width:'20%',align:'center'},
            {field:'SPEC',title:'规格',width:'18%',align:'center'},
            {field:'SELLNUM',title:'数量',width:'8%',align:'center'},
            {field:'TOTALPRICE',title:'金额',width:'10%',align:'center'},
            {field:'COSTTYPE',title:'费用类型',width:'7%',align:'center'}
        ]]
    });

		            $.ajax({
		        		type:'POST',
		        		url: ctx+"dailyListInfo/queryDailyDetail.do",
		        		data:{'adRegNum':adregnum,'date':date_str},
		        		cache:false,
		        		async:true,
		        		dataType:'json',
		        		success: function(result2)
		        		{
		        			if(!!result2 && result2.length > 0){
		        				$('#id_dailylist_dg').datagrid("loadData", result2);
		        			}
		        			//$('#id_dailylist_dg').datagrid("loadData", result2);
		        			$('#id_dailylist_dg').datagrid("appendRow",{orderNum: '汇总:',YZ_CONTENT: '1112222次'});
		        			$('#id_dailylist_dg').datagrid("appendRow",{orderNum: '汇总',YZ_CONTENT: ''});
		        			
		        			var rows = $('#id_dailylist_dg').datagrid("getRows");
		        			console.log( rows.length-2 );
		        			$('#id_dailylist_dg').datagrid('mergeCells', {
		        				index: rows.length-2,
		        				field: 'orderNum',
		        				rowspan: 2,
		        				colspan: 2
		        			});
		        			$('#id_dailylist_dg').datagrid('mergeCells', {
		        				index: rows.length-2,
		        				field: 'YZ_CONTENT',
		        				rowspan: 2,
		        				colspan: 5
		        			});
		        			console.log("rows.length", rows.length );
		        			
		        			
		        	    },error:function(result2)
		        	    {
		        	    }
		        	});

去掉 formatter:function(value,row,index){return index+1;} 后,就可以了.

    //datagrid组件.
    $('#id_dailylist_dg').datagrid({
        //url:'datagrid_data.json',
        columns:[[
            {field:'orderNum',title:'序号',width:'5%',align:'center'},
            {field:'TYPENAME',title:'类别名称',width:'10%',align:'center'},
            {field:'YZ_CONTENT',title:'名称',width:'20%',align:'center'},
            {field:'SPEC',title:'规格',width:'18%',align:'center'},
            {field:'SELLNUM',title:'数量',width:'8%',align:'center'},
            {field:'TOTALPRICE',title:'金额',width:'10%',align:'center'},
            {field:'COSTTYPE',title:'费用类型',width:'7%',align:'center'}
        ]]
    });

去掉formater后,可以在数据上做文章.

		        		success: function(result2)
		        		{
		        			if(!!result2 && result2.length > 0){
		        				$.each(result2, function(i,n){
		        					n['orderNum'] = i+1;
		        				});
		        				$('#id_dailylist_dg').datagrid("loadData", result2);
		        			}
		        			//$('#id_dailylist_dg').datagrid("loadData", result2);
		        			$('#id_dailylist_dg').datagrid("appendRow",{orderNum: '汇总:',YZ_CONTENT: '1112222次'});
		        			$('#id_dailylist_dg').datagrid("appendRow",{orderNum: '汇总',YZ_CONTENT: ''});