mirror of https://github.com/layui/layui
				
				
				
			feat(table): col.totalRow 支持函数,改进 updateTotalRow 参数
							parent
							
								
									d361a327ea
								
							
						
					
					
						commit
						1a5258b292
					
				| 
						 | 
				
			
			@ -275,7 +275,28 @@ totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'
 | 
			
		|||
```
 | 
			
		||||
!}}
 | 
			
		||||
 | 
			
		||||
注意:*合计行模板仅支持字符写法,不支持函数写法,请勿与 `templet` 用法混淆。*
 | 
			
		||||
// 函数写法(2.9.4+)
 | 
			
		||||
totalRow: function(obj){
 | 
			
		||||
  // 内置用于快速实现合计
 | 
			
		||||
  // obj.field - 当前列字段值
 | 
			
		||||
  // obj.totalValue - 当前列合计值
 | 
			
		||||
  // obj.totalData - 所有列合计数据
 | 
			
		||||
 | 
			
		||||
  // 用于自定义列计算
 | 
			
		||||
  // obj.columnValues - 当前列值的数组
 | 
			
		||||
  // obj.columnData - 所有列值的数据
 | 
			
		||||
  // obj.tableData - 当前页所有数据
 | 
			
		||||
 | 
			
		||||
  // 合计格式化
 | 
			
		||||
  return '合计:' + obj.totalValue + '🥇'
 | 
			
		||||
 | 
			
		||||
  // 平均
 | 
			
		||||
  return '平均分:' + obj.totalValue / obj.columnValues.length
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
注意:*合计行模板函数写法,与 `templet` 用法不同,请勿混淆。*
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
- **采用后端合计**
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -338,12 +338,27 @@ table.updateTotalRow('test', {
 | 
			
		|||
});
 | 
			
		||||
 | 
			
		||||
// 自定义合计行计算,建议采用前端合计时使用
 | 
			
		||||
table.updateTotalRow('test', function(field, columnValues, tableData){
 | 
			
		||||
  if(field === 'score') {
 | 
			
		||||
    return columnValues.reduce(function(accumulator, currentValue){
 | 
			
		||||
table.updateTotalRow('test', function(obj){
 | 
			
		||||
  // 内置用于快速实现合计
 | 
			
		||||
  // obj.field - 当前列字段值
 | 
			
		||||
  // obj.totalValue - 当前列合计值
 | 
			
		||||
  // obj.totalData - 所有列合计数据
 | 
			
		||||
 | 
			
		||||
  // 用于自定义列计算
 | 
			
		||||
  // obj.columnValues - 当前列值的数组
 | 
			
		||||
  // obj.columnData - 所有列值的数据
 | 
			
		||||
  // obj.tableData - 当前页所有数据
 | 
			
		||||
 | 
			
		||||
  // 合计
 | 
			
		||||
  if(obj.field === 'count'){
 | 
			
		||||
    return obj.columnValues.reduce(function(accumulator, currentValue){
 | 
			
		||||
      return accumulator + currentValue;
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
  // 平均
 | 
			
		||||
  if(obj.field === 'score'){
 | 
			
		||||
    return obj.totalValue / obj.columnValues.length + '分'
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1436,9 +1436,17 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 | 
			
		|||
    var tds = [];
 | 
			
		||||
    that.eachCols(function(i3, item3){
 | 
			
		||||
      var field = item3.field || i3;
 | 
			
		||||
      var totalRowOpts = {
 | 
			
		||||
        field: field,
 | 
			
		||||
        totalData: totalNums,
 | 
			
		||||
        totalValue: totalNums[field],
 | 
			
		||||
        columnData: columnValues,
 | 
			
		||||
        columnValues: columnValues[field],
 | 
			
		||||
        tableData: data
 | 
			
		||||
      }
 | 
			
		||||
      // 合计数据的特定字段
 | 
			
		||||
      var TOTAL_NUMS = (typeof totalRowData === 'function' && item3.totalRow)
 | 
			
		||||
        ? totalRowData(field, columnValues[field], data)
 | 
			
		||||
        ? totalRowData(totalRowOpts)
 | 
			
		||||
        : totalRowData && totalRowData[item3.field];
 | 
			
		||||
 | 
			
		||||
      // 合计数据的小数点位数处理
 | 
			
		||||
| 
						 | 
				
			
			@ -1458,12 +1466,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 | 
			
		|||
        tplData[field] = thisTotalNum;
 | 
			
		||||
 | 
			
		||||
        // 获取自动计算的合并内容
 | 
			
		||||
        var getContent = item3.totalRow ? (parseTempData.call(that, {
 | 
			
		||||
          item3: item3,
 | 
			
		||||
          content: thisTotalNum,
 | 
			
		||||
          tplData: tplData
 | 
			
		||||
        }) || text) : text;
 | 
			
		||||
 | 
			
		||||
        var getContent = typeof item3.totalRow === 'function'
 | 
			
		||||
          ? item3.totalRow(totalRowOpts)
 | 
			
		||||
          : item3.totalRow
 | 
			
		||||
          ? (parseTempData.call(that, {
 | 
			
		||||
              item3: item3,
 | 
			
		||||
              content: thisTotalNum,
 | 
			
		||||
              tplData: tplData
 | 
			
		||||
            }) || text)
 | 
			
		||||
          : text;
 | 
			
		||||
        return getContent;
 | 
			
		||||
      }();
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -1517,10 +1528,21 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 | 
			
		|||
    that.layTotal.find('tbody').html('<tr>' + tds.join('') + (patchElem.length ? patchElem.get(0).outerHTML : '') + '</tr>');
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * @typedef totalRowCallbackParams
 | 
			
		||||
   * @prop {string} field - 当前列字段值
 | 
			
		||||
   * @prop {number} totalValue - 当前列合计值
 | 
			
		||||
   * @prop {Object.<string, number>} totalData - 所有列合计数据
 | 
			
		||||
   * @prop {Array<string | number>} columnValues - 当前列值的数组
 | 
			
		||||
   * @prop {Object.<string, Array<string | number>>} columnData - 所有列值的数据
 | 
			
		||||
   * @prop {Array<object>} tableData - 当前页所有数据
 | 
			
		||||
   * 
 | 
			
		||||
   */
 | 
			
		||||
  /**
 | 
			
		||||
   * 更新合计行数据,未传入合计行数据时,将使用内置的自动合计
 | 
			
		||||
   * @param {string} id 表格 ID
 | 
			
		||||
   * @param {Object.<string, any> | ((field: string, columnValues: Array<any>, tableData: Array<any>) => string | number)} [totalRowData] - 合计行数据。若为函数,则为计算每一列合计数据的回调
 | 
			
		||||
   * @param {Object.<string, any> | ((params: totalRowCallbackParams) => string | number)} [totalRowData] - 合计行数据。若为函数,则为计算每一列合计数据的回调
 | 
			
		||||
   */
 | 
			
		||||
  table.updateTotalRow = function(id, totalRowData){
 | 
			
		||||
    var that = getThisTable(id);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue