表格组件

chanchaw大约 8 分钟easyui

#日期类型

日期类型

表格加载的日期类型数据不可 2024-07-16，要求带有时间，例如：2024-07-16T12:11:12Z。如果只有日期，在表格初次加载数据后可正常显示，通过双击打开编辑状态后，日期列的编辑框会没有内容。注意时区问题会使日期减少8小时导致日期提前一天。

更新指定行指定列数据

// 其他没有指定的属性（字段）的值不会变
selectedRowIndexArray.forEach(rowIndex => {
    $('#dg').datagrid('updateRow',{
        index: rowIndex, row: {"f6":date1}
    });
	  // 更新数据后刷新该行
    $('#dg').datagrid('refreshRow', rowIndex);        
})

记录选中行 rowIndex

let selectedRowIndexArray = [];

// 第一次选择加入数组，再次选择则从数组中删除（取消选择）
function updateSelectedRowIndex(rowIndex){
    if(!selectedRowIndexArray || selectedRowIndexArray.length === 0){
        selectedRowIndexArray.push(rowIndex);
        return
    }

    const target = selectedRowIndexArray.find(item => item === rowIndex);
    if(target){
        selectedRowIndexArray = selectedRowIndexArray.filter(item => item !== rowIndex)
        return
    }

    selectedRowIndexArray.push(rowIndex);
}

获取表格编辑器并更新数据

第一个参数 tableCtl 是 easyGrid 对象，可通过 $('#表格ID') 获取第二个参数 editRowIndex 是当前处于编辑状态的行 index 第三个参数 fieldName 是想要获取的字段名称最终会返回 goodsNameEditor

function getGridEditor(tableCtl,editRowIndex,fieldName){
    return $(tableCtl).edatagrid('getEditor', {
        index: editRowIndex,
        field: fieldName
    });
}

获取到 editor 后可通过下面代码获取编辑器中的 value - 下面的 amountEditor 就是上面 function 返回的对象

let amount = $(amountEditor.target).numberbox('getValue') || 0;

获取 editor 后还可通过下面的方法为编辑器中设置 value

$(moneyEditor.target).numberbox('setValue', amount * price);

获取表格编辑器并刷新数据

行内编辑应用公式计算

将下面的方法应用在表格组件的 onEdit 和 onAdd 事件下

function onSelect_money(rowIndex) {
    var qty = $('#grid').edatagrid('getEditor', {index:rowIndex,field:'amount'});
    var price = $('#grid').edatagrid('getEditor', {index:rowIndex,field:'price'});
    var money = $('#grid').edatagrid('getEditor', {index:rowIndex,field:'money'});
    price.target.numberbox({
        onChange: function (n, o) {
            var QTY = qty.target.numberbox('getValue');
            var result = n * QTY;
            console.log('单价变动触发重新计算，单价=' + n + '，数量=' + QTY + ',金额=' + result);
            money.target.numberbox('setValue', result);
        }
    });
    qty.target.numberbox({
        onChange: function (n, o) {
            var Price = price.target.numberbox('getValue');
            var result = n * Price;
            console.log('数量变动触发重新计算，单价=' + n + '，数量=' + QTY + ',金额=' + result);
            money.target.numberbox('setValue', result);
        }
    });
}

行内编辑控件类型的使用

日期类型

{
	field: 'consumeDate', title: '领料日期', width: 100,
	editor: {required: true, type: "datebox", options: {}}
},

枚举类型下拉数据

下面是HTML中设置行内编辑为下拉框，硬编码形式写入数据

<th data-options="field:'productid',width:100,
formatter:function(value,row){
  return row.productname;
},
  editor:{
    type:'combobox',
      options:{
        valueField:'productid',
          textField:'productname',								
            data:[{productid:'染色领料',productname:'染色领料'},{productid:'印花领料',productname:'印花领料'}],
              required:true
      }
  }">Product</th>

js文件中设置行内编辑下拉数据源为枚举类型 - 硬编码写数据在js文件中

{
  field: 'outCategory', title: '领料部门', width: 100, editor: {
    type: 'combobox', options: {
      panelHeight: '100px',
        data:[{outCategory:'染色'},{outCategory:'印花'}],
          textField: 'outCategory',
            valueField: 'outCategory'
    }
  }
},

获取指定字段的编辑器

var t_goodsName = $('#grid').edatagrid('getEditor', {index: index, field: 'goodsName'});

下拉选择数据源

获取所有行、选中行

// 获取选中的行构成的数组，如果没有选中行则返回空数组
var selectedRows = $('#ZH').datagrid('getSelections');
// 获取选中行对象，如果选中了多行则返回第一行，如果没有选中则返回 null
var selectedRows = $('#ZH').datagrid('getSelected');
// 获取表格所有行构成的数组
let rows = $('#e_grid').edatagrid('getRows') || [];

加载外部数据

可以通过 ajax 请求后端数据 data 填充到表格中，也可以使用前端本地数据填充。

$("#grid_detail").datagrid('loadData', data)

勾选事件

表格事件 onCheck 是勾选复选框后触发的事件

获取指定行的指定属性

设置表格参数时指定某唯一字段为 idField，之后可通过该属性的值获取指定行的 rowIndex
easygrid03

onCheck: function (index, row) {
	const selectedBid = row.bId;// 获取当前勾选行的属性 bId 的值
	var rowIndex = $('#grid_main').datagrid('getRowIndex', selectedBid);// 获取行的 rowIndex
}

$('#grid_main').datagrid('getRows')[rowIndex].vatnum; // 获取指定行的指定属性的值

刷新指定行数据

$("#grid_total").datagrid('refreshRow', rowIndex);

显示主键对应名称

基础资料 > 品种类别请求后台数据来关于“单价套用”获取的是主键，要显示对应的名称使用下面的方法

{
                title: '单价套用',
                field: 'unitprice',
                // field: 'projectName',
                width: 100,
                sortable: true,
                formatter: function (v, r, i) {
                    if (!v) return '';
                    let projectName = '';
                    $.ajax(
                        {
                            async: false,
                            url: 'editPrice/category/item/' + v,
                            data: {},
                            type: 'GET',
                            success: function(res){
                                console.log(`根据${v}查询到的结果是：`,res);
                                if( res.state == 200 ){
                                    projectName = res.data;
                                }else{
                                    projectName = '';
                                }
                            },
                            error: function(e){
                                console.log('为每个单价套用请求名称时出现异常');
                                console.log(e);
                            }
                        }
                    );
                    return projectName;
                },
                input: {
                    type: 'easyui-combobox',
                    dataoptions:
                        "required:false," +
                        "valueField: 'id'," +
                        "method:'GET'," +
                        "textField: 'projectName'," +
                        "url: 'editPrice/findAll'," +
                        "limitToList: true"
                },
            },

下面代码的 onLoadSuccess 是加载数据触发的事件，在该事件中调用 reloadFooter 刷新 Footer 该事件的传入参数 data 是表格数据数组

$('#edit_total_grid').datagrid({
    data: [],
    striped: true,
    fit: true,
    sortable: true,
    rownumbers: true,
    remoteSort: false,
    singleSelect: true,
    showFooter: true,
    columns: [[
        {
            title: '毛重',
            width: 50,
            field: 'kilo',
            align: 'right',
            halign: 'center',
            formatter: (v, r, i) => v ? parseFloat(v).toFixed(1) : ''
        }
    ]],
    onLoadSuccess: function (data) {
        let rows = data.rows;
        let kilo = rows.reduce((prev, curr) => (curr['kilo'] ? parseFloat(curr['kilo']) : 0) + prev, 0);
        let pairs = rows.reduce((prev, curr) => (curr['pairs'] ? parseFloat(curr['pairs']) : 0) + prev, 0);
        let netKilo = rows.reduce((prev, curr) => (curr['netKilo'] ? parseFloat(curr['netKilo']) : 0) + prev, 0);
        $(this).datagrid('reloadFooter', [{
            kilo: kilo,
            pairs: pairs,
            netKilo: netKilo,
        }]);
    },
    onSelect: function (rowIndex, rowData) {
        let detail = rowData.detail;
        $('#edit_detail_grid').datagrid('clearSelections');
        if (detail instanceof Array && detail.length > 0) {
            $('#edit_detail_grid').datagrid('loadData', detail);
        } else {
            $('#edit_detail_grid').datagrid('loadData', {total: 0, rows: []});
        }
    }
})

文字变色

{
    field: 'online',
    title: '状态',
    width: 200,
    align: 'center',
    halign: 'center',
    sortable: true,
    formatter: function(value,row,index){
        if( value )
            return '<span style="color:green">在线</span>';
        else
            return '<span style="color:red">离线</span>';
    }
},

修改选中行数据

最下面的方法 setEdatagridSelectedData 需要传入两个参数：

gridId = 表格控件的 id
data = 行数据模型的对象，可以部分更新 - patch - 不填写的属性不会被修改数据

方法 setPricingStandard 是修改计价标准，即修改所有选中行的计价标准方法 setPrice 是修改单价，即修改所有选中行的单价

function setPricingStandard(){
    const priceStandard = $('#pricingStandard').combobox('getValue');
    setEdatagridSelectedData(DIALOG_ID_SET_PRICE,{ valuateId:priceStandard });
}

// 设置选中行单价
function setPrice(){
    const price = $('#price').numberbox('getValue');
    setEdatagridSelectedData(DIALOG_ID_SET_PRICE,{ price:price });
}

// 设置 easyui grid 选中行的数据
function setEdatagridSelectedData(gridId,data){
    $(`#${gridId}`).edatagrid('saveRow');
    let rows = $(`#${gridId}`).edatagrid('getRows') || [];
    const selectedRows = $(`#${gridId}`).edatagrid('getSelections');
    for (let i = 0; i < rows.length; i++) {
        //let selectRowIndex = $(`#${gridId}`).edatagrid('getRowIndex', $(`#${gridId}`).edatagrid('getSelected'));
        for (let j = 0; j < selectedRows.length; j++) {
            const selectRowIndex = $(`#${gridId}`).edatagrid('getRowIndex', selectedRows[j]);
            if (selectRowIndex != -1 && selectRowIndex == i){
                $(`#${gridId}`).edatagrid('updateRow', {
                    index: i,
                    row: data
                });
            }
            // 上面修改行数据后要调用下面的方法刷新UI显示
            $(`#${gridId}`).datagrid('refreshRow', selectRowIndex);
        }

    }
}

formatter

定义列时的 formatter 属性中，系统会自动传入3个参数：当前单元格的数据，行数据，行index 看行号 16

    $("#grid_upload").datagrid({
        // url: `drawingLog/select8ProductId/${productId}`,
        url: `drawingLog/select8ProductIdWithPermission/${productId}`,
        striped: true,
        sortable: true,
        rownumbers: true,
        method: 'GET',
        remoteSort: false,
        singleSelect: true,
        columns: [[
            { field: "iid", title: '主键', hidden: true, width: 50 },
            { field: "product_id", title: "存货主键", hidden:true },
            { field: "filename_original", title: "原文件名",width:300 },
            { field: "filename_rename", title: "自定义文件名",width:200 },
            { field: "hash_string", title: "图纸文件",width:80,
                formatter:function(val,rowData,rowIndex){
                    const downloadFileName = getDownloadFileName(rowData);
                    if(val && val.length > 0 ){
                        // 拼接图纸目录和UUID文件名，得到图纸的绝对路径文件名
                        const drawingLink = getDrawingFileLink(val);
                        return `<div align="center" style="width:100%;"><a href=${drawingLink} target="view_window" download=${downloadFileName}> &nbsp;✔&nbsp; </a></div>`;
                    }
                    else {
                        return '';
                    }
                }},
            { field: "remark", title: "备注",width:150 },
            { field: "create_time", title: "上传时间",width:100,
                formatter:function(val){
                    return DatetimeUtils.dateToStr('yyyy-MM-dd',new Date(val));
                }}
        ]],

shift 连选

制作 easyGridShift.js ，全部代码如下

// 2022年4月12日 13:50:25 chanchaw
// 为 easyui grid 制作通过 shift 连续选中功能
// 使用必读：
// 在使用本页面中的任何函数之前要调用 initShiftFn 初始化 - 传入表格ID

const KEY_BOARD = { SHIFT: 16, CTRL: 17, ALT: 18, DOWN: 40, RIGHT: 39, UP: 38, LEFT: 37 };
const selectIndexs = { firstSelectRowIndex: 0, lastSelectRowIndex: 0 };
const inputFlags = { isShiftDown: false, isCtrlDown: false, isAltDown: false };
let gridId = '';

// 初始化，传入页面 body 对象，表格名称
function initShiftFn(vBodyObj,vGridId){
  gridId = vGridId;
  
  $(vBodyObj)[0].onkeydown = keyPress;
  $(vBodyObj)[0].onkeyup = keyRelease;
}

function keyPress(event) {//响应键盘按下事件
  var e = event || window.event;
  var code = e.keyCode | e.which | e.charCode;
  switch (code) {
    case KEY_BOARD.SHIFT:
      inputFlags.isShiftDown = true;
      $(`#${gridId}`).datagrid('options').singleSelect = false;
      break;
    case KEY_BOARD.CTRL:
      inputFlags.isCtrlDown = true;
      $(`#${gridId}`).datagrid('options').singleSelect = false;
      break;
    default:
  }
}


function keyRelease(event) { //响应键盘按键放开的事件
  var e = event || window.event;
  var code = e.keyCode | e.which | e.charCode;
  switch (code) {
    case KEY_BOARD.SHIFT:
      inputFlags.isShiftDown = false;
      selectIndexs.firstSelectRowIndex = 0;
      $(`#${gridId}`).datagrid('options').singleSelect = true;
      break;
    case KEY_BOARD.CTRL:
      inputFlags.isCtrlDown = false;
      selectIndexs.firstSelectRowIndex = 0;
      $(`#${gridId}`).datagrid('options').singleSelect = true;
      break;
    default:
  }
}


function handleShift(index, row) {
  if (index != selectIndexs.firstSelectRowIndex && !inputFlags.isShiftDown) {
    selectIndexs.firstSelectRowIndex = index; //alert('firstSelectRowIndex, sfhit = ' + index);
  }
  if (inputFlags.isShiftDown) {
    $(`#${gridId}`).datagrid('clearSelections');
    selectIndexs.lastSelectRowIndex = index;
    var tempIndex = 0;
    if (selectIndexs.firstSelectRowIndex > selectIndexs.lastSelectRowIndex) {
      tempIndex = selectIndexs.firstSelectRowIndex;
      selectIndexs.firstSelectRowIndex = selectIndexs.lastSelectRowIndex;
      selectIndexs.lastSelectRowIndex = tempIndex;
    }
    for (var i = selectIndexs.firstSelectRowIndex ; i <= selectIndexs.lastSelectRowIndex ; i++) {
      $(`#${gridId}`).datagrid('selectRow', i);
    }
  }
}

在实际业务页面的 js 中添加下面代码。即在加载页面后对本功能进行初始化：传入 body 对象、表格ID

// 加载页面立即执行
$(function(){
    initShiftFn($('body'),DIALOG_ID_SET_PRICE);
})

给表格设置触发事件，为 onClickRow 设置调用方法 handleShift

<table id="window_edit_editable_grid" data-options="onClickRow:handleShift"></table>

在新达两个对账单的弹出模态窗中已实现

获取表格列定义

columnOpts = $(e).datagrid('options').columns[0];
// 获取到的数据模型是：
[{
    "title": "编号",
    "field": "id",
    "hidden": true,
    "width": 50,
    "align": "center",
    "halign": "center",
    "deltaWidth": 1,
    "boxWidth": 49,
    "cellClass": "datagrid-cell-c1-id"
},
{
    "title": "销售订单号",
    "field": "salesOrderCode",
    "width": 100,
    "align": "center",
    "halign": "center",
    "deltaWidth": 1,
    "boxWidth": 99,
    "cellClass": "datagrid-cell-c1-salesOrderCode"
}]

生命周期钩子-回调函数

onLoadSuccess

数据加载成功后的回调函数

$("#grid_show").datagrid({
    url: "",
    rownumbers: true,
    showFooter: true,
    fit: true,
    singleSelect: false,
    columns: [[
        {title: '主键', field: 'bItemid', hidden: true, width: 50},
        {title: '计划单主键', field: 'bId', hidden: true, width: 50},
    ]],
    onLoadSuccess: function (data) {
        calculate(this);
    },
});

列 onChange 联动更新其他列

白玉兰项目文件 SC_ClientOrders_v9.js 在定义表格列 element 中在事件 onChange 下更新工序工艺为相关着色方式下属的工艺。关键代码

$(craftId.target).combotree({
  queryParams: {pId: newValue}
});

表格组件

# 日期类型

# 更新指定行指定列数据

# 记录选中行 rowIndex

# 获取表格编辑器并更新数据

# 获取表格编辑器并刷新数据

# 行内编辑应用公式计算

# 行内编辑控件类型的使用

# 日期类型

# 枚举类型下拉数据

# 获取指定字段的编辑器

# 下拉选择数据源

# 获取所有行、选中行

# 加载外部数据

# 勾选事件

# 获取指定行的指定属性

# 刷新指定行数据

# 显示主键对应名称

# 加载数据后获取数据刷新 Footer

# 文字变色

# 修改选中行数据

# formatter

# shift 连选

# 获取表格列定义

# 生命周期钩子-回调函数

# onLoadSuccess

# 列 onChange 联动更新其他列

#

日期类型

更新指定行指定列数据

记录选中行 rowIndex

获取表格编辑器并更新数据

获取表格编辑器并刷新数据

行内编辑应用公式计算

行内编辑控件类型的使用

日期类型

枚举类型下拉数据

获取指定字段的编辑器

下拉选择数据源

获取所有行、选中行

加载外部数据

勾选事件

获取指定行的指定属性

刷新指定行数据

显示主键对应名称

加载数据后获取数据刷新 Footer

文字变色

修改选中行数据

formatter

shift 连选

获取表格列定义

生命周期钩子-回调函数

onLoadSuccess

列 onChange 联动更新其他列