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代碼!
下面是參考網上大神的合併單元格的代碼,爲尊重他們的原創,再次貼出他們的鏈接: