easyui生成合并行,合计计算价格
小弟最近遇到easyui的datagrid合并行,并且计算价格小计和区域小计,百度了代码,也看不懂,百度了很多,都没找到方法,最后请大神帮忙了一下,然后终于弄出来了!!!
望大家喜欢,勿喷,本人也是刚毕业的小菜鸟,谢谢!!!
下面是html+js代码!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/jquery.select.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="extEasyUI.js"></script>
<style>
</style>
<script>
var sortFlag = false;
$(function(){
//加载数据
$("#datagrid").datagrid({
url : 'data.json',
border:false,
singleSelect : true,
rownumbers : true,
fit:true,
toolbar:"#toolbar",
columns:[[
{field:'divr_id',hidden:true,title:'序号',width:100},
{field:'divr_user',title:'分区/分项',width:100},
{field:'resource_name',title:'项目名称',width:100},
{field:'divr_price',title:'单价',width:100},
{field:'resource_unit',title:'数量单位',width:100},
{field:'divr_num',title:'数量',width:100},
{field:'divr_unit',title:'周期单位',width:100},
{field:'divr_cycle',title:'周期',width:100},
{field:'sum',title:'金额',width:100,
formatter: function (value, row, index) {
if (!value && (row.divr_price != "" && row.divr_num != "" && row.divr_cycle != "")) {
return row.divr_price * row.divr_num * row.divr_cycle;
}else if(!value && row.divr_price != ""){
return row.divr_price;
}else {
return value;
}
}
},
{field:'divr_bak',title:'备注',width:100}
]],
onSortColumn:function(sort, order){
sortFlag = true;
if("userName"==sort){
$(this).datagrid("autoMergeCells",[sort]);
}else{
$(this).datagrid("autoMergeCells");
}
},
onLoadSuccess: function(data){
if(!sortFlag) $(this).datagrid("autoMergeCells",['divr_user']);<span style="white-space:pre"> </span>//这里填入需要合并的行 例如<pre name="code" class="html">['divr_user','<span style="font-family: Arial, Helvetica, sans-serif;">resource_name</span><span style="font-family: Arial, Helvetica, sans-serif;">']</span>
下面的是中中间的数据!
[{"area_id":1,"divr_addate":null,"divr_bak":null,"divr_cycle":1,"divr_id":0,"divr_num":1,"divr_price":2.0,"divr_unit":null,"divr_update":null,"divr_user":"导示系统","project_id":0,"resource_id":0,"resource_image":"D:\\upload\\file\\sequipment\\201606291919531001.jpg","resource_name":"话筒","resource_unit":"1","type_no":null},
{"area_id":1,"divr_addate":null,"divr_bak":"?\u0085¨?¤?\/????\u008E\u0092","divr_cycle":10,"divr_id":0,"divr_num":0,"divr_price":0.0,"divr_unit":null,"divr_update":null,"divr_user":"导示系统","project_id":0,"resource_id":0,"resource_image":"d:\/upload\/file\/program\/20160715182159200101.jpg","resource_name":"段宇","resource_unit":"???","type_no":null},
{"area_id":1,"divr_addate":null,"divr_bak":null,"divr_cycle":1399,"divr_id":0,"divr_num":1,"divr_price":15.0,"divr_unit":null,"divr_update":null,"divr_user":"导示系统","project_id":0,"resource_id":0,"resource_image":"d:\/upload\/file\/handmade\/20160716165542700101.jpg","resource_name":"影像马克杯","resource_unit":"场\/份","type_no":null},
{"area_id":2,"divr_addate":null,"divr_bak":null,"divr_cycle":1,"divr_id":0,"divr_num":1,"divr_price":150.0,"divr_unit":null,"divr_update":null,"divr_user":"主入口区","project_id":0,"resource_id":0,"resource_image":"d:\/upload\/file\/exhibit\/20160716145653500101.jpg","resource_name":"胡桃夹子（小）","resource_unit":"个","type_no":null},
{"area_id":2,"divr_addate":null,"divr_bak":null,"divr_cycle":10,"divr_id":0,"divr_num":10,"divr_price":699.0,"divr_unit":null,"divr_update":null,"divr_user":"主入口区","project_id":0,"resource_id":0,"resource_image":"D:\\upload\\file\\exhibit\\20160712135923500101.png","resource_name":"法式西点","resource_unit":"份","type_no":null},
{"area_id":3,"divr_addate":null,"divr_bak":"全天\/彩排\/距离:1000KM","divr_cycle":1,"divr_id":0,"divr_num":0,"divr_price":1600.0,"divr_unit":null,"divr_update":null,"divr_user":"舞台区","project_id":0,"resource_id":0,"resource_image":"d:\/upload\/file\/program\/20160715182159200101.jpg","resource_name":"段宇","resource_unit":"人","type_no":null},
{"area_id":3,"divr_addate":null,"divr_bak":null,"divr_cycle":1,"divr_id":0,"divr_num":1,"divr_price":1.0,"divr_unit":null,"divr_update":null,"divr_user":"舞台区","project_id":0,"resource_id":0,"resource_image":"D:\\upload\\file\\sequipment\\201606291919531001.jpg","resource_name":"话筒(多色变色)","resource_unit":"1","type_no":null}]
需要的可以复制下去试试!!!
下面是代码,直接下载,就可以运行,看效果!!!
如有不同,请复制上方的html页面的内容进行替换js代码!
下面是参考网上大神的合并单元格的代码,为尊重他们的原创,再次贴出他们的链接: